Scoring 100/100 in Google PageSpeed Insights, GTmetrix PageSpeed and Yslow (and why you probably shouldn’t bother ;) – Kriesi.at – Premium WordPress Themes

This article will teach you how to get a perfect score with Enfold and its latest performance upate to Version 4.3 on Google PageSpeed Insights and GTmetrix. It will also explain why it’s probably not a good idea to obsess over it

Don’t let yourself get fooled by the title. You should definitely care about your site performance and using those tools allows you to identify problems easily. In general you get very good recommendations but you should know when to follow them and when to ignore them :)

The metric that is much more important than any score, awarded by those testing tools, is the page load time of your site. And to achieve a good page load time a good server environment and optimised images are usually much more important than any theme optimisations you can do.

So make sure to not get obsessed with a good score, just for the sake of the score ;)
Also, while building our latest Enfold Update we set up a total of 12 test environments and probably did 1000 speed checks. The conclusion we came to, is that the trade offs for a perfect score are often times not worth it. (eg: compressing your images to a point were quality suffers dramatically, using a ton of inline css and javascript to satisfy above the fold rules, etc)

So here is what we are going to do:

1. We will set up a new test site and activate our Enfold Theme
2. We will install our Enfold 2017 Demo (it has a lot of content, images, slideshows so its a good guinea pig)
3. We will optimize it to get to a 100/100 score on all testing tools
4. We will tell you which of those optimisations are probably not worth the trade offs

 

1.) The theme by itself

After setting up the new WordPress Site and activating the theme, if we check the score we get pretty good results out of the box. After all, enfold is now heavily optimized ;)

A lot of the optimization that we will introduce you to in this article are content and server related and got nothing to do with Enfold.

The options that can be changed in the theme are not that many, most of the optimization is set up automatically by conditional checks we have implemented. Sort of an AI that does a lot of the optimization related stuff for you ;)

Here is a screenshot of the “main” optimisation options. It is recommended to enable both the merging and compression of your CSS and JS files. It is also recommended to only load template builder elements that you are using. The theme will try to keep track of those and automatically load the necessary files. We have already described how these settings work in our introduction blog post for Enfold 4.3.

(PS: Please note: if you are upgrading from a previous Enfold version those features are by default not active and you need to enable them manually. This is to prevent any undetected errors for users that are just updating and not checking their site afterwards. New installations will have these features enabled by default)

2.) The theme with content

After installing the Enfold 2017 Demo, our initial speed test results are rather mixed:

As you can see, especially the desktop score for pagespeed insights and gtmetrix pagespeed are rather bad. This is because the score is influenced heavily by the level of image optimisation. Since we did not do any optimization yet our score suffers, despite the fact that there is a lot of green bars and the theme scores really well with most of the other performance tests. So first things first: lets install an image optimization plugin.

 

3.) Image optimization

And here you already encounter your first decision since image optimization is a tricky business.

You have to strike a good balance between size reduction and image quality. If you reduce the file size too much the image might be small and the pagespeed tools might be satisfied, but the experience for your users would be rather crappy since they would see some ugly pixelated pictures. On the other hand, if you choose too little reduction your site might be too large and load slowly. And on top of that your score – and whats more important – your user experience and in the future also your mobile site ranking might suffer.

We have tested a long list of plugins and found that Shortpixel and Optimus did a really nice job for us.

Optimus worked well out of the box for the images we are using on our test site and shortpixel allowed us to fine tune the results a little better due to more options.

The Shortpixel “Lossy” Compression will heavily reduce the image size but is also rather aggressive. If image quality is not that big of a deal for you go with that. If quality is important use the “Glossy” compression setting. Some images might be too large for the pagespeed tools but you can then decide if you want to reduce the  image size further individually or if you want to keep the image as is. If you don’t already have a preferred image optimization plugin you can download and install either of those two plugins directly from your Enfold Performance Panel:

For the sake of this demo we went with Optimus and after batch processing all images our results got much better already. Unfortunately thats sometimes not enough for the pagespeed tools so it sometimes happens that you need to individually process some images. Optimus does not allow that, but tools like shortpixel do. In the end its a little trial and error which plugin works best for the images you are using :)

Both Mobile and Yslow rating did not change much (because they do not really take images into account) but the others went from red straight into green with a score of at least 85+. This alone shows you how important image optimization is.

4.) Leverage browser caching

Next on the list of both pagespeed insights and GTmetrix is to set up browser caching. What this means is that static resources on your website, like CSS files, Javascript files and images, are only loaded once by a visitors browser: when he first visits. On consecutive visits of your website those resources will be loaded from the browser cache.

This only works if the webserver tells the browser on first load, that those resources are viable for a longer time. So, yes, this is neither a theme nor a WordPress optimization issue, it is something that needs to be changed for your server. Since most webhosts these days run an environment that allows you to easily change this all you need is to open the root directory of your WordPress installation, look out for the .htaccess file and paste the following lines of code at the top:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>

If this does not work for you for whatever reason there are other steps you can try, described here.
So now that we have enabled browser caching we can do the test again and its gotten better once again.

As you can see this server optimization is also quite important. Slowly but steady we are getting there.

4.) Eliminate render-blocking JavaScript and CSS in above-the-fold content /Defer parsing of JavaScript

