If you are a professional Web Performance Optimizer (WPO), or if you are simply someone who cares about online performance and pagespeed, chances are that you are doing these performance optimisations wrong.
Luckily, so are most of your online competitors. I’d like to present you 8 things that you need to look out for, to insure you don’t fall for the most common mistakes.
- Dutch version with more related articles: https://www.blue2blond.nl/nieuws/waarom-je-seo-performance-verkeerd-doet.html
Use KISS for performance
Performance optimization does not have to be difficult to start with. As with a lot of things, the KISS-principle (Keep It Simple Stupid) applies. For instance:
- Do you really need a handful of (Wordpress) plugins? Plugins give you freedom, but also have an impact on the Time to First Byte (TTFB);
- Do you really need that (Wordpress) plugin, which inserts a similar second jQuery, FontAwesome or Bootstrap version, on top of the theme? While Wordpress plugins are not working together, try to reuse existing Wordpress resources;
- Are there actually three custom (Google) Fonts needed? Consult with the designer and client on a performance budget and optimize your fonts;
- Are there actually several third party tracking snippets needed from Hotjar, Salesfeed, LeadElephant, a separate Google Analytics and Google Tag Manager snippet? Also try to agree on a performance budget with the marketer and remove Hotjar, for example, as soon as there is sufficient measurement data in case of a new website;
These are some examples that appeal to the imagination. But even if you have tackled the list above, or are in the process of tackling them, there is a good chance that the performance optimization will still take place in an incorrect or unfortunate way.
And no, techniques such as AMP, PWA or HTTP / 2 aren't out-of-the-box solutions for your performance problems, no matter how much I adore and support these techniques.
More conversion with faster loading webpages
The performance of a website or webshop can be improved in several areas. For this, we will dive more into the technique of websites. Although you might have implemented the techniques, chances are they aren't implemented in it's most ideal way, with unwanted negative loading-results. If the website or product page loads within two seconds, your conversion (such as webshop revenue) will be 15% higher than the average mobile website or webshop.
How your performance optimization tricks still backfire
Do not feel discouraged when going through the list below; analyzing the “Emerce 100” Best Dutch (top 14) digital agencies, exactly half of them scores unsatisfactory, with a PageSpeed Insights score between 17 and 41 percent. Only one optimization agency (and the only one without CMS) gains green figures (90-100%) with a 97% score.
Top 14 digital agencies according to Emerce / public opinion (with only one of them hitting the green figures):
Google's Lighthouse Analysis tool provides a good basis for mapping the performance of your website or product page. When you don't have Lighthouse at your disposal, use PageSpeed Insights as a basic analysis of your website.
Beyond the more logical performance optimizations, chances are that you are still doing the following wrong:
- A (WordPress) plugin for minimizing JS and CSS files? A good start, but combine this with decent server side caching, to avoid impact on TTFB;
- A plugin for merging (merging) of source files? Within Wordpress this often happens half-heartedly, whereby source files (on the same server) of specific plugins are sometimes not included when merging files. Better to rely on HTTP / 2 and de-install the plugin for better TTFB;
- Do you use resource hints? Chances are that in the case of Wordpress, resource hints are used carelessly;
- Embedded Critical CSS by using a plugin? A best-practice for drawing the above-the-fold section of the webpage directly. Especially in the case of Wordpress, the entire stylesheet is embedded and even fonts are included in the Critical CSS. This is against the purpose and is just counterproductive!
- Embed Critical CSS on every page? Sounds logical, but is at least as painful as above. Because: you no longer use the benefit of client side caching, in the case of DeOnlineDrogist.nl the content-download of each individual (product) page increased by 633% (indeed three digits) using this technique;
- Stripped (third party) trackers to reduce the number of cookies? Good for privacy, but try to minimize the remaining cookies for requests to static files, such as scripts or images. Place the website on the www-environment, to serve source files over non-www. No specific server settings are required and you reduce network latency;
- Swapped JS animations for CSS animations? A good start, but make sure that the animation like shrinking the header/navigation bar and logo when scrolling, takes place over the GPU instead of CPU. Animations are not dependent on other JS tasks and (thus) less erratic.
- Do you use a CDN for JS frameworks? Some Wordpress plugins retrieve their files from Content Delivery Networks, but often each uses a different CDN. Such as cdnjs.cloudflare.com for FontAwesome, maxcdn.bootstrapcdn.com for Bootstrap and code.google.com for jQuery. These are unnecessary DNS look-ups and thus generate unnecessary network latency. Try to serve external resources via the same environment!
Want more information on this subject, extra feedback on what you have already done for the optimisation on your website/webshop, or in need of a second opinion? Don't hesitate to contact me, and see what I can do for you out in the field or ask about the automatic performance optimisations that the LightBolt CMS can take care of.