It’s 2020 and even Microsoft has given up on fighting Google for web dominance. Keeping your site secure, and fast is critical to staying in Google’s good graces. Many developers may be running audits with Google Lighthouse, but unsure of how to fix specific issues.
Lighthouse is available in every version of chrome and can be found in the developer console. (F12)
One of the complaints negatively hurting your speed score may be:
“Consider using `<link rel=preload>` to prioritize fetching resources that are currently requested later in page load.”
In this example I will show you how to fix this issue for the theme Customizr. The steps used here are not exclusive to this theme, you can easily apply it to any scenario.
- Run a lighthouse audit in the developer console
- Scroll through the list of red opportunities and expand “Preload key requests”
- This will show you a list of scripts or style sheets that are not properly optimized
- Right click on each item and open it in a new tab, make a note of the exact file path which should be displayed in the browser URL
- In your WordPress backend navigate to Appearance > Customize > Advanced > Additional Scripts
- For non-pro Customizr users you’ll need to manually add code to the top of your themes header.php file or use a plugin to inject the code.
- Append the template below and add your asset to the href section
# the official google documentation page for this: https://developers.google.com/web/tools/lighthouse/audits/preload #use the below template for style sheets <link rel="preload" href="styles.css" as="style"> #use the below template for scripts <link rel="preload" href="ui.js" as="script"> #what my appended template for this theme looked like # NOTE you will need the exact file path for the script or stylesheet, you should have this from step 4 <link rel="preload" href="/wp-content/themes/customizr-pro/assets/front/css/flickity.min.css" as="style"> <link rel="preload" href="/wp-content/themes/customizr-pro/assets/front/css/magnific-popup.min.css" as="style">
