Remember that LCP and FCP account for 25% and 10% in Lighthouse v8, and both weights contribute to the overall Lighthouse performance score<\/a>.<\/p> Preloading key requests also improves load time and perceived performance<\/a>. <\/p> Here\u2019s why preloading key requests is essential not only for SEO and performance reasons but also for providing the best user experience.<\/strong><\/p> How to Identify the Critical Files You Should Preload<\/p> Lighthouse is the easiest and most effective way to identify the key requests to preload. After testing your URL\u2019s performance in the performance tool, check the Opportunities section and see if you find a \u201cPreload key request\u201d recommendation like this one:<\/p> If you find such a recommendation, you\u2019ll also get the files that you should preload. In this case, the file to preload would be: \/main.css. As for the fonts to preload, the files have the following extensions: otf, ttf, svg, woff, woff2.<\/p> Please note that you could also run the same test via GTmetrix. However, you may get different results and recommendations according to the Lighthouse version used by the tool. Google released Lighthouse v8, which is up and running in PageSpeed Insights. As of September 2021, it\u2019s the latest version and the one you should look at.<\/p> You can preload key requests and address the PSI recommendation both with and without plugins.<\/p> If you want to implement the preload attribute yourself, you should identify the critical assets flagged by PSI and add the link rel =\u201cpreload\u201d to these files. Remember to include the files at the head of the HTML page. Here\u2019s an example of the \u201cpreload\u201d attribute:<\/p> <link rel=”preload” as=”type-of-content” href=”critical-example.js”><\/p> You can add several types of content, from images to scripts, videos, and much more. You can take a look at the full list here<\/a>.<\/p> On the other hand, you may want to use a plugin. Several ones may help you preload different types of files:<\/p> As explained above, fonts are the main files that need to be preloaded. In fact, targetting specific fonts to preload (the one needed above the fold or just below it) is usually more effective than overthinking all the details and adding more complexity, especially if controlling how fonts are declared is not possible.<\/p> You should avoid preloading multiple formats for the same font – just preload one font format only. In general, you should not preload everything, otherwise, you\u2019ll decrease your site\u2019s performance.<\/p> If you\u2019re looking for the fastest way to preload fonts, you should install WP Rocket<\/a> and give an instant boost to your site performance!<\/p> WP Rocket allows you to preload fonts coming from your domain quickly. In the Preload tab, you\u2019ll find the option to include the fonts to preload. Simple as that! <\/p> What\u2019s more, WP Rocket has another powerful feature, included in the File Optimization tab: Optimize CSS Delivery<\/strong>. The Optimize CSS delivery feature allows you to eliminate render-blocking CSS<\/a> on your site and make your site faster. You can choose between two options: Remove Unused CSS and Load CSS Asynchronously.<\/p> From the technical perspective, Load CSS Asynchronously will inject the critical CSS<\/a> on the page and preload all noncritical CSS files. On the other hand, Remove Unused CSS will inject all the used CSS at the top of the page, so, there is no CSS file to preload to start with. That\u2019s why we recommend that you enable the Remove unused CSS option. If it doesn\u2019t work for you, you can then enable Load CSS asynchronously.<\/p> \ud83d\ude80 In short, WP Rocket is the easiest way to preload fonts and CSS files and give a boost to your site.\u00a0<\/p>![\"\"](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/09\/preload-key-requests-google.png\")
<\/figcaption><\/figure>How to Fix Preload Key Requests <\/h2>
How to Fix Preload Key Requests with WP Rocket<\/h2>
![\"\"](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/06\/Preload-Fonts.png\")
<\/figcaption><\/figure>![\"\"](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/10\/Remove-Unused-CSS-option-Source-WP-Rocket-1.png\")
<\/figcaption><\/figure>