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.
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.
