After selecting your desired 'Optimization' section from the table, please scroll again to the very bottom of the page to view the material.
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.
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 | Plugin | Plugin | ||
2 | Plugin | Plugin | ||
3 | Plugin | Plugin | ||
4 | Plugin | Medium | ||
5 | Plugin | Plugin | ||
6 | Difficult | Medium | ||
7 | Plugin | Easy | ||
8 | Easy | Plugin | ||
9 | Difficult | Plugin | ||
10 | Plugin | Plugin | ||
11 | Plugin | Plugin | ||
12 | Plugin | Plugin | ||
13 | Plugin | Medium | ||
14 | Plugin | Easy | ||
15 | Plugin | Medium | ||
16 | Easy |
Difficulty Level in Implementing this Optimization = Easy
To fix this finding, simply specify, both, the width and height for your webpage’s image and video elements. This ensures that the correct spacing is used for images and videos.
For example,
<img src=”devpug.jpg” width=”640″ height=”360″ alt=”Devpug Sleeping”>
where width and height have been declared as 640 and 360 pixels respectively.
Note that modern browsers automatically calculate the aspect ratio for an image/video based on the declared width and height attributes.
If image and/or video elements do not have explicitly defined width and height attributes, they typically get resized through CSS, either on the image itself or its parent container.
In such cases, the browser can only calculate their dimensions and reserve space for them when it starts downloading these ‘unsized’ images and/or videos.
When the browser retrieves these multimedia elements, the content on your page may be persistently displaced or relocated from its initial position, causing so-called layout shifts.
Layout alterations driven by unsized images and/or videos can interfere with how users engage with your webpage. As the page loads, the elements represented in red cause other components to reposition and readjust, contributing to a poor CLS score.
These layout shifts can lead to a low Cumulative Layout Shift (CLS) score, signifying that your page suffers from visual instability, especially on mobile devices.
Additionally, the extra work the browser must do to recompute the page layout could potentially impact your page’s performance.
By explicitly setting width and height attributes for your image and/or video elements, you can help the browser compute and allocate adequate space for these elements.
Images highlighted in green have predefined widths and heights to ensure a consistent and predictable display of your website during the loading process, thereby minimizing layout shift.
Such measures can reduce the main-thread work, prevent substantial layout shifts, and establish a smoother browsing experience for your visitors.
To fix this finding, simply specify, both, the width and height for your webpage’s image and video elements. This ensures that the correct spacing is used for images and videos.
For example:
<img src=”devpug.jpg” width=”640″ height=”360″ alt=”Devpug Sleeping”>
where width and height have been declared as 640 and 360 pixels respectively.
Note that modern browsers automatically calculate the aspect ratio for an image/video based on the declared width and height attributes.
No misleading, biased or special interest information. Our Focus is our Users.