Speed Optimization Guide

Your Attention Please !

After selecting your desired 'Optimization' section from the table, please scroll again to the very bottom of the page to view the material.

A complete and Comprehensive Guide On Making WordPress websites faster.

Don’t be overwhelmed by the table below; most optimizations can be easily achieved with an optimization plugin. I personally use the free Speed Optimization plugin that comes bundled with SiteGround’s Hosting plan. However, there are several other options, including W3 Total Cache (W3TC), WP Rocket, and FlyingPress.

Steps to optimizing your WordPress website :

1. Visit GTmetrix: Enter your website’s URL to begin the test. GTmetrix offers this tool for free and allows multiple tests to be performed every hour, at no charge.

2. Review the Report: GTmetrix will quickly generate a performance report, pinpointing each area that requires improvement.

3. Consult our table below to address the specific areas highlighted by GTmetrix. While GTmetrix often uses complex terminology, overcomplicates its instructions, and provides guidance for a broad spectrum of websites, we’ve streamlined and tailored their recommendations specifically for WordPress sites. With our clear and straightforward guidelines, you’ll find it much easier to understand and implement the necessary changes.

4. Re-test After Implementing Changes: After making a change, clear your website’s cache if it’s enabled. Re-test on GTmetrix to assess the impact of your adjustments. Using the new results, move on to the next suggested improvement and continue the process.

Implementing this feature can be achieved by using an Optimization Plugin:



Ensure Text Remains Visible During Webfont Load

While a page loads, the text content might be ready for display before the web fonts are fully downloaded. If the text remains hidden during this time, it results in the Flash of Invisible Text (FOIT) problem. Addressing this issue by ensuring text stays visible while web fonts load enhances the user experience by preventing blank spaces and unwanted layout shifts.

How do web fonts affect page performance?

On pages that rely on web fonts for text rendering, browsers can’t display the text until the web font is available. Often, the text is ready for display before the web font. The browser reserves space for the text, even if the font isn’t loaded, leading to the FOIT issue. This can make the user experience disorienting.

Though the text is loaded and can be highlighted, it remains invisible because the font meant to style it hasn’t downloaded. To address this, one can preload web fonts and use font-display. This displays text with system or fallback fonts until the desired web font becomes available, preventing unwanted layout shifts and ensuring a swift, and as Google puts it, ‘delightful’ user experience.

Flash of Unstyled Text (FOUT) A related issue is the Flash of Unstyled Text (FOUT), where font delays also occur. The difference is that during this delay, readers can still view the text as it’s rendered in the nearest available font. FOUT doesn’t affect performance as noticeably as FOIT.

How to ensure text remains visible during web font load?


1. Preloading Web Fonts:

Essential web fonts required immediately upon page load can be preloaded. This is done by placing the following link tag in the HTML header:

<link rel="preload" href="/webfontname" as="font" type="font/format" crossorigin>
  • /webfontname is the specific web font being loaded.
  • format specifies the web font format (e.g., ttf, woff, woff2).

2. Using font-display

The font-display attribute defines how a font displays based on its load status. Possible values include:

  • auto – lets the browser use its default web font display method.
  • block – holds the text invisibly until the web font is ready.
  • swap – instantly renders text with a fallback font, then switches to the web font once loaded.
  • fallback – briefly hides text, shows it with a fallback font, and then swaps to the web font once loaded.
  • optional – functions similarly to fallback but lets the browser decide if the web font should be used.

For Google Web Fonts:

When utilizing Google web fonts, the font-display feature can be added by appending &display=swap to the web font URL in CSS:

<link href="googlewebfonturl&display=swap" rel="stylesheet">
Here, googlewebfonturl represents the URL of the chosen Google web font.

4. For WordPress (or other CMS) Users:

WordPress users can employ specific Optimization plugins to tackle the FOIT problem, such as that offered by Siteground.