Core Web Vitals Cheatsheet

With the Core Web Vitals update fast approaching (this has now been pushed back to June from May, see here), the SEO and web development team have been working hard analysing websites and researching ways to help websites meet the largest contentful paint, first input delay and cumulative layout shift requirements for the update.

Focusing on the WordPress CMS, below are a number of quick tips that can help you on your way to meeting the scores needed for the Core Web Vitals update, the following work in tandem with current performance plugin usage (minifying HTML, CSS & JavaScript).

DNS Prefetch

DNS prefetching helps to reduce latency for external resources on a website. This includes Google Tag Manager, Google Analytics, Facebook Pixels and other tracking scripts that may be in use on your website. DNS prefetch resolves the DNS of external resources before they are requested which means when the external resource is loaded, a DNS lookup isn’t needed.

Below are the most common DNS prefetch requests on WordPress websites, the following code should be added in the header.php theme file above the <?php wp_head(); ?> line of code:

<link rel=’dns-prefetch’ href=’//fonts.googleapis.com’ />
<link rel=’dns-prefetch’ href=’//fonts.gstatic.com’ />
<link rel=’dns-prefetch’ href=’//ajax.googleapis.com’ />
<link rel=’dns-prefetch’ href=’//apis.google.com’ />
<link rel=’dns-prefetch’ href=’//google-analytics.com’ />
<link rel=’dns-prefetch’ href=’//www.google-analytics.com’ />
<link rel=’dns-prefetch’ href=’//ssl.google-analytics.com’ />
<link rel=’dns-prefetch’ href=’//youtube.com’ />
<link rel=’dns-prefetch’ href=’//s.gravatar.com’ />
<link rel=’dns-prefetch’ href=’//www.googletagmanager.com’ />
<link rel=’dns-prefetch’ href=’//connect.facebook.net’ />
<link rel=’dns-prefetch’ href=’//www.gstatic.com’ />
<link rel=’dns-prefetch’ href=’//www.google.com’ />
<link rel=’dns-prefetch’ href=’//www.facebook.com’ />
<link rel=’dns-prefetch’ href=’//googleads.g.doubleclick.net’ />

Remove Query Strings from Assets

Removing query string from assets helps to further improve website performance. Some caching engines, servers and CDN’s can’t effectively cache files that have a query string, therefore we recommend removing query strings. A query string URL can be identified with a ‘?’ found within the URL, with the query string in place a URL will look like this: /wp-includes/css/dashicons.min.css?ver=4.4.2. 

Removing query strings can be done in WordPress using a number of performance plugins available such as Hummingbird and Autoptimize. 

Serve WEBP Images

WEBP is a next generation image format used for the web. Compared to JPEG and PNG image files, WEBP offers improved compression of images without sacrificing too much quality. As WEBP images offer further compression than traditional file formats, web pages using WEBP images become smaller and therefore load quicker.

A number of plugins are available to convert your current WordPress library to WEBP, this includes the pro version of Smush, Imagify and the free plugin WebP Converter for Media. These plugins will create WEBP versions of the images on your website and also provide additional code for htaccess or Nginx to allow your web server to serve these newly created WEBP images. Not all browsers support WEBP although most modern browsers do, the code provided by the plugins for Nginx and Apache htaccess will ensure that the new images are in place for users visiting on a modern browser and that those on legacy browsers are served the original JPEG and PNG files.

Load Google Fonts & Other Fonts Locally

Loading Google Fonts and other external fonts locally helps to cut down on CSS and font file response times, it also helps to reduce render blocking. For loading Google Fonts, the OMGF plugin is the easiest and quickest way to download the current Google Fonts being used on your website and load them from your own server. The plugin method is also the easiest method when a page builder is used on your WordPress install. You also then have the option to preload the fonts you are using via the plugin, this helps to further reduce blocking time.

You can manually download Google Fonts and upload the required fonts to a folder on your server, the CSS file of the fonts will contain multiple weights if selected and look like this:

/* latin */
@font-face {
font-family: ‘Open Sans’;
font-style: italic;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v18/memnYaGs126MiZpBA-UFUKWyV9hrIqOxjaPX.woff2) format(‘woff2’);
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

From here simply visit the URL defined above (https://fonts.gstatic.com/s/opensans/v18/memnYaGs126MiZpBA-UFUKWyV9hrIqOxjaPX.woff2) this will then download the woff2 file to your computer, simply save it and then upload it to the new font folder you have created on your server. You will have to repeat this for each font and font weight used on the website. Once you have uploaded the fonts to the server, simply update the src: url() of each of the fonts to point to the font on your server, then add each of the @font-face references to the top of your style.css or relevant CSS file for your website. The top of the stylesheet should look similar to the below with each font, font style and each font weight available:

/* latin */
@font-face {
font-family: ‘Open Sans’;
font-style: italic;
font-weight: 300;
font-display: swap;
src: url(https://example.com/wp-content/themes/my-awesome-theme/fonts/memnYaGs126MiZpBA-UFUKWyV9hrIqOxjaPX.woff2) format(‘woff2’);
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
font-family: ‘Open Sans’;
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://example.com/wp-content/themes/my-awesome-theme/fonts/memnYaGs126MiZpBA-UFUKWyV9hrIqOxjaPX.woff2) format(‘woff2’);
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Once you have uploaded the fonts and updated your website style sheet, you can remove the Google Fonts reference from your header.php file. Alternatively if you have Autoptimize installed you can select the option to ‘Remove Google Fonts’ which will strip out loading fonts from Google’s servers.

The same manual method can be used to locally load fonts from other online font sources by downloading the relevant woff or woff2 font files and uploading them to your server.

It’s also recommended to preload the fonts you have uploaded to your server to reduce render blocking, this can be done by adding the following code to the top of your header.php file, in the same section as DNS prefetch. Remember to preload each file on one line each:

<link rel=”preload” href=”https://example.com/wp-content/themes/my-awesome-theme/fonts/memnYaGs126MiZpBA-UFUKWyV9hrIqOxjaPX.woff2″ as=”font” crossorigin=”anonymous” />

Remove Emoji CSS and JavaScript

If you don’t use Emojis on your WordPress website, you can choose to remove the files which WordPress uses to display Emojis on the front end of the website. This will reduce the number of files loaded which in turn will help improve performance. Emojis and the files needed in WordPress can be easily removed with both Hummingbird and Autoptimize, the option is found within the advanced tools section of Hummingbird and under the ‘Extra’ tab of Autoptimize.

Remove Gutenberg Block CSS

If you are not using Gutenberg on your WordPress install and have the classic editor plugin installed and active, you can remove the extra CSS which is added for use with Gutenberg. Again removing the CSS required for Gutenberg will help to reduce the page size and page requests made. Be sure to double check that any page builders you are using don’t use any Gutenberg functionality first

Simply add the below code to the functions.php file of your theme:

function remove_wp_block_library_css(){
wp_dequeue_style( ‘wp-block-library’ );
wp_dequeue_style( ‘wp-block-library-theme’ );
wp_dequeue_style( ‘wc-block-style’ );
}
add_action( ‘wp_enqueue_scripts’, ‘remove_wp_block_library_css’, 100 );

Lazy Load

Lazy loading images and iframes can help to reduce on load time by only loading additional images and iframes when these assets appear within the viewport once a user has scrolled down the page. When lazy loading images we recommend you only lazy load images which are further down the page, lazy loading images above the fold such as hero images, logos and product images on a product page can actually have a negative effect for Core Web Vitals. Image optimization plugins allow you to lazy load your images, within the same section you can also define which above the fold images not to lazy load. Lazy loading images above the fold can contribute to cumulative layout shift.