Preconnect to Required Origins in WordPress

Preconnect to required origins is a PageSpeed recommendation that you may see if your site loads files from external domains. It can be satisfied by adding either preconnect or dns-prefetch directives to your page.

preconnect and dns-prefetch are types of “resource hints” which are used to try and speed up the loading of files hosted on 3rd party domains.

Resource hints are small pieces of HTML that are added to the page, to communicate to the browser to start specific tasks as soon as possible.

This is what resource hints look like in the HTML of a page:

<link rel='dns-prefetch' href='//fonts.googleapis.com' /> <link href='https://fonts.gstatic.com' crossorigin rel='preconnect' />
Code language: HTML, XML (xml)

Don’t get this confused with preload, another type of resource hint, which is used for specific files.

In this article I’ll explain the difference between preconnect and prefetch, which you should use, and how to add these to your site.

Read More

How to Serve Static Assets with an Efficient Cache Policy in WordPress

The Google PageSpeed recommendation to serve static assets with an efficient cache policy is all about browser caching. It’s usually pretty straightforward to fix on WordPress sites.

“Static assets” means the files on your site: CSS, JavaScript, images, fonts, videos (and other media files).

“Efficient cache policy” means that they have a long enough browser caching value so that they do not have to be downloaded by your site visitors frequently. Usually 4 months or longer is enough to satisfy Google and other tools.

Read More

Reduce Unused CSS in WordPress

Reduce unused CSS in WordPress

Addressing PageSpeed’s recommendation to Reduce Unused CSS improves your site’s overall score, along with the First Contentful Paint (FCP) and Largest Contentful Paint (LCP) metrics.

Removing unused CSS is closely tied with removing render-blocking resources, and the plugins available will often let you achieve both things at once:

  1. Load only the exact CSS needed for any given page
  2. Make sure that CSS is not render-blocking
Read More

How to Fix “Avoid an Excessive DOM Size” in WordPress: A Practical Guide

The PageSpeed recommendation to “avoid an excessive DOM size” is a tricky one for WordPress site owners. There isn’t a plugin that can magically fix this for you. You, the site owner, will need to make some changes to your content.

Most of the articles you’ll find on this topic are going to go into the technical things to do which aren’t possible for non-developers. However, this guide is a practical one for WordPress site owners.

Read More

How to Install and Set Up WP Rocket

I’ve been working with WP Rocket’s support team for a number of years, so I’m not only intimately familiar with the plugin, but I’ve also seen a lot of mistakes that customers make when they attempt to use it.

Even though it’s one of the easiest WordPress caching plugins to use, speed optimization is inherently technical and complex. It’s common to get confused or overwhelmed when using optimization plugins.

But here you have the “ultimate” guide, from the horse’s mouth. Even if you don’t use WP Rocket specifically, many of the guidelines apply to caching plugins in general.

Read More