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

Preconnect to Required Origins

Employing preconnect allows the browser to prioritize crucial third-party connections, thereby accelerating your webpage’s load time since processing third-party requests can be time-consuming.

Given that third-party resources, such as embeds from Facebook or YouTube, are not hosted on your own domain, their behaviour can be unpredictable and potentially degrade the user’s experience on your page.

How does preconnecting to required origins affect page performance?

Third-party requests might hinder page load speed for various reasons – be it laggy networks, lengthy DNS lookups, several redirects, tardy servers, or underperforming CDNs. Leveraging preconnect for early connection establishment to these origins can help bypass the typical lag associated with such requests. By adopting preconnect, certain scenarios see marked improvement in page load durations since browsers reduce their idle time and start retrieving responses more promptly. Preconnect is especially beneficial when you’re aware of the third-party request origin but uncertain about the exact resource. It cues the browser about an impending connection to another origin, prompting an expedited initiation.

Implementing Preconnect with Caution

While preconnect enhances web performance, certain aspects demand attention:

It’s primarily advantageous for third-party resources. In-house server resources don’t benefit from preconnect.
Deploy preconnect wisely, as it might require significant CPU processing, potentially deferring other crucial resources. Secure connections are particularly demanding.
Idle connections exceeding 10 seconds get terminated by the browser. Hence, limit preconnect to vital resources on third-party domains.
For other third-party elements, employ dns-prefetch to diminish DNS lookup durations.

How to Address Preconnecting to Required Origins in WordPress:

Integrating Preconnect for Vital Third-Party Domains From the third-party resources pinpointed by GTmetrix, discern the vital ones and incorporate the subsequent code in their link tag:

				
					html
<link rel="preconnect" href="https://third-party-example.com">

Replace “https://third-party-example.com” with the domain of the indispensable third-party your page wishes to engage.

2. Incorporating dns-prefetch for Other Third-Party Domains For other third-party scripts, including non-essential ones, append the subsequent code in the link tag:

				
					html
<link rel="dns-prefetch" href="https://third-party-example.com">

Ensure “https://third-party-example.com” corresponds to the domain of the respective third-party component.