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.

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.