Avoiding large layout shifts

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

Difficulty Level in Implementing this Optimization = Hard

How to avoid large layout shifts

Large layout shifts disrupt the user experience by causing elements on a page to suddenly move around. This can be bothersome for visitors and hinder their interaction with content. Ensuring stability in the layout is key to offering a fluid and pleasant user experience.

How do Layout Shifts affect page performance?

Users visiting a webpage aim to interact with various elements swiftly. However, unexpected layout changes can cause them to inadvertently click on the wrong item. For instance, as a user intends to select one element, a loading image might shift the layout, leading to an unintended selection. This visual instability, termed ‘Layout shift,’ is particularly noticeable on mobile devices and affects the Cumulative Layout Shift (CLS) score. While the CLS’s contribution to the Performance Score is just 5%, its presence in the Web Vitals underscores its importance in measuring the user experience quality. Avoiding such shifts is vital to ensure a seamless browsing experience.

2. Reducing layout shifts caused by ads, embeds, and iframes

To minimize layout changes resulting from ads, embeds, and iframes, consider the following strategies:

Allocate space for the ad slot, preferably the largest one, prior to loading the ad library.
Relocate ads to the lower part of the page or outside of the visible screen area.
Implement placeholders when there are no available ads for display.

To learn more, read this article.

3. Avoiding inserting new content above existing content

Strive to prevent the placement of dynamic content such as banners or forms above pre-existing content unless it’s in response to user interaction. This tactic can significantly reduce unexpected shifts in your layout.
To learn more, read this article.

4. Preventing the Flash of Invisible Text (FOIT)

The issue of Flash of Invisible Text (FOIT) can also have an impact on your page’s Cumulative Layout Shift (CLS). To keep your text visible while web fonts are loading, consider preloading web fonts and/or employing the font-display attribute.
Learn more about this here.

5. Avoiding non-composited animations

Where possible, only perform composited animations to reduce main-thread work and prevent repainting of pixels during the page load.e