Preload Key Requests
What does Preload Key Requests mean?
According to PageSpeed Insights, the assets that are loaded from another file and do not contain the attribute rel=”preload” will be flagged by this recommendation and increase the final page load time. The most common are font files called from stylesheets files. Usually these fonts will be discovered by the browser later in the process - rel=”preload” tells the browser to start downloading the file sooner.
How WP Rocket can help
With a feature called Preload Fonts which you can find under Dashboard → Settings → WP Rocket → Preload → Preload Fonts
How to preload a font?
Preloading a font using our feature is basically a copy and paste process:
- Find and identify the PageSpeed Recommendation “Preload Key Requests”
Make sure that the file flagged is a font with extensions otf, ttf, svg, woff, woff2.
- Check if it’s coming from your domain (WP Rocket can’t preload external files coming from other domains).
- Right-click on each font and copy this file address.
- Paste it in the Fonts to preload field.
- Click the “save changes” button.
You should have something like:
How can WP Rocket help if it’s a CSS file?
Optimize CSS Delivery will automatically add preload to CSS files.
If that option is activated and a CSS file is still being flagged it most likely means that it has been loaded with @import, so it won’t be processed by WP Rocket.
There are 2 possible solutions:
1. @import is not a best practice for loading CSS files. Instead, enqueue the CSS file directly.
2. Alternatively, add the preload directive manually:
- Install the Insert Headers and Footers plugin
- Add the following code to the head, replacing the example URL with the one specified by Google:
<link rel="preload" as="style" href="https://example.org/style.css">
- Clear the WP Rocket cache
- If you are also using Minify/Combine CSS, exclude the file from that option.