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.

Difficulty Level in Implementing this Optimization =  Hard



Avoid Non-Composited Animations

How do non-composited animations affect browser rendering?

To understand the effects of non-composited animations on performance, one must first comprehend the browser’s rendering process. The ‘rendering pipeline’ describes the six sequential steps a browser undergoes to display a page. Each stage impacts the ones following it. All stages, except the last one (compositing), are influenced by their predecessors.

The rendering stages include the application of CSS or JavaScript styles that can affect the page layout, which in turn dictates how pixels are drawn on the screen. By default, the first five stages, or non-composited steps, are executed on the main thread, while the final compositing step runs on a separate, dedicated thread called the compositor thread.

Avoid Non-Composited Animations

How do non-composited animations affect page performance?

As previously stated, every step in the browser’s rendering pipeline has a direct impact on the subsequent steps.

Therefore, any animation involving CSS/JavaScript alterations can lead to a recalculation of styles; any change in these styles or the layout induces pixel repainting; this repainting results in additional tasks for the main thread.

This primarily affects your page performance in two ways:

  • First, your browser needs to perform more work on the main thread to render the page, leading to extended execution time.
  • Additionally, it causes more layout shifts on your page due to the mutating elements, which can be activated by further steps in the rendering pipeline.

By steering clear of non-composited animations, you can lessen the workload on the main thread, resulting in an improved user experience.

Composited animations (such as opacity and transform) are carried out on a separate compositor thread and do not instigate pixel repainting. This ensures a smoother loading of your page, eliminating unexpected layout shifts and/or page jank.

How to avoid non-composited animations?

In general, try to only perform composited animations, especially, for the animated elements identified by GTmetrix.

Start by evaluating the CSS elements used for your animations. Click here for a complete list of CSS elements that may or may not trigger repainting of pixels on your page.

Generally, it’s recommended to only carry out composited animations, particularly for those animated components identified by GTmetrix.

Begin by assessing the CSS elements utilized in your animations. Click here to view a comprehensive list of CSS elements that could potentially trigger, or avoid triggering, pixel repainting on your page.

Read this article to learn more about performing compositor-only animations.