In the Lighthouse or Google Page Speed Insights showing an issue with your website. preload key, request consider using to prioritize fetching resources that are currently requested alter in page load Preload.
If you’ve encountered issues in Lighthouse or Google Page Speed Insights related to preload keys, consider using the following code snippets in the <head> section of your WordPress or HTML site. Preloading resources can significantly improve the prioritization of fetching required assets during page load.
Preloading WOFF (Web Open Font Format) Fonts:
For WOFF font files, use the following code:
<link rel='preload' href="yourFrontLink.woff" as="font" type="font/woff" crossorigin>
Replace “yourFrontLink.woff” with the actual link to your WOFF font file. This step enhances the loading efficiency of your fonts.
Preloading WOFF2 Fonts:
Similarly, for WOFF2 font files, use this code:
<link rel='preload' href="yourFrontLink.woff2" as="font" type="font/woff2" crossorigin>
Replace “yourFrontLink.woff2” with the correct link to your WOFF2 font file. This helps in optimizing the loading process for WOFF2 fonts.
Implementing in WordPress:
If your website is powered by WordPress, you can effortlessly add these codes by following these steps:
- Login to Your WordPress Dashboard:
- Navigate to
yoursite.com/wp-admin.
- Navigate to
- Access Theme Editor:
- In the dashboard, go to
Appearance > Theme Editor.
- In the dashboard, go to
- Select Your Theme:
- Choose your active theme from the right-hand side if it’s not already selected.
- Edit header.php:
- Locate and select the
header.phpfile from the list of theme files.
- Locate and select the
- Insert Code Snippets:
- Insert the respective code snippets for WOFF and WOFF2 fonts in the
<head>section.
- Insert the respective code snippets for WOFF and WOFF2 fonts in the
- Save Changes:
- Click on “Update File” to save the changes.
Verification:
To ensure that the preload keys are working as expected, run your website through Lighthouse or Google Page Speed Insights again. The previously reported issues should be addressed, contributing to an optimized and faster-loading website.
By incorporating these preload key recommendations, you’re taking a proactive step towards improving your website’s performance.
