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:

Eliminate Render-Blocking Resources

Render-blocking resources consist of scripts, stylesheets, and HTML imports that obstruct or slow down the browser from displaying the page content on the screen.

These resources cause a delay in the First Paint, which is the moment your browser begins to display something (like background colours, borders, text, or images) for the first time.By eliminating render-blocking resources, your webpage can load much quicker, thereby enhancing the user experience on your website.

How does eliminating render-blocking resources affect page performance?

During the page loading process, a browser scans through the HTML code of a page in a sequential manner.

The scripts and tags located in the HTML’s <head> section are processed initially before the browser continues its operation. In this process, it may encounter various scripts and tags that, if not specifically stated otherwise, will be downloaded, parsed, and executed before proceeding with the rest of the HTML code.

These render-blocking resources prevent the browser from initiating the rendering process promptly, thus prolonging the time it takes for the First Paint of your page. Having numerous render-blocking resources could potentially result in your visitors waiting an extended period before observing any substantial content on your page, such as a blank or minimally filled page.

Such a delay might create an impression of a slow-loading page, leading visitors to refresh, press the back button, or completely exit the page.

Visitors are presented with a blank screen while the browser processes render-blocking resources. Scripts and tags that are positioned at the start of the page should either be deferred, loaded asynchronously, or removed completely. The reason for this is that the sooner visitors see some content loading on your page, the better the performance, or in many cases, the better their perception of performance.

Reducing the number of render-blocking resources to the bare minimum promotes progressive loading. This enables First Paints to happen more quickly, and gives your visitors the impression that your website is responsive and loading content.

Websites that load progressively are often seen as faster than sites that initially show nothing and then suddenly display all content. Progressive loading, in numerous instances, offers visual cues which can help retain visitors on your page.

How to eliminate render-blocking resources for WordPress?

Using a WordPress (or other CMS) plugin for Optimization is your best bet to eliminate render-blocking in a straight-forward manner.

Optimization plugins go through your page’s <script> and/or <link> tags and apply the appropriate defer or async attributes.