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:

Avoid long main-thread tasks

Processes such as HTML/CSS parsing and JavaScript parsing/execution are typically considered “tasks” and by default, are executed on the main thread.

When any of these tasks take more than 50 ms to run, referred to as a “long task”, they can prolong both the First Contentful Paint and the duration it takes for your page to be fully interactive.

To provide an optimal page experience for your visitors, it is critical to minimize long main-thread tasks as much as possible. How does your site score on this audit?

How do long main-thread tasks affect page performance?

Each time your page loads, the browser employs the main thread to manage the majority of tasks associated with displaying your page content and handling user interaction.

JavaScript tasks that run for extended periods (like A, B, E in the above) can monopolize the main thread for a significant duration, obstructing the browser from executing other crucial tasks, thus affecting your page’s overall loading time.

Lengthy tasks on the main thread inhibit the browser from performing other necessary operations for page loading. For instance, a protracted JavaScript file can halt the browser from processing any other tasks until it’s fully parsed and executed.

By reducing the quantity of these long main-thread tasks, you can boost your page’s overall performance by decreasing the workload on the main thread.

Consequently, visitors may witness faster content display on your page and engage with it more quickly.

How to minimize main-thread work?

Reducing the workload on the main thread should be a primary objective in your development process. You can largely achieve this by:

decreasing the duration of script evaluations.
lessening the number of style and layout recalculations.
cutting down on the time consumed in parsing CSS/HTML/JavaScript.
avoiding delays in rendering page pixels.

Several strategies can be implemented to accomplish these goals, which include:

1. Optimizing third-party JavaScript

Evaluate the third-party code on your website and eliminate those that do not contribute any substantial benefits. Enhance other scripts by delaying those that aren’t crucial, setting up early connections to vital third-party domains, enabling lazy-loading for embedded third-party content, and fine-tuning third-party hosting.
Click here to learn more about optimizing third-party JavaScript.

2. Debouncing your input handlers

Steer clear of using input handlers that run for extended periods (which might obstruct scrolling) and refrain from modifying styles within input handlers (which could potentially lead to pixel repainting). Implementing a debounce technique for your input handlers effectively addresses these issues.
read this article.

3. Using web workers

Employ web workers to run JavaScript off the main thread, thereby enhancing your page’s performance.
read this article.

4. Reducing JavaScript execution time

Decrease the size of your JavaScript payload by utilizing techniques such as code splitting, minification and compression of your JavaScript code, eliminating unnecessary code, and adhering to the PRPL pattern.
Click here to learn more about reducing your JavaScript execution time.

5. Reducing CSS parsing time

Reduce the time spent parsing CSS by minifying, or deferring non-critical CSS, or removing unused CSS.

6. Only using compositor properties

Adhere to using compositor properties to keep events off the main thread. These properties run on a distinct compositor thread, thus liberating the main thread for more extended periods and enhancing your page loading performance.
Click here to learn more about this optimization.

7. Using CMS Plugins (For WordPress or other CMS)

For WordPress (or other CMS) users, some of the optimizations mentioned above can be applied through the use of Optimization plugins.