Ensure Text Remains Visible During Webfont Load

WordPress.NewCitizen.io

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.

wdt_ID	Topic	Difficulty Level	Topic2	Difficulty Level2
1	Avoid an excessive DOM size	Plugin	Minify CSS	Plugin
2	Avoid chaining critical requests	Plugin	Minify JavaScript	Plugin
3	Avoid CSS @import	Plugin	Minimize main-thread work	Plugin
4	Avoid document.write()	Plugin	Preconnect to required origins	Medium
5	Avoid enormous network payloads	Plugin	Preload key requests	Plugin
6	Avoid large layout shifts	Difficult	Preload Largest Contentful Paint image	Medium
7	Avoid long main-thread tasks	Plugin	Properly size images	Easy
8	Avoid multiple page redirects	Easy	Reduce JavaScript execution time	Plugin
9	Avoid Non-Composited Animations	Difficult	Reduce the impact of third-party code	Plugin
10	Deferring Offscreen Images	Plugin	Reduce unused CSS	Plugin
11	Don't lazy load Largest Contentful Paint image	Plugin	Serve images in next-gen formats	Plugin
12	Eliminate render-blocking resources	Plugin	Serve static assets with an efficient cache policy	Plugin
13	Enable text compression	Plugin	Use a tag with width or initial-scale	Medium
14	Ensure text remains visible during webfont load	Plugin	Use a Content Delivery Network (CDN)	Easy
15	Lazy load third-party resources with facades	Plugin	Use video formats for animated content	Medium
16	Use explicit width and height on image elements	Easy

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.