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.

Difficulty Level in Implementing this Optimization =  Hard



Avoiding Large Layout Shifts

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