{"id":341,"date":"2015-05-05T15:32:23","date_gmt":"2015-05-05T12:32:23","guid":{"rendered":"http:\/\/baruchyoussin.com\/?p=341"},"modified":"2016-08-30T16:20:02","modified_gmt":"2016-08-30T13:20:02","slug":"configure-w3-total-cache-plugin-settings-for-pagespeed-100-grade-part-5-autoptimize-images-tips","status":"publish","type":"post","link":"https:\/\/baruchyoussin.com\/en\/configure-w3-total-cache-plugin-settings-for-pagespeed-100-grade-part-5-autoptimize-images-tips.html","title":{"rendered":"Configure W3 Total Cache plugin: settings for PageSpeed 100 grade, Part 5: Autoptimize, Images, Tips"},"content":{"rendered":"<nav>\n<p><strong>Other parts:<\/strong><\/p>\n<ul style=list-style-type:none>\n<li><a href=configure-w3-total-cache-plugin-settings-for-pagespeed-100-grade-part-1.html>Get PageSpeed 100 by using W3 Total Cache and Autoptimize, Part 1<\/a>\n<li><a href=configure-w3-total-cache-plugin-settings-for-pagespeed-100-grade-part-2-general.html>Get PageSpeed 100 by using W3 Total Cache and Autoptimize, Part 2: General Settings<\/a>\n<li><a href=configure-w3-total-cache-plugin-settings-for-pagespeed-100-grade-part-3-page-cache.html>Get PageSpeed 100 by using W3 Total Cache and Autoptimize, Part 3: Page Cache<\/a>\n<li><em>Previous:<\/em> <a href=configure-w3-total-cache-plugin-settings-for-pagespeed-100-grade-part-4-browser-cache.html>Get PageSpeed 100 by using W3 Total Cache and Autoptimize, Part 4: Browser Cache<\/a><\/ul>\n<\/nav>\n<h2><span id=\"configure_autoptimize_images_and_final_tips\">Configure Autoptimize, Images, and Final Tips<\/span><\/h2>\n<p>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.<\/p>\n<p>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.<\/p>\n<p>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.<\/p>\n<h2><span id=\"autoptimize_settings_updated_april_15_2016_for_autoptimize_201_no_change_needed_for_autoptimize_202\">Autoptimize settings (updated April 15, 2016 for Autoptimize 2.0.1; no change needed for Autoptimize 2.0.2)<\/span><\/h2>\n<p>The installation of Autoptimize plugin is similar to any other WordPress plugin.<\/p>\n<h3 style=clear:right><span id=\"the_easy_way_1_basic_settings\">The easy way 1: basic settings <img alt=\"Screenshot from Autoptimize plugin without advanced settings. HTML Options: (checked) Optimize HTML Code? (not checked) Keep HTML comments. JavaScript Options: (checked) Optimize JavaScript Code? CSS Options: (checked) Optimize CSS Code? CDN Options: CDN Base URL (empty)\" src=images\/w3tc\/Autoptimize-basic-narrow.jpg width=188 height=463 style=float:right title=\"Basic settings\"><\/span><\/h3>\n<p>The best is to start with the following basic settings.<\/p>\n<p>First, check <strong>Optimize HTML Code<\/strong>, <strong>Optimize JavaScript Code<\/strong>, <strong>Optimize CSS Code<\/strong>, as shown on the first screenshot.<\/p>\n<p><a href=images\/w3tc\/Autoptimize-basic.jpg>This is how this section of the Settings screen looks on a wide screen.<\/a><\/p>\n<p style=clear:right>Then press <strong>Show advanced settings<\/strong> in the upper right corner,<img alt=\"Screenshot of JavaScript Options: check Optimize JavaScript Code, uncheck everything else\" src=images\/w3tc\/Autoptimize-basic-JS-narrow.jpg width=189 height=583 style=float:right;margin-top:.5em title=\"JavaScript Options\"> find <strong>JavaScript Options<\/strong> section and uncheck <strong>Force JavaScript in &lt;head&gt;<\/strong> as shown on this screenshot.<\/p>\n<p><a href=images\/w3tc\/Autoptimize-basic-JS.jpg>This is how this section of the Settings screen looks on a wide screen.<\/a><\/p>\n<p>Press <strong>Save Changes and Empty Cache<\/strong> 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.<\/p>\n<h3 style=clear:right><span id=\"the_easy_way_2_inline_all_css\">The easy way 2: Inline all CSS <img alt=\"Screenshot from Autoptimize plugin with advanced settings, CSS Options section. (checked) Optimize CSS Code? (checked) Inline all CSS? (everything else not checked) Exclude CSS from Autoptimize: (do not touch what is here, you may need it later).\" src=images\/w3tc\/Autoptimize-CSS-Options-Inline-all-narrow.jpg width=190 height=490 style=float:right;margin-top:.5em title=\"Inline all CSS\"><\/span><\/h3>\n<p>Usually this is not the case and PageSpeed Insights still have complaints about render-blocking CSS. In such case find <strong>CSS Options<\/strong> section and check <strong>Inline all CSS<\/strong> as shown on this screenshot. <a href=images\/w3tc\/Autoptimize-CSS-Options-Inline-all.jpg>This is how this section of the Settings screen looks on a wide screen.<\/a><\/p>\n<p>If PageSpeed Insights are happy with this arrangement and do not complain about inlined CSS being too large, you are done.<\/p>\n<h3 style=clear:right><span id=\"the_tricky_way_above-the-fold_css\">The tricky way: above-the-fold CSS <img alt=\"Screenshot from Autoptimize plugin with advanced settings, CSS Options section. (checked) Optimize CSS Code? (checked) (everything else not checked) Inline and Defer CSS? (.panel-grid:before:{...) .\" src=images\/w3tc\/Autoptimize-CSS-Options-Inline-and-Defer-narrow.jpg width=191 height=687 style=float:right;margin-top:.5em title=\"Inline and Defer CSS\"><\/span><\/h3>\n<h4><span id=\"general\">General<\/span><\/h4>\n<p>If this is not the case, you may have to resort to the trickiest possibility of inlining &#8220;above the fold CSS&#8221; only. Uncheck <strong>Inline all CSS<\/strong> and check <strong>Inline and Defer CSS<\/strong> as shown on this screenshot.<\/p>\n<p><a href=images\/w3tc\/Autoptimize-CSS-Options-Inline-and-Defer.jpg>This is how this section of the Settings screen looks on a wide screen.<\/a><\/p>\n<p>The tricky part here is to create &#8220;above the fold CSS&#8221; 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.<\/p>\n<p><em>Above the fold CSS<\/em> &#8211; the critical CSS &#8211; is the part of the CSS code of your theme and plugins that is necessary to render the initial screen (<em>above the fold<\/em> 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.<\/p>\n<p>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.<\/p>\n<p><small>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.<\/small><\/p>\n<h4 id=critical-css><span id=\"how_i_identified_my_critical_css\">How I identified my critical CSS<\/span><\/h4>\n<p>I installed two extensions to my Firefox browser: Firebug and CSS usage.<\/p>\n<p>I logged out of my blog <small>(to make sure that my site is displayed without the admin bar)<\/small>, opened my page in Firefox, right-clicked on the page and selected Inspect Element with Firebug. <a href=images\/w3tc\/CSS-Usage.jpg>In the Firebug window I selected the rightmost tab, CSS Usage.<\/a><\/p>\n<p>I pressed Scan and got <a href=images\/w3tc\/CSS-report.jpg>a detailed report on my CSS<\/a>.<\/p>\n<p>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 (&#8220;below the fold&#8221;). I opened the appropriate CSS files and copied these selectors to my critical CSS.<\/p>\n<p>In this way I created the first version of my critical CSS.<\/p>\n<p>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.<\/p>\n<p>I downloaded the page with <code>wget<\/code> 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.<\/p>\n<p>I compared the pages with the browser and found that they were visibly different.<\/p>\n<p>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.<\/p>\n<p>At this point PageSpeed Insights became happy with my posts. However, they still complain about my front page with the grade of 97, and <a href=https:\/\/groups.google.com\/forum\/#!topic\/pagespeed-insights-discuss\/o5Y-F8EEiyQ>the Google people have not been able to explain this with some colleagues suggesting that this is a bug of PageSpeed Insights tool<\/a>. As I was more concerned with SEO for my posts, I did not follow it further, being content with 97.<\/p>\n<p>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.<\/p>\n<h4><span id=\"inline_css_that_is_already_present_in_your_html\">Inline CSS that is already present in your html<\/span><\/h4>\n<p>Your theme or plugins may put some CSS code inline in the header of the html files produced by WordPress.<\/p>\n<p>The previous version of this post was written for Autoptimize version 1.9.2. This version did not have the <strong>Also aggregate inline CSS<\/strong> 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 <em>aggregation<\/em>). This resulted in PageSpeed complaining about the render-blocking CSS. For this reason all such script had to be listed in the <strong>Exclude CSS from Autoptimize:<\/strong> field. All this is no longer necessary after version 2.0.0 as we simply keep <strong>Also aggregate inline CSS<\/strong> unchecked and this takes care of this problem.<\/p>\n<h2><span id=\"images\">Images<\/span><\/h2>\n<p>There are two PageSpeed requirements related to images: <em>Prioritize Visible Content<\/em> which may be triggered if you have images above the fold, and <em>Optimize Images<\/em> which may be triggered by any images.<\/p>\n<h3><span id=\"prioritize_visible_content\">Prioritize Visible Content<\/span><\/h3>\n<p>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.<\/p>\n<p>One example is the header image that most WordPress themes offer.<\/p>\n<p>You may also have an image as a substantial part of your content. For example, <a href=.>my homepage<\/a> has my picture.<\/p>\n<p>There are a few ways to deal with this:<\/p>\n<ul>\n<li>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.\n<li>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 <a href=http:\/\/www.techerator.com\/2011\/12\/how-to-embed-images-directly-into-your-html\/ >this guide for inlining<\/a> 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.)\n<li style=clear:right><img alt=\"Screenshot from Autoptimize plugin, CSS Options section. (checked) Optimize CSS Code? (checked) Generate data: URIs for images?\" src=images\/w3tc\/Autoptimize-CSS-Options-Generate-data-narrow.jpg height=136 width=256 style=float:right>You may try to use <em>Generate data<\/em> 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. <a href=images\/w3tc\/Autoptimize-CSS-Options-Generate-data.jpg>This is how this screenshot looks on a wide screen.<\/a>\n<li>You may try to rearrange the material on your page to move the image down below the fold.<\/ul>\n<h3><span id=\"update_november_19_2015_optimizing_images\">Update November 19, 2015: <a href=https:\/\/developers.google.com\/speed\/docs\/insights\/OptimizeImages>Optimizing images<\/a><\/span><\/h3>\n<p>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.<\/p>\n<p>Sometimes the savings they are concerned with, amount to just a few hundred of bytes which IMHO is ridiculous nitpicking.<\/p>\n<p>If the image file they complain about, is hosted on your website, then you may compress this file &#8211; see below &#8211; and satisfy this requirement.<\/p>\n<p>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&#8217;s permission if copyrighted).<\/p>\n<h4><span id=\"how_to_compress_images\">How to compress images<\/span><\/h4>\n<p><em>Update August 30, 2016:<\/em> 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.<\/p>\n<p>I have encountered the need to compress images of two file formats, JPEG and PNG.<\/p>\n<p>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.<\/p>\n<p>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.<\/p>\n<p>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.<\/p>\n<p>I ended up using four different on-line compressors in the following order:<\/p>\n<ol>\n<li><a href=https:\/\/compressor.io\/ >Compressor.io<\/a> compressed my image file from 1008 to 635 bytes.\n<li><a href=http:\/\/www.giftofspeed.com\/png-compressor\/ >Gift of speed<\/a> reduced the result to 602 bytes.\n<li><a href=https:\/\/tinypng.com\/ >TynyPNG<\/a> reduced the result further to 551 bytes.\n<li><a href=http:\/\/ezgif.com\/optipng>ezgif.com<\/a> reduced the result to the final 519 bytes, and the visual difference with the original was noticeable but not really significant.<\/ol>\n<p>The order of compressions was important; I attempted some other orders and the results were worse.<\/p>\n<p>PageSpeed was happy with the result.<\/p>\n<h3><span id=\"update_march_14_2016_emojis\">Update March 14, 2016: <a href=https:\/\/codex.wordpress.org\/Emoji>Emojis<\/a><\/span><\/h3>\n<p>This is a feature introduced in WordPress 4.2; however, my troubles with it started later.<\/p>\n<p>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.<\/p>\n<p>Apparently, WordPress 4.4 started displaying smilies as emojis.<\/p>\n<p>After I updated to 4.4, two of the smilies in Soshios&#8217;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.<\/p>\n<p>When I started researching this matter, I have bumped into a <a href=https:\/\/www.gavick.com\/blog\/removing-wordpress-emoji>post<\/a> that pointed out that the emojis code burdens and slows down unnecessarily all pages that do not use emojis.<\/p>\n<p>This post and <a href=https:\/\/wordpress.org\/support\/topic\/emoji-and-smiley-js-and-css-added-to-head>the WordPress.org Support discussion<\/a> suggest <a href=https:\/\/wordpress.org\/plugins\/disable-emojis\/ >Disable Emojis plugin<\/a>. 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.<\/p>\n<p>The same WordPress.org Support discussion also suggested <a href=https:\/\/wordpress.org\/plugins\/classic-smilies\/ >Classic Smilies plugin<\/a> that restored the old smilies functionality and disabled the emojis as an added bonus. This plugin works fine for me.<\/p>\n<p>In addition, the smilie images provided by this plugin, are already optimized.<\/p>\n<h2><span id=\"update_august_30_2016_advertisements\">Update August 30, 2016: Advertisements<\/span><\/h2>\n<p>Most advertisements significantly decrease your PageSpeed score.<\/p>\n<p>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.<\/p>\n<p>I have found one advertising service that is efficient and does not affect PageSpeed Score: <a href=http:\/\/frontend.sekindo.com\/ >Sekindo<\/a>. 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.<\/p>\n<p>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.<\/p>\n<p>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.<\/p>\n<p>It seems that this is a bug in the PageSpeed tool similar to the one I encountered with my home page; see <a href=#critical-css>How I identified my critical CSS<\/a> above.<\/p>\n<p>I chose to forgo advertisements on the posts affected by this problem.<\/p>\n<h2><span id=\"tips_for_using_w3_total_cache_and_autoptimize\">Tips for using W3 Total Cache and Autoptimize<\/span><\/h2>\n<h3><span id=\"close_your_edit_postpage_pages\">Close your Edit Post\/Page pages<\/span><\/h3>\n<p>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.<\/p>\n<h3 style=clear:right><span id=\"the_annoying_popup\">The annoying popup <img alt=Screenshot src=images\/w3tc\/W3TC-popup-narrow.jpg height=322 width=224 style=float:right><\/span><\/h3>\n<p>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 <a href=images\/w3tc\/W3TC-popup.jpg>screenshot<\/a>) 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 <a href=https:\/\/wordpress.org\/support\/view\/plugin-reviews\/w3-total-cache>many negative reviews<\/a> even from people who continue using this plugin.<\/p>\n<p>Well, it turns out that a simple way out of it is to click <strong>Cancel<\/strong> 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.)<\/p>\n<p>Alternatively, you may open the file <code>wp-content\/w3tc-config\/master.php<\/code> , find the line <code>'notes.support_us' =&gt; true,<\/code> and replace <code>true<\/code> by <code>false<\/code> .<\/p>\n<h3><span id=\"minifying_html\">Minifying html<\/span><\/h3>\n<p>One of the requirements of PageSpeed Insights is that your files &#8211; html, css and js &#8211; be minified, i.e., not include too many things that are not necessary for rendering your pages, such as extra spaces and comments.<\/p>\n<p>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.<\/p>\n<p>Generally, Autoptimize does quite a good job in minifying all your files and in most cases PageSpeed does not complain about this matter.<\/p>\n<p>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.<\/p>\n<p>(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.)<\/p>\n<p>When this happens, I run a minifier on my html before tranferring it into WordPress.<\/p>\n<p>I use a web-based <a href=https:\/\/kangax.github.io\/html-minifier\/ >HTML Minifier by Juriy &#8220;kangax&#8221; Zaytsev<\/a>. 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.<\/p>\n<p>Another possibility is <a href=\"http:\/\/prettydiff.com\/?m=minify\">Pretty Diff Minifier<\/a>. It works fine but still leaves out some spaces between html tags that can be removed.<\/p>\n<h2><span id=\"other_pagespeed_issue_google_analytics\">Other PageSpeed issue: Google Analytics<\/span><\/h2>\n<p><a href=http:\/\/www.google.com\/analytics\/ >Google Analytics<\/a> is an extremely popular free service that analyses your site traffic.<\/p>\n<p><a href=http:\/\/stackoverflow.com\/questions\/25480199\/leverage-browser-caching-external-files>It comes with a price of one point off your PageSpeed grade for not including browser cache header.<\/a> (Yes, Google is short on this header and punishes us for it!)<\/p>\n<p>This is still true in April 2015.<\/p>\n<p>You can resolve this by hosting Google Analytics on your site as explained <a href=http:\/\/stackoverflow.com\/questions\/25480199\/leverage-browser-caching-external-files>in the same post<\/a> or <a href=http:\/\/diywpblog.com\/leverage-browser-cache-optimize-google-analytics\/ >here<\/a>.<\/p>\n<p>I have removed Google Analytics from my site <a href=piwik-vs-google-analytics-comparison-reliable.html>for reasons explained here<\/a>.<\/p>\n<h2><span id=\"update_may_28_2015_gravatar_images_in_comments\">Update May 28, 2015: Gravatar images in comments<\/span><\/h2>\n<p><a href=http:\/\/en.gravatar.com\/ ><em>Gravatar<\/em> stands for Globally Recognizable Avatar<\/a>, 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.<\/p>\n<p>From the site owner&#8217;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.<\/p>\n<p>(They actually require 5 minutes caching header which IMHO is really silly to bother with!)<\/p>\n<p>I discovered this when Cibele left a <em>Thank you<\/em> comment at this page.<\/p>\n<p>I tried to contact Gravatar team and ask them to start supplying the header.<\/p>\n<p>Unforturnately, <a href=https:\/\/en.gravatar.com\/support\/contact-us\/ >Gravatar support is closed at the moment<\/a>. 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.<\/p>\n<p>In the meantime, I have disabled avatar display on my site. (This is done on Dashboard &rarr; Settings &rarr; Discussion page, at the very bottom: uncheck <strong>Show Avatars<\/strong>.)<\/p>\n<p>This resolves the PageSpeed issue but I would really prefer to see the avatars of my visitors!<\/p>\n<p>Sorry, Cibele, and thanks for leaving this comment that allowed me to find this out!<\/p>\n<nav>\n<p><strong>Navigation:<\/strong><\/p>\n<ul style=list-style-type:none>\n<li><a href=configure-w3-total-cache-plugin-settings-for-pagespeed-100-grade-part-1.html>Get PageSpeed 100 by using W3 Total Cache and Autoptimize, Part 1<\/a>\n<li><a href=configure-w3-total-cache-plugin-settings-for-pagespeed-100-grade-part-2-general.html>Get PageSpeed 100 by using W3 Total Cache and Autoptimize, Part 2: General Settings<\/a>\n<li><a href=configure-w3-total-cache-plugin-settings-for-pagespeed-100-grade-part-3-page-cache.html>Get PageSpeed 100 by using W3 Total Cache and Autoptimize, Part 3: Page Cache<\/a>\n<li><em>Previous:<\/em> <a href=configure-w3-total-cache-plugin-settings-for-pagespeed-100-grade-part-4-browser-cache.html>Get PageSpeed 100 by using W3 Total Cache and Autoptimize, Part 4: Browser Cache<\/a><\/ul>\n<\/nav>\n","protected":false},"excerpt":{"rendered":"<p>Other parts: Get PageSpeed 100 by using W3 Total Cache and Autoptimize, Part 1 Get PageSpeed 100 by using W3 Total Cache and Autoptimize, Part 2: General Settings Get PageSpeed 100 by using W3 Total Cache and Autoptimize, Part 3: Page Cache Previous: Get PageSpeed 100 by using W3 Total Cache and Autoptimize, Part 4: [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/baruchyoussin.com\/en\/wp-json\/wp\/v2\/posts\/341"}],"collection":[{"href":"https:\/\/baruchyoussin.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/baruchyoussin.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/baruchyoussin.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/baruchyoussin.com\/en\/wp-json\/wp\/v2\/comments?post=341"}],"version-history":[{"count":11,"href":"https:\/\/baruchyoussin.com\/en\/wp-json\/wp\/v2\/posts\/341\/revisions"}],"predecessor-version":[{"id":389,"href":"https:\/\/baruchyoussin.com\/en\/wp-json\/wp\/v2\/posts\/341\/revisions\/389"}],"wp:attachment":[{"href":"https:\/\/baruchyoussin.com\/en\/wp-json\/wp\/v2\/media?parent=341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/baruchyoussin.com\/en\/wp-json\/wp\/v2\/categories?post=341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/baruchyoussin.com\/en\/wp-json\/wp\/v2\/tags?post=341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}