🔥 🥳 Get your Wordpress Pagespeed optimized today for $99 🔥 🥳 Conditions apply.

How to fix preload key requests from Pagespeed on WordPress

Last updated on October 11, 2021 | By

To preload key requests from WordPress for Pagespeed, you can either use a free plugin, embed code on funtions.php, or use a paid plugin.

How to preload WordPress key requests

This method requires coding knowledge

To preload fonts or files only when needed, add the following code on functions.php, which creates a preload tag. Paste the file’s URL from Pagespeed on the href. It will be something like this for a CSS file that needs preload on the homepage:

// preload css only on homepage
function wpb_hook_javascript() {
	if (current_user_can( 'update_core' )) {
            return;
        } else {
            // Check for the page you want to target
    if ( is_front_page() ) {
    ?>
        <link rel="preload" href="style.css" as="style">
    <?php
}
}
}
add_action('wp_head', 'wpb_hook_javascript', 99);

How the code looks on functions.php

image 2

Every time you need a file to preload, change the is_front_page to is_page, and add something that identifies the page:

// When Page 42 (ID) is being displayed.
is_page( 42 );
 
// When the Page with a post_title of "Contact" is being displayed.
is_page( 'Contact' );
 
// When the Page with a post_name (slug) of "about-me" is being displayed.
is_page( 'about-me' );

Code will look something like this for preload a CSS file on the page /about:

// preload css only on page about
function wpb_hook_javascript() {
	if (current_user_can( 'update_core' )) {
            return;
        } else {
            // Check for the page you want to target
    if ( is_page('about') ) {
    ?>
        <link rel="preload" href="style.css" as="style">
    <?php
}
}
}
add_action('wp_head', 'wpb_hook_javascript', 99);

How to preload WordPress key requests with a free plugin

This method preload the files on every page, even when it’s not necessary, consider the next guide to preload only when necessary.

Download Insert Headers and Footers by WPBeginner. Create a preload tag and paste the files URL’s from Pagespeed; will be something like this for a font file:

<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>

And like this for a CSS file:

<link rel="preload" href="style.css" as="style">

How the code looks on the Head and Footers plugin.

image 1

How to preload wordpress key requests with Wp Rocket

Insert the desired local font on the preload fonts tab on Wp Rocket

file iVb0XJXZyu

How to add rel preload in WordPress

Download and install Insert Headers and Footers by WPBeginner. Create a preload tag and paste the files URL’s from Pagespeed; will be something like this for a font file

<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>

Get a Core Web Vitals Boost

Send us your request!

Leave a Comment