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 = Medium

Preload Largest Contentful Paint image

Preloading your Largest Contentful Paint (LCP) image ensures a quicker display of your website’s main visual content during the loading phase. A rapid LCP offers users quicker access to pivotal content, enriching their browsing experience. Furthermore, since LCP is a vital metric among the Web Vitals, optimizing its timing through preloading can offer SEO benefits.

How LCP Image Preloading Influences Page Performance

When you preload the LCP image, it enables your website to portray its primary visual content more swiftly during the initial loading phase, crafting an impression of a swifter page load. The LCP element, as the name hints, is often the bulkiest content rendered by the browser and frequently takes the form of significant visuals such as hero images, sliders, or background pictures.

Oftentimes, the LCP component is nested deeper within the request hierarchy and becomes essential for specific onload events, especially when embedded in elements like carousels or themes. With knowledge of your LCP image, the <link rel=”preload”> tag can be utilized to guide the browser to prioritize this image’s loading.

By leveraging this preloading approach, the primary visual content of your website might appear to be fully loaded more swiftly. For instance, a website with a green overlay might seem more visually complete at 0.2s when juxtaposed against another with a red overlay. This tactic eradicates the lag tied to the late retrieval of the resource, ensuring the LCP image is seamlessly integrated into the DOM as soon as it’s called. This method can play a pivotal role in your webpage achieving optimal LCP timings, thus refining the overall user experience.

How to Implement LCP Image Preloading in WordPress:

In the event GTmetrix identifies the LCP image, it can be preloaded employing a link tag embedded within the HTML header, akin to the preloading of other crucial assets. To implement this:

Integrate the subsequent code into your HTML’s <head> section:

<link rel="preload" href="/path/to/image.jpg" as="image">

For enhancing the loading of responsive images, you can further utilize the <link rel=”preload”> tag as illustrated below:

<link rel="preload" as="image" href="/path/to/image.jpg"
  imagesrcset="image_400px.jpg 400w, image_800px.jpg 800w, image_1600px.jpg 1600w"
  imagesizes="50vw"/>

With these simple yet effective measures, you can ensure a marked improvement in your webpage’s user experience, especially during the crucial initial loading phase.