How can I fix PageSpeed warnings?<\/em><\/p>
After testing your WordPress site’s performance,<\/a> you’ll get a PageSpeed Insights report including a series of recommendations and warnings, divided into two main categories:<\/p> The Opportunities<\/em> section focuses on performance metrics that could improve page loading time. <\/p> The Diagnostics<\/em> section, on the other hand, focuses more on the best practices for web development that should be implemented into the analyzed page.<\/p> In this guide, we\u2019re going to walk you through the most common PageSpeed Insights recommendations: we\u2019ll explain them in plain English and then we\u2019ll see how to fix them. Bear in mind that the tool addresses recommendations about improving metrics such as the Largest Contentful Paint<\/a>, the Cumulative Layout Shift<\/a>, and the First Input Delay<\/a>. <\/p> Let’s get started!<\/p> With the Opportunities<\/em> section, PageSpeed Insights wants to give you advice on the performance metrics that could help your page load faster. If you want to score 100% on Google\u2019s Page Speed test,<\/a> you should pay attention to these recommendations.<\/p> Every recommendation is accompanied by the estimated time savings that you could gain by implementing the suggested fix.<\/p> Let\u2019s see which are the most common PSI recommendations in this section and how to approach them.<\/p> With this recommendation, Google wants you to deliver critical CSS\/JB inline or defer JS and CSS files that interfere with loading the above the fold content<\/em> of your webpages. <\/p> Above the fold content <\/em>is the content your users see as soon as they open the page, before they start scrolling.<\/p> To understand what PageSpeed means when it asks you to eliminate render-blocking resources (be it a script or a stylesheet) we have to understand what a render-blocking resource is.<\/p> From WP Rocket\u2019s documentation<\/a>:<\/p> Before the browser can display a web page, it has to render its HTML. While some CSS and JS resources have to be downloaded and processed before displaying anything on the page (they are the so called critical resources<\/em>), some others can be postponed and loaded in a second time without any issue nor user experience loss.<\/p> Deferring the loading of non-critical resources, and make them load after the browser has rendered the page, is a good practice to save a few (milli)seconds of loading time.<\/p> Manually approaching this tweak might be a bit tricky, since it involves digging and editing your code. If you prefer to proceed programmatically, here\u2019s an example of how to remove render-blocking JavaScript<\/a> and one about eliminating render-blocking CSS<\/a>. <\/p> The easiest solution is to use a plugin like WP Rocket!<\/p> Our plugin includes two options that will help to fix PSI recommendation:<\/p> It\u2019s worth noticing that, sometimes, it can be very difficult (if not impossible) to completely eliminate all render-blocking CSS and JS<\/a>. The possibility to achieve this result will highly depend on how the theme and plugins you\u2019re using on your WordPress site are coded. <\/p> If you didn\u2019t code your website from scratch yourself, and you\u2019re instead relying on a theme and plugins other developers wrote, you simply have to accept that you can\u2019t have 100% control over them. <\/p> It\u2019s ok to not defer ALL your CSS and JS render-blocking resources, since sometimes this process can lead to a broken page (and that\u2019s way worse than a \u201cred score\u201c by Google PageSpeed Insight!).<\/p> Removing the unused rules from your stylesheets reduce unnecessary burden from your site. <\/p> This is what we call unused CSS<\/em>. It\u2019s very difficult to automate this task with precision and even more to remove unused CSS by hand. <\/p> If your server is responding slowly to users\u2019 requests, the overall user experience of your site will be affected.<\/p> As we already mentioned in our guide about optimizing WordPress page speed<\/a>, a fast server is a fundamental element of website performance. <\/p> When Google PageSpeed asks you to reduce server response time, it\u2019s basically referring to the indicator known as Time to First Byte<\/em>.<\/p> We already addressed this topic with our guide: How to Reduce Time to First Byte and Server Response Times!<\/a><\/p> These two recommendations are related to one of the most popular code optimization techniques: minification<\/strong>.<\/p> Minification is the technique that makes HTML pages, CSS, and JS scripts less readable (for humans, of course) but faster to load!<\/a><\/p> This method removes all unnecessary characters, markups, spacing and comments that developers tend to add to web pages and script files.<\/p> Developers in fact may need comments, markup and spacing to make pages and scripts more readable during their development process. <\/p> But when their masterpiece is over and the website is online, all those additional elements become redundant: they increase network traffic, and burden the bandwidth of network requests.<\/p> That\u2019s when minification comes handy: it makes the code leaner, so the final user will receive it faster and the overall load time will improve.<\/p> There <\/strong>are two ways to minify your CSS and JavaScript:<\/p> To know how you can manually minify your files, have a look at our guide: Best CSS and JS Minification Tools<\/a>.<\/p> To automatically take care of minification, and forget manual tweaks, you can use a WordPress plugin.<\/p> There are many efficient minification plugins on the market, but, again, WP Rocket could be the perfect solution for you<\/strong>! ?<\/p> Our plugin includes both CSS and JS minification, as well as CSS and JS combination:<\/p> Minify and Combine CSS Files<\/em><\/strong> Minify and Combine JS Files<\/em><\/strong> As already mentioned for the note about eliminating render-blocking resources, minification and combination are advanced features that can sometimes<\/em> break the layout of your pages. Check out our documentation to understand how to fix potential issues related to minification\/combination<\/a>.<\/p> 301 redirects are indeed crucial to notify your browser that a HTTP request is coming from a different source location and avoid 404 errors<\/a>; but when redirects pile up, they tend to slow down your pages.<\/p> PageSpeed Insights considers redirects as a problem when a page contains more than two of them.<\/p> The ideal solution would be, of course, to update the original links to the redirected resources.<\/p> With this recommendation, PageSpeed Insights is asking you to enable GZIP compression.<\/p> As Google explains:<\/a><\/p> Text compression minimizes the byte size of network responses that include text content. Less bytes downloaded means faster page loads.<\/em><\/p><\/blockquote> GZIP compression is a very popular and effective method to speed up your WordPress site because it reduces the total size of the pages and improves the time to first paint<\/a>.<\/p> Everything you need to know about implementing GZIP compression on your WordPress site, is included in our guide!<\/a><\/p> This PageSpeed warning appears every time you have third-party content on your website (e.g fonts loaded from Google, or a video from YouTube), and you\u2019re not prefetching their correspondent DNS resolutions.<\/p> Here\u2019s a definition from our guide about the differences between preload, prefetch, and preconnect<\/a>:<\/p> With prefetch, you can tell the browser to fetch resources you think the user might need later as part of a future navigation or interaction, if the user takes the action you\u2019re expecting. These resources will then be fetched at the lowest priority in the browser, when the current page is done loading and there\u2019s bandwidth available.<\/em><\/p><\/blockquote> In particular, with DNS prefetching you can tell the browser to perform DNS lookups on a page while the users are browsing it: when the external resources get requested, the DNS resolution would have already been processed, reducing the latency. <\/p> Prefetching DNS requests can give your loading time a minor boost, and you can easily apply it (and make PageSpeed happy) with WP Rocket:<\/p> This warning refers to the Critical Rendering Path (CRP) optimization strategy<\/a>. In this way, the browser can load a page faster.<\/p> To fix this PSI recommendation, you should declare preload links in your HTML, so the browser knows that it has to download critical resources as soon as possible.<\/p> WP Rocket allows you to take care of this warning for CSS files only: by enabling the Optimize CSS Delivery option, WP Rocket adds the rel=”preload” <\/em>attribute to CSS files.<\/p> More info on how WP Rocket manages critical CSS, here<\/a>.<\/p> Offscreen images are those that don\u2019t appear when the user opens a page. They are the so-called below-the-fold images.<\/p> Since users can\u2019t see them when they load a page, there\u2019s no point in downloading them as part of the loading process.<\/p> With this recommendation, PageSpeed is asking you to defer the loading of offscreen images at a later stage, namely when the user scrolls the page and requests the below-the-fold content.<\/p> To defer offscreen images<\/a>, you can LazyLoad them<\/strong>.<\/p> LazyLoad is a technique that allows you to defer image loading (to know more about LazyLoad on WordPress<\/a> and how to apply it to your images, read our guide). If you opt for this second option, you have two great alternatives:<\/p> By choosing one of the two, PageSpeed Insights will be satisfied and it should fix the warning about offscreen images not deferred.<\/p> Just keep in mind that, as far as WP Rocket’s LazyLoad is concerned, not all images can be lazyloaded at the moment, e.g. background images that are loaded from stylesheets. Mastering the art of image optimization is something that you can easily learn. To properly size and optimize your images, you should follow a few steps that we extensively described in our guide on how to compress your images and reduce their file size<\/a>.<\/p> Image encoding is the process of saving images in a more efficient and compressed format. To take care of your image optimization strategy with a unique and efficient tool, you can use our free tool Imagify<\/a>. It will help you to work on your files and fix the majority of PageSpeed warnings concerning images.<\/p> With this recommendation, PageSpeed is asking you to use more modern image formats, like JPEG 2000<\/strong>, JPEG XR<\/strong> and WebP<\/strong><\/a>.<\/p> These image formats are superior to their \u201colder\u201d siblings, JPEG and PNG images, in terms of quality and compression features: they are able to load faster and consume less mobile data.<\/p> Our image optimization plugin Imagify<\/a> is able to convert images to WebP formats, so don\u2019t hesitate to take advantage of it! PageSpeed Insights recommendations: Opportunities<\/h2>
![\"Opportunities](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Opportunities-tab-PageSpeed-Insights-1.png\")
Eliminate Render-Blocking Resources<\/h3>
During this process, whenever the browser encounters an element that references a script, or stylesheet, it has to stop, request the file, wait for it to download from the server, and execute it before it finally can continue parsing the HTML.
With most WordPress themes and plugins loading not only one, but multiple CSS and\/or JavaScript files, this process can delay the time to first render of the page quite significantly.<\/em>
<\/p><\/blockquote>So, how to defer the loading of render-blocking JS\/CSS?<\/strong><\/h4>
Remove Unused CSS<\/h3>
For example, think about the stylesheets that might be needed after the page is loaded, i.e. the CSS of a modal window appearing only after clicking a specific button.
Another typical case of unused CSS is when you\u2019re using pre-built WordPress themes<\/a> and plugins: they typically contain more code than is necessary for each page because the author cannot predict how the user will build their site. <\/p>So, how to remove unused CSS?<\/strong><\/h4>
Chris Coyer, author of CSS Tricks, explains all the reasons for this<\/a>.
With WP Rocket, you can use the Optimize CSS Delivery<\/em> option which defers the loading of CSS, but our plugin can’t remove the unused parts. What’s more, from WP Rocket 3.9 you can remove unused CSS<\/a> directly:<\/p>![\"\"](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/06\/remove-unused-CSS-WP-Rocket-1.png\")
Reduce Server Response Time (TTFB)<\/h3>
Minify CSS and Minify JavaScript<\/h3>
So, how can you minify CSS and JS files?<\/strong><\/h4>
<\/p>![\"Minify](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/css-files-optimization.png\")
<\/figure>
<\/p>![\"Minify](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/javascript-files-optimization.png\")
<\/figure>
It always depends on the code of the theme and other plugins you\u2019re using: some JS or CSS files might be incompatible with minification, so you should always keep your eyes open when you implement this technique.<\/p>Multiple Page Redirects<\/h3>
Enable Text Compression<\/h3>
Preconnect to Required Origins<\/h3>
What Is DNS Prefetching?<\/strong><\/h4>
![\"How](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/prefetch-DNS-requests-1024x430.png\")
<\/figure>Preload Key Requests<\/a><\/h3>
CRP is useful to prioritize some resources before others and decide their loading order. <\/p>![\"\"](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/03\/optimize-css-delivery.png\")
<\/figure><\/div>Defer Offscreen Images<\/h3>
You can manually lazyload your image files, or use a plugin instead.<\/p>![\"Lazy](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/03\/LazyLoad-Plugin.png\")
<\/figure><\/div>![\"LazyLoad](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/lazyload-settings-by-wprocket.png\")
<\/figure>
To learn where this exceptions apply, have a look at our documentation<\/a>.<\/p>Properly Size Images<\/h3>
It will allow you to gain a huge improvement in page speed, and Google PageSpeed will definitely notice it rewarding you for this!<\/p>Efficiently Encode Images and Optimize Images<\/h3>
Optimizing images is the set of measures required to make your images load faster, such as:<\/p>Serve Images in Next-Gen Format<\/h3>
WP Rocket is also going to provide WebP support very soon<\/strong> (it will be added to one of our next major versions).<\/p>