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

Implementing this feature can be achieved by using an Optimization Plugin:

Reduce the Impact of Third-Party Code

Third-party code encompasses ads, analytics services, and other components that originate from a domain different from your URL domain.

Such resources often contribute to subpar web performance as they can contain scripts that block your main-thread, thereby preventing other tasks from taking place.

There could be various other reasons for them slowing down your page such as sluggish server response times, slow DNS lookups, server response errors, etc., that can negatively impact your page performance.

Therefore, it’s crucial to scrutinize your website code for third-party scripts and minimize their impact as much as possible for better web performance.

How does third-party code affect page performance?

When a page loads, the browser has to download and parse the HTML code line by line. It might encounter third-party scripts that tend to block the main-thread.

Typically, JavaScript runs on the main-thread and could take a considerable time to execute, thereby stopping all other tasks. Here, the third-party JavaScript file led to a long task, which blocked the loading of the hero image and delayed the loading of the remainder of the page.

The effect on the user experience is three-fold:

The First Paint and the loading of other key content is often delayed.
- Your users may see a blank-page for an extended period.
The third-party scripts prevent the browser from executing other tasks.
- Your user cannot interact with the browser until the scripts have finished executing.
Third-party scripts often inflate the number of requests your browser must deal with.
- This means more data downloaded, more network trips, and more work for your browser, overall.

The above is further compounded if you have multiple third-party requests, which may further exacerbate your page performance.

Although third-party code could be vital for your site’s functionality or business objectives, it’s best to review your third-party content and ensure they are providing value to your site.

How to reduce the impact of third-party code?

Here are some general strategies to reduce the impact of third-party code:

1.Reviewing your website’s third-party scripts

This helps you recognize and assess scripts and services appearing on your webpage. It’s a sound practice to retain only those third-party scripts and services that genuinely add value to your website and remove the rest.

2. Efficiently loading third-party JavaScript

Some of the suggestions include:

A. Deferring the loading and parsing of JavaScript

Deferring the parsing or loading of third-party JavaScript helps decrease the initial download size, facilitating parallel downloads of other resources. This accelerates your page’s execution and rendering time.

B. Establishing early connections to required origins

Use preconnect and dns-prefetch to establish early connections to important third-party origins. Read more about this in our documentation.

C. Lazy-loading third-party resources

Lazy-load embedded third-party resources, especially those not above-the-fold, to speed up page load time and enhance your page’s perceived performance

D. Optimize third-party hosting

Several methods can optimize third-party hosting. For instance, self-host third-party scripts to lessen DNS lookup and round-trip times, enhance http caching headers, and benefit from HTTP/2 server push.