Configure Autoptimize, Images, and Final Tips
This is the fifth and final post in our series that explains how to set up W3 Total Cache plugin to achieve PageSpeed grade of 100.
Here we explain how to configure the Autoptimize plugin, how to take care of the PageSpeed requirements for images, and give more tips for dealing with oddities of W3 Total Cache plugin.
The screenshots from the Settings pages that you see here, are taken from narrow screens, to allow this post to be seen on narrow screens properly. These Settings pages on wide screens look a little bit differently, and we give links to the relevant screenshots.
Autoptimize settings (updated April 15, 2016 for Autoptimize 2.0.1; no change needed for Autoptimize 2.0.2)
The installation of Autoptimize plugin is similar to any other WordPress plugin.
The easy way 1: basic settings
The best is to start with the following basic settings.
Press Save Changes and Empty Cache at the bottom and check your pages and posts with PageSpeed Insights. If there are no complaints about render-blocking CSS or prioritizing visible content, you are done.
The easy way 2: Inline all CSS
Usually this is not the case and PageSpeed Insights still have complaints about render-blocking CSS. In such case find CSS Options section and check Inline all CSS as shown on this screenshot. This is how this section of the Settings screen looks on a wide screen.
If PageSpeed Insights are happy with this arrangement and do not complain about inlined CSS being too large, you are done.
The tricky way: above-the-fold CSS
If this is not the case, you may have to resort to the trickiest possibility of inlining “above the fold CSS” only. Uncheck Inline all CSS and check Inline and Defer CSS as shown on this screenshot.
The tricky part here is to create “above the fold CSS” to insert in the input window on this screenshot; what is shown on my screenshot, is my version and you should create yours which depends on your theme and plugins.
Above the fold CSS – the critical CSS – is the part of the CSS code of your theme and plugins that is necessary to render the initial screen (above the fold content) that the browser displays to the users before they scroll down. PageSpeed Insights insist that the above the fold part be rendered quickly by the browser.
To identify your critical CSS, you will have to look inside the files produced by your WordPress theme and plugins and be able to understand the basics of HTML and CSS. For this reason my directions here are brief.
In fact, there are automated tools that claim to identify your critical CSS; however, I have not found one that did the job correctly for my site.
How I identified my critical CSS
I installed two extensions to my Firefox browser: Firebug and CSS usage.
I logged out of my blog (to make sure that my site is displayed without the admin bar), opened my page in Firefox, right-clicked on the page and selected Inspect Element with Firebug. In the Firebug window I selected the rightmost tab, CSS Usage.
I pressed Scan and got a detailed report on my CSS.
I went over all selectors looking for green-colored ones that are applied, and skipping those that clearly seemed to refer to the bottom part of the page (“below the fold”). I opened the appropriate CSS files and copied these selectors to my critical CSS.
In this way I created the first version of my critical CSS.
Unfortunately, it was not correct: when I loaded my page, my browser displayed its first version and about a second later the text on it visibly jumped as the deferred CSS was loaded.
I downloaded the page with
I compared the pages with the browser and found that they were visibly different.
I inspected them with Firebug, found in the html tab of Firebug the elements which were different, found and compared their styles. In this way I found what I was missing in my critical CSS, added it there until there were no differences.
At this point PageSpeed Insights became happy with my posts. However, they still complain about my front page with the grade of 97, and the Google people have not been able to explain this with some colleagues suggesting that this is a bug of PageSpeed Insights tool. As I was more concerned with SEO for my posts, I did not follow it further, being content with 97.
Note also that if you succeed in identifying your critical CSS and after that create pages and posts with significantly new layout in the above the fold part, you may need to add more to your critical CSS.
Inline CSS that is already present in your html
Your theme or plugins may put some CSS code inline in the header of the html files produced by WordPress.
The previous version of this post was written for Autoptimize version 1.9.2. This version did not have the Also aggregate inline CSS checkbox and it moved any inline CSS into a separate CSS file that was deferred and loaded after the html file (this is what is meant by aggregation). This resulted in PageSpeed complaining about the render-blocking CSS. For this reason all such script had to be listed in the Exclude CSS from Autoptimize: field. All this is no longer necessary after version 2.0.0 as we simply keep Also aggregate inline CSS unchecked and this takes care of this problem.
There are two PageSpeed requirements related to images: Prioritize Visible Content which may be triggered if you have images above the fold, and Optimize Images which may be triggered by any images.
Prioritize Visible Content
If you have an image in the above-the-fold part of your page and it is contained in a separate file then this file needs to be downloaded separately after the html is downloaded. In such case PageSpeed Insights usually tell you to Prioritize Visible Content and charge a few points off your grade.
One example is the header image that most WordPress themes offer.
You may also have an image as a substantial part of your content. For example, my homepage has my picture.
There are a few ways to deal with this:
- You may forgo the image entirely. I decided that I do not want any header image on my blog since I wanted my readers to concentrate on my content.
- You may inline your image inside your html. I did this with my picture on my home page as it is small, only 2.3Kb. I used this guide for inlining and it worked fine. However, if your image is too large then PageSpeed Insights may complain for that. (I save my screenshots and photo in JPEG format with 85% quality using GIMP program and this makes them fairly small. In addition, this takes care of another requirement of PageSpeed Insights: Optimizing images, see below.)
- You may try to use Generate data option of Autoptimize as shown on the screenshot. It appears to inline the images in CSS rather than in html so it is probably more appropriate if you want to use it to keep your header image. I should admit I have not tried it. This is how this screenshot looks on a wide screen.
- You may try to rearrange the material on your page to move the image down below the fold.
Update November 19, 2015: Optimizing images
This requirement is triggered if PageSpeed determines that one of your images can be compressed without reducing its quality significantly; in such case PageSpeed charges you one or more points off your score.
Sometimes the savings they are concerned with, amount to just a few hundred of bytes which IMHO is ridiculous nitpicking.
If the image file they complain about, is hosted on your website, then you may compress this file – see below – and satisfy this requirement.
If the image file is located off your site then you either need to convince the owner of the image to compress it, or to place a compressed copy on your site (with the owner’s permission if copyrighted).
How to compress images
Update August 30, 2016: Now PageSpeed offers you to download the compressed images if it determines that yours are not optimized. Earlier you had to compress them yourself, and here are my notes on that.
I have encountered the need to compress images of two file formats, JPEG and PNG.
Compressing JPEG files (.jpg, jpeg): I have already mentioned that for this purpose I use GIMP image editor, a free program; opening JPEG files with GIMP and saving them with the default 85% quality satisfies PageSpeed.
Compressing PNG files (.png): I have encountered this problem recently when a visitor left a comment below on this page with a number of smilies. Some of the smilies WordPress displayed with files hosted on their own site while the simple smile was displayed by a file hosted on my site, simple-smile.png. The file size was 1008 bytes; PageSpeed charged me one point off my score and told me to optimize this file down by 695 bytes to 313 bytes.
As I looked for the ways to do this, I found no free tool that was capable of such achievement. It appears that there are different algorithms for compressing PNG files, and no single free tool was capable of using all of them.
I ended up using four different on-line compressors in the following order:
- Compressor.io compressed my image file from 1008 to 635 bytes.
- Gift of speed reduced the result to 602 bytes.
- TynyPNG reduced the result further to 551 bytes.
- ezgif.com reduced the result to the final 519 bytes, and the visual difference with the original was noticeable but not really significant.
The order of compressions was important; I attempted some other orders and the results were worse.
PageSpeed was happy with the result.
Update March 14, 2016: Emojis
This is a feature introduced in WordPress 4.2; however, my troubles with it started later.
Soshios left a comment on this page on October 15, 2015 that included three smilies which showed fine on my website which at the time was running WordPress 4.3.1; the smilies showed up fine using local files.
Apparently, WordPress 4.4 started displaying smilies as emojis.
After I updated to 4.4, two of the smilies in Soshios’s comment showed up as emojis using files from a WordPress site, s.w.org. These files were not minimized and PageSpeed charged me one point for this.
When I started researching this matter, I have bumped into a post that pointed out that the emojis code burdens and slows down unnecessarily all pages that do not use emojis.
This post and the WordPress.org Support discussion suggest Disable Emojis plugin. However, this plugin replaced one of the smilies that Soshios used, by a black and white one while the other one showed as an unknown character.
The same WordPress.org Support discussion also suggested Classic Smilies plugin that restored the old smilies functionality and disabled the emojis as an added bonus. This plugin works fine for me.
In addition, the smilie images provided by this plugin, are already optimized.
Update August 30, 2016: Advertisements
Most advertisements significantly decrease your PageSpeed score.
I have found one advertising service that is efficient and does not affect PageSpeed Score: Sekindo. I am using their Hebrew advertising service which does not require large traffic on your site to sign up. I use it only on my Hebrew and Israeli-related posts. They also have English service but they require significant traffic to sign up.
On some posts I have been able to fix this by moving the advertisement little bit further down but on others this did not help, even though on similar posts PageSpeed did not complain.
It seems that this is a bug in the PageSpeed tool similar to the one I encountered with my home page; see How I identified my critical CSS above.
I chose to forgo advertisements on the posts affected by this problem.
Tips for using W3 Total Cache and Autoptimize
Close your Edit Post/Page pages
If you edit your post or page, make sure you close your Edit Post/Page page. It is not enough to press Update; you also need to press View Post after that to close the Edit Post/Page page. Otherwise your changes may not propagate fully.
The annoying popup
After 30 days W3 Total Cache plugin starts showing you an annoying popup on all its settings pages. People who work on regular wide screens see the x close button in its upper right corner (see the screenshot) and click to close it, to get access to the page. However, the next time they open any W3TC settings page they see the same popup. This is very annoying and causes many negative reviews even from people who continue using this plugin.
Well, it turns out that a simple way out of it is to click Cancel instead of that x; in such case the popup will leave you alone for a while. (No, I have not been subscribed to the newsletter this way.)
Alternatively, you may open the file
wp-content/w3tc-config/master.php , find the line
'notes.support_us' => true, and replace
One of the requirements of PageSpeed Insights is that your files – html, css and js – be minified, i.e., not include too many things that are not necessary for rendering your pages, such as extra spaces and comments.
In particular, any white space consisting of many spaces and tabs is treated by html standard as one space, and thus is not necessary; minifying includes removing such extra space.
Generally, Autoptimize does quite a good job in minifying all your files and in most cases PageSpeed does not complain about this matter.
The only exception to this I encountered was extra white space that I entered inside the text of my post. While Autoptimize promptly removes extra white space in html code created by WordPress or its plugins, it does not remove extra white space that users enter by hand in their posts and pages.
(Normally, when you write your post in WordPress, you would not put in too much unnecessary white space and you would not encounter this problem. However, I create my posts outside of WordPress to put more complicated html in them and I add white space in them for html readability. When my posts are ready, I copy the html into WordPress and sometimes run into such problem.)
When this happens, I run a minifier on my html before tranferring it into WordPress.
I use a web-based HTML Minifier by Juriy “kangax” Zaytsev. It does a good job removing all space that is not necessary according to the standard. It has many options but most of them do not matter for pure html.
Another possibility is Pretty Diff Minifier. It works fine but still leaves out some spaces between html tags that can be removed.
Other PageSpeed issue: Google Analytics
Google Analytics is an extremely popular free service that analyses your site traffic.
It comes with a price of one point off your PageSpeed grade for not including browser cache header. (Yes, Google is short on this header and punishes us for it!)
This is still true in April 2015.
I have removed Google Analytics from my site for reasons explained here.
Update May 28, 2015: Gravatar images in comments
Gravatar stands for Globally Recognizable Avatar, a WordPress-owned company. You can sign up your email at their site, post your avatar picture, and whenever you leave a comment at a WordPress site and give that email, you are recognized. In particular, your comment may be approved faster and your avatar will appear by your comment if the site owner configures it this way.
From the site owner’s point of view, the pictures are hosted on gravatar.com which does not supply browser caching header. PageSpeed Insights charge you one to two points off your grade for this.
(They actually require 5 minutes caching header which IMHO is really silly to bother with!)
I discovered this when Cibele left a Thank you comment at this page.
I tried to contact Gravatar team and ask them to start supplying the header.
Unforturnately, Gravatar support is closed at the moment. I tried to post my message to them as a comment at some not quite appropriate place on their blog, for lack of other possibility. I shall post updates if I get any response from them.
In the meantime, I have disabled avatar display on my site. (This is done on Dashboard → Settings → Discussion page, at the very bottom: uncheck Show Avatars.)
This resolves the PageSpeed issue but I would really prefer to see the avatars of my visitors!
Sorry, Cibele, and thanks for leaving this comment that allowed me to find this out!