News & Guides

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.

preload key requests
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

preload key requests

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.

preload key requests

This Week's Special
triangle

If you are looking for the absolute best website hosting provider we strongly suggest hosting your website with Siteground. We can assist with the website migration and you can receive a HUGE DISCOUNT here.

#1 Wordpress Theme
triangle

Are you in the market for a new Wordpress theme? The best Wordpress theme on the planet is WP Astra. This fully customizable theme is perfect for both developers and novice users and functions with Elementor and Beaver builder. Learn more.

Wordpress Support
triangle

If you require quick assistance from a skilled WordPress expert send us an enquiry,

Please leave a message and i'll get back to you within the next hour or so.