WordPress.NewCitizen.io

Speed Optimization Guide

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:

Don't Lazy Load Largest Contentful Paint Image

Applying lazy loading to your LCP image, such as the hero image or main slider, can negatively impact the LCP timing of your page.

While it’s beneficial to use lazy loading for offscreen images, it’s generally not advisable to use this technique for content that’s immediately visible on page load, like your LCP image, to maintain a speedy LCP timing.

LCP is a crucial factor among the Web Vitals,and enhancing it can lead to SEO advantages.

How does lazy loading the LCP image affect page performance?

Lazy loading images is a technique where the image loading is postponed until they are required.

This ensures images aren’t loaded until they appear in the browser’s viewable area, allowing the browser to focus on loading other crucial resources.

However, if lazy loading is implemented on content immediately visible upon page load (such as the LCP image), the browser may delay loading the LCP image while it deals with other resources. This means the LCP image isn’t instantly loaded, which can affect your LCP timing and make your page seem visually incomplete for an extended time.

Research conducted by Google indicates that lazy loading the LCP image can lead to longer LCP timings.

Choosing not to lazy load your LCP image can enhance your LCP timing, making your page seem like it loaded more swiftly.

The green website appears more fully formed at 0.2 seconds compared to the red website. Not applying lazy loading to the LCP image allows the browser to load it as soon as it comes across it in the markup, improving your LCP timing. T

his approach results in your page appearing visually complete to the user significantly sooner during the page load process.

How to disable lazy loading of the LCP image?

Using CMS Plugins (For WordPress or other CMS)

Users of WordPress (and other CMS platforms) can leverage Optimization plugins that readily provide the feature to delay the loading of images on your webpage. Depending on the plugin in use, there could be an option allowing you to turn off lazy loading for specific images.

Examine the settings of your plugin to find out if it provides such functionality or contact the plugin’s creator for further assistance. Consider switching to a different plugin if the current one doesn’t offer the capability to selectively disable lazy loading.