Skip links

SOLVED How To Preload Key Requests

Time to Complete: Approx. 6mins

If you have checked your pagespeed recently using GTmetrix or Google Pagespeed insights you may notice an opportunity for page speed improvement by preloading key requests. So let’s show you how it’s done.

Step 1 – PageSpeed Analyzer

Head over to Google’s PageSpeed Insights and run your website through the URL analyzer. While it’s analyzing we’ll work on step 2.

Step 2. – Place Preloads in Header

While your URL is being analyzed, head over to your WordPress dashboard and navigate to Appearance > Theme Editor. Now, within the theme editor, there are your theme files down the right-hand side. Click on the theme file that says header.php.

Now you are editing your header.php find your <head> tag (usually around line 15). You want to copy the following piece of code and paste it in your head – below the <meta charset> and <meta name>.

<link rel="preload" as="font" type="font/woff2" crossorigin href="/" onload="this.rel='stylesheet'"/>

It should look like the below image. Don’t hit save yet.

How your header.php should currently look

Step 3 – Copy Preload Links

Head back to Google PageSpeed insights – It should be finished analyzing your site now. Google will notify you of a couple of links to preload, under the opportunity title “Preload key requests”.

What you want to do is right-click these links and select Copy Link Address

Step 3 – Pasting Preload Links

Head back to your WordPress dashboard, you will be pasting the link you just copied within the href=”” of the code you pasted in the header earlier. You will then want to strip your domain name from the link.

Example Below

Notice the domain name has been removed so the URL begins at /wp-content.

<link rel="preload" as="font" type="font/woff2" crossorigin href="/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-solid-900.woff2" onload="this.rel='stylesheet'"/>

Hit save!

Repeat the above process above to preload more requests.

Below is a working example.