In this article, I will guide you on how to fix pagespeed preload key requests with Fonts error from Google page speed insights for your WordPress website. So let’s fix this and improve the speed of your site.

What is the Preload Key Request?

As per W3.org, Preload is a keyword that creates an external resource link (preload link) that is used to declare a resource and its fetch properties. <link rel=”preload“> tells the browser to download or to preload and cache a resource such as preload fonts @font-face, javascript, images, etc on loading a webpage.

Why is Preload Key Requests error is displayed for Fonts?

Preload key request error is displayed for fonts as no <link rel=”preload“> is added to the font and browser takes time to render this resource which decreases your website speed and while you check for your website as I tested in Google page speed Insights you can see the error.

How to Fix Preload Key Requests with Fonts?

There are 2 ways to fix Preload Key Requests with Fonts in WordPress

1. Adding preload markup manually.

<link rel=”preload” href=”Font Url” as=”font” crossorigin=”anonymous”>

• Check for URL in your pagespeed insights report to get the URL of font which is causing this Issue.
• Check Copy and paste the URL in notepad and replace the URL link in the above Tag. For example //www.abc.com/wp-content/theme/fonts/fontawesome-webfont.woff2. Just replace the URL “<link rel=”preload” href=”/wp-content/theme/fonts/fontawesome-webfont.woff2” as=”font” crossorigin=”anonymous”>”

• Once done just add this Link Tag to the header of your WordPress theme. For this visit, you WordPress folder through FTP or Hosting Cpanel and inside navigate to ->wp-content/themes/twenty-theme/header and add this markup link tag to Header.

• Now check and you will find your issue is solved.
• That’s it you are DONE!!

2. Using the WordPress plugin to add preload key to Fonts.

If the above method doesn’t work for you then you can achieve it using WordPress plugin. Install the plugin named as “Asset CleanUp“. Once Installed follow these below steps.

• Install and Activate Asset CleanUp plugin in WordPress.
• Once Activated navigate to Setting option of Asset CleanUp plugin page from dashboard.
• Navigate to the “Local Fonts” option on the setting page.
• Add your fonts URL as displayed below.

• Once added save and check your website on page speed insights.
• That’s it you are DONE!! You will find your issue is solved.

Also Checkout: How to Create a Custom Theme in WordPress

Conclusion:

I hope this article helped you fix the preload key request issue. Solving this issue will definitely help you improve your pagespeed. Do let me know your queries in the comment box. I will be writing more articles to help you out.

Keep Sharing & Keep Visiting!