Performance optimization is undoubtedly among the most annoying tasks for a web developer (at least for me…), but it’s nonetheless a crucial aspect to ensure a seamless experience to your users.
As a SEO consultant I know just how important speed is in the eyes of Google – in fact, it’s a confirmed ranking factor, which means that in order to grow our organic traffic we must keep our web pages as fast as possible. Like, really fast. Google recommends a Time To First Byte (TTFB) below 100ms.
That’s why Google PageSpeed Insights exists. I’m not a fan of this tool for a number of reasons (I prefer GTMetrix, Pingdom or the Holy Grail Webpagetest), but let’s face it: if you want to rank higher on Google, you need a high PageSpeed score, especially on mobile. There is no way around this ordeal. We must stick to Google’s tool for SEO purposes even when its metrics and scores don’t seem to make much sense.
The “Preload Key Requests” suggestion
The Preload Key Requests suggestion from PageSpeed Insights is among the metrics that don’t make a lot of sense to me: in short, it looks at the chain of your critical requests and flags every file that is called from another file, thus (according to Google) increasing the final page load time. The most common occurence are font files called from stylesheets.
Google’s official documentation recommends the following fix:
Declare preload links in your HTML to instruct the browser to download key resources as soon as possible.
Which means that you have to link every single resource from your HTML head, with the rel=”preload” attribute.
<link rel="preload" href="styles.css" as="style"> <link rel="preload" href="ui.js" as="script">
I personally don’t see much value in increasing the size of your HTML by replicating what’s already done by stylesheets but, as I said, we must do as Google commands.
The issue with icon fonts
It’s not always easy to find and preload files, especially if you’re using a CMS like WordPress where you risk messing up your templates.
Luckily, for most fonts you can use the CSS font-display:swap rule as a workaround. But this is not the case for icon fonts.
If you use icon font libraries such as icomoon or Font Awesome on your website, the swap CSS rule is not going to work. This is because icons can’t really be swapped with fallback text, and they have to be visible from the get go. Even if the fallback text for an icon font renders, nobody knows what you might see.
Lots of WordPress themes and plugins use these icon libraries, and if you don’t want to keep seeing the “Preload Key Requests” suggestion on PSI you can either:
- get rid of the icons altogether (not recommended, especially for plugins);
- convert your icons to SVG images (very tedious, risky and annoying process);
- follow Google’s recommendation and preload the icon library in your HTML header.
I’m not a fan of creating a header.php file in my child theme just to load icon fonts, and I find that enqueuing fonts in the theme’s functions.php (which is WordPress’ proper way to enqueue fonts) is unnecessarily complicated.
The easiest, cleanest and quickest solution to preload our icon fonts is server side, either via htaccess (if your server is either Apache or LSWS) or through an nginx module.
We’re going to use the LinkHeader htaccess rule to achieve the desired result, making sure to add the rel=preload attribute recommended by Google. In order to avoid browser warnings, let’s also add the crossorigin attribute.
- Link(s) to your icon font(s): you can easily get the links from PageSpeed’s report page. Just right click on the icon font URL and select “Copy link address”.
- Access to your .htaccess file: you can use an FTP or, if you’re on WordPress, I recommend installing the Yoast SEO plugin and editing the htaccess from Tools > File editor.
Open your .htaccess file and paste the following code at the bottom:
Header add Link "</wp-content/themes/Avada/includes/lib/assets/fonts/icomoon/icomoon.woff>; rel=preload; as=font; crossorigin"
Make sure to replace “/wp-content/themes/Avada/includes/lib/assets/fonts/icomoon/icomoon.woff” with your font link. When you paste the link, delete the first part of the URL (in WordPress, it’s the part before “/wp-content”).
Repeat the same process for every font you need to preload, one font per line.
My final result:
Header add Link "</wp-content/themes/Avada/includes/lib/assets/fonts/icomoon/icomoon.woff>; rel=preload; as=font; crossorigin" Header add Link "</wp-content/themes/Avada/includes/lib/assets/fonts/fontawesome/webfonts/fa-solid-900.woff2>; rel=preload; as=font; crossorigin"
For nginx servers, you can use the ngx_http_headers_module module.
add_header Link "</wp-content/themes/Avada/includes/lib/assets/fonts/icomoon/icomoon.woff>; rel=preload; as=font; crossorigin";
That’s it! Make sure to purge all your caches (client and server side) and re-run PageSpeed. The “Preload Key Requests” suggestion should’ve disappeared, and (hopefully) your score should be a bit higher now.
If you found this article useful, consider sharing it. You can buy me a coffee if you’d like to support this blog.