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.
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|
Implementing this feature can be achieved by using an Optimization Plugin:
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.
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.
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>
The font-display attribute defines how a font displays based on its load status. Possible values include:
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">
googlewebfonturlrepresents the URL of the chosen Google web font.
No misleading, biased or special interest information. Our Focus is our Users.