Get PageSpeed 100 by using W3 Total Cache and Autoptimize, Part 5: Autoptimize, Images, Tips
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.
First, check Optimize HTML Code, Optimize JavaScript Code, Optimize CSS Code, as shown on the first screenshot.
This is how this section of the Settings screen looks on a wide screen.
Then press Show advanced settings in the upper right corner,
find JavaScript Options section and uncheck Force JavaScript in <head> as shown on this screenshot.
This is how this section of the Settings screen looks on a wide screen.
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 
General
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.
This is how this section of the Settings screen looks on a wide screen.
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 wget and created two versions of it: the original created by wget and another one from which I stripped the references to all external CSS and Javascript.
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.
Images
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.
Some of them download multiple files which include uncompressed images and render-blocking javascript code. In some cases this doubles the pageload times, in addition to some 15 points PageSpeed charge.
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.
Nevertheless, I have not added advertisements on some of my relevant posts because the PageSpeed tool complained that the javascript code that loaded the advertisement, was render-blocking even though the advertisement was well below the fold and the code was very simple and straightforward so that it cannot be considered to affect the above the fold part by any reasonable standard.
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 true by false .
Minifying html
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.
You can resolve this by hosting Google Analytics on your site as explained in the same post or here.
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!
Cibele says:
Thank you SO much for sharing your knowledge! Helped a looooot.
Onelfri says:
Thanks for this, really a great resource. Only thing is W3 Total Cache is no longer available.
Baruch Youssin says:
I see it still being available at its old place, https://wordpress.org/plugins/w3-total-cache/.
Soshios says:
Hello Baruch,
I started reading this manual a few hours ago, then had to go out and pick up my sister. When I came back, I decided to apply every single suggestion you were provided here, on my own website. I’ve a fresh wordpress installed on my server, a light theme and some handy plugins including W3 total cache and Autoptimize. Unfortunately, since I’ve almost basic coding skills, couldn’t complete some tasks you’ve mentioned:
1- “Setting the cron job to preload the caches”: My shared host doesn’t support cornjob, so I went with the default settings.
2- Prevent caching of objects after settings change: I didn’t check this. When I check this, PageSpeed and GTmetrix give me a bad score on “Remove query strings from static resources” and ask me to fix it.
3- Eliminate render-blocking JavaScript and CSS in above-the-fold content: Couldn’t fix this as I don’t understand much about HTML and CSS to identify my critical CSS.
My score with PageSpeed: 91 for desktop, and 75 for mobile. I’m really concerned about my mobile score. It’s really low.
I’ve started building my site a week ago and trying to optimize it from the beginning to be in the right path. Search engines are blocked and can’t scan my site as I’m in the middle of construction process. Your website is the only place in the web that I find a thorough explanation about how to use W3 and Autoptimize to improve my site speed. Do you have any special suggestion for me? I’d be really thankful if you have a look at my score in GTmetrix and PageSpeed: pasandi . com
Baruch Youssin says:
Hello Soshios,
Thank you for your interest.
First of all, you seem to be a fast worker as you have been able to apply everything in a matter of a few hours. I would expect more.
The cron job: if your provider does not offer it, you can check whether they provide you with a SSL access to a shell. Shell is a command line interpreter on your server from which you can ran a cron job. SSL is secure protocol that connects you to the shell on your server. Part 3 has a link to a page explaining how to create a cron job from a Linux shell. (Linux is an operating system that most servers run.) If your provider does not give you a shell or you have difficulty using it, you may try services that may do it for free; someone has left a comment on Part 3 with an an address. I have not tried these services. As I said in Part 3, if none of these works, you may set a cron job on any other computer including your home one.
Prevent caching of objects after settings change: I do not know what to tell you. I have it checked and PageSpeed insights do not complain on my page. (I did not try to optimize my site for GTmetrics.) I would try to fix everything else first.
Eliminate render-blocking JavaScript and CSS in above-the-fold content: The two easy options I suggest above for Autoptimize settings do not require knowledge of CSS. If you have an light theme, one of them (likely the second one) may work.
I have looked up your PageSpeed score. You have 3 render-blocking css items. One is the css file created by Autoptimize that needs to be taken care by proper Autoptimize settings. The other two are short font definitions on Google website:
http://fonts.googleapis.com/css?family=Karla%3A400%2C700&ver=4.3.1
http://fonts.googleapis.com/css?family=Libre+Baskerville%3A400%2C700%2C400italic&ver=4.3.1
My guess is that your theme defines them. I do not know any way to take care of these font files without some coding. The easiest way (and probably the only one on a shared hosting) is to find the file in your theme that creates these links and edit it by replacing the links by the contents of the files that you see when you open the links.
It could be, though, that Google does not charge you much for these files and if you configure Autoptimize properly then your PageSpeed score improves considerably.
Another issue is Google Analytics which costs you a few points; I have removed it from my site entirely for reasons explained here:
http://baruchyoussin.com/en/piwik-vs-google-analytics-comparison-reliable.html
Finally, PageSpeed complain about your picture
http://pasandi.com/wp-content/uploads/2015/10/6556515115-300×300.jpg
It can be compressed easily using GIMP program; just open it in GIMP and save it as JPEG using 85% compression.
Good luck!
Soshios says:
Dear Baruch,
Many thanks for your detailed reply. Well I’m not that much fast
just solved the easy ones (thanks to your helpful posts) and now the most challenging parts are still unsolved (I read your reply yesterday, but despite trying lots of tricks, I’ve had no progress till now). Actually I love challenges but for me getting a 100/100 score in Google PageSpeed is not a goal. My goal is to have a simple, fast and light website (under 2 seconds) and PageSpeed gives me somehow a better picture of where am I now.
The corn job: I appreciate your explanation. It’s really clear. I’ll try it with my provider to see if they provide me with a SSL access to a shell. Although if they don’t provide, I won’t go further as it’s not a major problem in my case. I mean, I don’t know basics of HTML and CSS, and I’m playing with corn job issue
To be honest, what I learned and appreciate it most with your kind reply, is the fact that I have to learn HTML/CSS to some extent to solve some easy problems. Will start a course in Codecademy.in a few days 
Eliminate render-blocking JavaScript and CSS in above-the-fold content: Unfortunately the two easy options you suggested for Autoptimize settings didn’t work. For Autoptimize one, defer+inline may work. Seems “above the fold” depends on where the fold is. I tried this online tool to extract critical CSS for Autoptimize one: https://jonassebastianohlsson.com/criticalpathcssgenerator/
It gave me a smaller code which I pasted in defer section in Autoptimize, but nothing changed in PageSpeed report. So I unchecked difer+inline. Maybe in the future I could find a way to solve this.
For the fonts.googleapis.com ones, I decided to don’t use webfonts. As I’m Persian and my language is completely different to Latin languages, default fonts won’t be suitable for my audiences. I’ll buy 2 Persian font families and will upload them on my server. Then the rest is some CSS coding I have to learn ASAP! You know, my problem is the fact that Persian is a RTL language, need a separate rtl.css style file and both English and Persian resources are incomplete in this case. I had to do a lot of customization in my child theme. Finally I’ll sort it out.
I also read you post about Google Analytics and why you’ve removed it. You are right. Your site doesn’t need GA too much. For me, since I’m building an online shop, I’m afraid GA will help me to some extent. As you mentioned in that post, there is a way to solve Google Analytics error in PageSpeed, After solving fonts issue, I’ll go for GA one as well.
I didn’t know at all about GIMP program. It’s really helpful!
Again many thanks for your time and kindness. Good luck!
Baruch Youssin says:
Hi Soshios,
You are welcome!
Good luck!
Soshios says:
defer+inline worked for the CSS file created by Autoptimize. I just cleared my browser cache and tried again to extract critical CSS codes using website I mentioned above, and this time it worked! My PS score didn’t improve but fortunately one issue solved.
Brian says:
Thanks Baruch for this detailed guide.
For Part 5 on the Autoptimze Setting, I choose the Easy way 1: basic setting. And I noted that my homepage slider images are not appearing after saving the setting and refreshing the page.
Why is this so ? anyway to bring the homepage slider images back ?
Baruch Youssin says:
Hello Brian,
I think your slider images disappear because Easy way 1 is not appropriate for you. Try other ways.
I would also point out that if you have a slider with images above the fold then it will be hard to get PageSpeed 100 grade; see Images section above.
Good luck!
Mason Jobolski says:
Fantastic article Baruch! I especially found the tip about hosting Google Analytics useful, really helped my site performance. I did not even realize it was slowing my website down that much. It’s amazing how Google preaches page speed whenever it can but hasn’t took the time to find a solution for this issue.
One thing I am sort of “missing” (not really) is good sites/tools to benchmark and test speed with. I found http://www.pingdom.com and http://www.giftofspeed.com and they were okay but I’m looking for alternatives with more analysis. Haven’t been able to find one yet, you know of any?
Baruch Youssin says:
Mason,
For speed tests I have used Pingdom mostly. I also know https://gtmetrix.com/ , http://www.webpagetest.org/ and http://www.vertain.com/?sst .
I do not know whether they have that analysis that you want.
Good luck!
Mason Jobolski says:
Thanks for your quick reply Baruch! GTMetrix and Webpagetest look very promising so far.
George says:
Very good tutorial, but after all your settings, I noticed that google statistics analyst, not in real time. Do you have a suggestion for this problem ?
Baruch Youssin says:
George,
I am not sure what you mean by google statistics analyst not being in real time.
Maybe you have some Google-provided widget that displays some real-time statistics for your page.
If that’s the case then you need to check how this widget is embedded into your page.
If this widget is a link in your html to another page, whether on your site or Google then I would expect that the link would not change with time but the page it points to, would change, and in such case your widget should remain up to date.
However, if the contents of this widget are part of the html of your page then the caching plugin will serve the cached version and the contents of the widget would not advance until the plugin recreates your page.
In fact, the point of caching plugins is to avoid recreating your html as much as possible since html is created by php which is slow and expensive in terms of the server resources.
You can figure out how your widget is embedded, by inspecting the html of your page. You can either open your page in a browser, right-click your mouse and select “View Page Source”, or do wget from command line.
If the contents of the widget are part of html then you need to either give up caching or change the widget, its settings or the way you embed it in a page.
Good luck!
dian says:
Hi, is w3tc+autoptimize better than w3tc+cloudflare? I use w3tc+cloudflare with rocket loader set to automatic. The http requests reduce from 126 to 33. But some of ads disappear or not showing anymore. Does it also happen like this if I use w3tc+autoptimize?
Thank you.
Baruch Youssin says:
Dian,
Cloudflare is not a replacement for Autoptimize or vice versa.
Cloudflare is a CDN – content delivery network – and it caches and serves your pages when possible. This reduces http calls.
Autoptimize optimizes the way your CSS and Javascript are served, some of them early as the page is loaded and some late after it is loaded. Its point is to replace the similar Minify functionality of w3tc which I have not been able to get working.
Thus, I do not see the point in your attempt to compare w3tc+autoptimize with w3tc+cloudflare.
When you use w3tc+cloudflare, apparently you are using the troubled Minify functionality of w3tc and it does not surprise me that you have problems with your ads which are loaded by Javascript code.
I have not yet tried the ads but I think it is worth trying to use Autoptimize instead of Minify of w3tc. You may try doing this together with cloudflare; please share your results if you do.
Alternatively, if you are concerned only with http calls, you may try using Cloudflare without w3tc or Autoptimize as it may be enough for your needs.
Good luck!
Josh Seiler says:
Thank you for the instructions, worked well for me!
AoxoA Hooper says:
Superb article. Autoptimize’s inline and defer sets the inlined CSS site-wide by default. Most websites need inlined critical CSS on a per page basis (home page different from blog posts, different from regular pages, etc..). Here is a helpful guide to supplement your Autoptimize inline and defer tips: https://aoxoa.co/inline-defer-render-blocking-css-autoptimize/
Johnny M says:
Great guide, thank you so much for taking the time to write all these pages out, please know that it is very much appreciated.
I have one question in regards to all this, about the minifier within W3, wouldn’t it be better to use CloudFlare’s free account signup, configuring their minifier instead of W3’s, plus of course setting it up via W3 (which has support for cloudflare).
As far as I read in another article the minifier on Cloudflare is better than W3’s
If anyone tested this, or has any thoughts, I’d be happy to listen.
So the quad-cure is:
W3 + CloudFlare + Lazy Load + Some image optimizer (I just use tinypng.com or compressor.io manually)
livingstore says:
Great tutorial!!! Thank you very much, our page speed improved from E to A in GTMetrix.
MASI says:
Thank you very much for your great article, it’s really helped me.
Just i have an small problem, i’m confused now!
I added all .js and .css manually on W3TC, but still one .css has problem on google page checker:
Consider Fixing:
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Optimize CSS Delivery of the following:
https://www.persianwhois.com/…/minify/26952.default.include.c9d602.css
26952.default.include.c9d602.css is available currently on .css list, but i see this error. How can i fix this problem?
Baruch Youssin says:
What PageSpeed tells you, is that it cannot show the Above The Fold part of your page using your html file only and it needs an an additional file, 26952.default.include.c9d602.css. Getting this file after the html is loaded, requires additional time and PageSpeed punishes you for this delay.
This file, 26952.default.include.c9d602.css, is the result of minification of all your css files. W3TC collects all your css files, minifies them and combines them in this file.
Thus, adding this file on the css list of W3TC would make no effect since it is not one of your css files that it minifies and combines.
What you need, is to identify the part of your css that is needed to render the Above The Fold part of your page, inline it in your html and make sure that W3TC does not move it to another file.
One possibility to try is to inline all your css. You can do this with Autoptimize plugin as I explained above.
Good luck!
Tai Chinh says:
It’s great If W3TC can support to load CSS asyn to avoid install 2 plugins
Pham Dat says:
The post is very nice. You can use the Hummingbird plugin to enable cache for Gravatar
Ariel Guerra says:
Just for information, I followed all the steps, and passed from 69 to 54 and can’t get it back to 69 now…
Baruch Youssin says:
I am sorry to hear that.
I cannot say much about the reasons as no two sites are the same and plugins interact one with another.
To figure out the reasons for low PageSpeed score, one needs to study PageSpeed report and try to understand each item separately.
As for getting back to 69: if you had 69 without W3TC then removing W3TC plugin should take you back to what you had without it.
If you had 69 with some other settings of W3TC then you need to restore these settings.
Good luck!
Vinod says:
Very well detailed post, Bur does it really matter for google rankings?
Isua-mfon Offiong says:
THANK YOU FOR THE TUTORIAL