Those two messages essentially mean the same thing: In order to render the page as fast as possible there should be as little external resources likes CSS files, Fonts, Javascript be in the head of the theme. If it must be there the page speed tools ask you to move them to the bottom of the site, or put it inside the HTML document, instead of placing it in an outside file. This is because the browser needs to wait for those files to fully load before being able to display the site.

Enfold on its own tries to place as many of the files as possible at the bottom of the site to satisfy those requirements.

However some external plugins may overwrite this. An example would be the Layerslider plugint that we use here. Luckily its quite easy to solve this issue, since the layerslider also got a few optimization settings. Head over to the Layerslider->Options Page and open the advanced tab. Set the options like this:

This will tell the slider to load its script in the footer of the page as well.

Another issue with above-the-fold content are custom fonts. If you are using one or more google fonts, provided by the theme, this will also hurt your score. The Enfold Performance page lets you change the way those fonts are loaded from header (which is the default) to footer. This is one of the settings that has a small trade off. Setting it to load fonts in your footer will slightly speed up the page and satisfy all the page checks.

But it will also cause a short flicker of text on page load, since the text will be rendered first with a fallback font, and only then will the Google font get applied.

Personally I am not using this setting for our websites because I consider that font flicker to be very annoying, but if you want to squeeze every millisecond out of your page this will be necessary. In order to get a perfect score this is also necessary so we will activate the setting as well.

As you can see, I also set jQuery to load in the footer and I disabled some other WordPress defaults that are not necessary for most sites (emojis and jquery migrate). If you are running a lot of plugins you might want to leave those settings untouched since they might cause problems with badly coded or outdated ones. (Please note that if you are running no plugins at all some of the options are set automatically for you and won’t be displayed)

Lets check our score:

As you can see we are getting there. Already 99/100 on insights and 100 on Gtmetrix Pagespeed. Whats left to do is no longer part of the theme but once again some server stuff :)

5.) Reduce server response time

This statement is shown by insights if your site is served too slow. And slow is relative here because it means longer than 20ms :)
In order to get that last 1 percent out of insights make sure that your site is using a caching plugin. Since I can remember our sites have run on Wp Super Cache. It is one of the easiest to use plugins that also offers options to fine tune it. In most cases you simply install and activate it and are done. Thats why it is also recommended on our Performance page ;)

Once the plugin is active visit the page once, so a cached version is generated. Once that is done your site will score 100/100 in google pagespeed insights as well ;)

As you can see, all thats left is Yslow ;)

6.) Yslow: 3 big Problems left: Using a CDN, use Cookieless Domains, too many DOM elements

• Using a CDN with Wp Supercache is rather easy. Here is a good article that lists the steps you should take.
• Cookiless domains: The Yslow testing tools are not up to modern standards here. With HTTPS almost everywhere now, this is no longer a necessary step. If you really want to do this for the sake of the page score, here is an article as well ;)
• Reducing Dom Elements: One of the trade offs I spoke about earlier. Too many DOM elements basically means that our site is too large. In order to satisfy this I will delete a few elements from the page, but I would not do this in a real life situation, If I thought that content is important ;)

Once all those steps are performed we are coming close at Yslow as well:

 

To squeeze out the last few points Yslow wants you to reduce the number of HTTP requests (less JS and less CSS files) and add expires header to all files. The later can only be solved if you are not running any google fonts at all (tradeoffs, you remember? :P) because thats the file that Yslow is concerned about:

So in order to score perfectly we would work without our google fonts and disable them. Too many external JS and CSS files is a problem specific to our current test environment: the layerslider plugin has a few files that we can not compress at the moment with the current version of the Layerslider. We talked to the layerslider team and worked out some improvements to the slider together and applied those changes to the test server (they will be included in all future versions of the Layerslider Plugin so no need for you to do anything here)

Voila, we are there! (Here is a link to the test server test restults. It will probably be removed at some point in the future but for now you can use it to see that we were not cheating ;D )

 

Which steps do we ignore, here at Kriesi Media?

So in theory you can see it is possible with a little effort, to achieve a perfect score. But as I said from the beginning, there are some things that you can not easily fix, and I think its important to know when to ignore the pagespeed tool.

• We will keep ignoring “above-the-fold” render blocking messages. Yes you can use a plugin and print all your CSS and Javascript to the HTML instead of loading it, but this will only hurt consecutive page loads. So you will almost always get a message about your merged css file and that it blocks rendering.
• We will keep using external fonts from google, and we will load them in the header. This means we can no longer get a perfect page insights score since render blocking is active, and it also means that Yslow will reduce the score due to far-future expiration headers not sent for these resources (since they are served from google, the header must be set by google and its not going to be something they will do anytime in the future)
• We will probably never get a perfect score for all of our images, because as a designer I want my website too look good as well :)
• We will keep using external plugins like the Layerslider and WooCommerce which might reduce the score a little bit but offer amazing functionallity.

These 4 points alone will reduce the score we get awarded. However at the same time, the real and most important metric will barely be compromised. Load time for the visitor. And this is something that still will be heavily reduced if you take all those steps above:)

On our test page we went down to about half the size and half the page loading time from a previous enfold version when we apply realistic settings and do not delete any content at all. I would consider that a huge win, even if we do not score perfectly ;)