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.

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



Avoiding CSS@import

CSS @import involves invoking stylesheets or CSS files from another CSS file.This approach prompts the browser to load each CSS file one after the other, instead of simultaneously. Given that CSS inherently blocks rendering, this can potentially impact page performance.To enhance your page load speed and enrich the user experience of your visitors, it’s recommended to steer clear of using CSS @import.

How does using CSS @import affect page performance?

CSS @import allows one CSS file to call another, making the browser load these files sequentially, not concurrently. Since CSS naturally blocks rendering, using @import can slow down page performance.

CSS @import allows one CSS file to call another, making the browser load these files sequentially, not concurrently. Since CSS naturally blocks rendering, using @import can slow down page performance.

Impact on page performance: CSS files pause rendering as they’re processed. Using CSS @import, files load one after the other, making the browser wait to render content. For instance, if style1.css imports style2.css, the browser processes style1.css, then recognizes and processes style2.css. This sequential processing involves more requests and bandwidth, possibly lengthening load times.

How To Avoid CSS @import in WordPress

Recommendation: To boost page speed and user experience, avoid CSS @import. Instead, employ alternatives like link tags, inline CSS, or merging CSS files, which can help browsers load pages faster and improve the user experience.

1. Using link tags

<link rel="stylesheet">
<link rel="stylesheet" type="text/css" media="handheld" href="style2.css">

where “style2.css” is the CSS file being linked and the media attribute signals what device the linked stylesheet will be displayed on.

Using <link rel="import">
<link rel="import" href="style2.css" async>

where “style2.css” is the CSS file being imported and the async tag denotes that this stylesheet is asynchronously loaded.Note that async attributes should only be added to non-critical stylesheets i.e., those not required for loading critical (or above-the-fold) content.

2. Combining or inlining CSS

Users, using an Optimization Plugin can Combine and Inline CSS files to reduce their numbers