WordPress.NewCitizen.io

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.

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

Difficulty Level in Implementing this Optimization = Easy

Properly Size Images

The Importance of Proper Image Sizing:

Web pages are an amalgamation of text, images, and other multimedia elements. While text takes up minimal space, images, if not optimized, can eat up significant bandwidth and processing power. It’s akin to having a luxury car but filling it with low-grade fuel – it won’t give optimal performance.

Common Oversights in Image Usage:

High-Resolution Uploads: Directly transferring images from cameras or phones without compression often leads to excessively large file sizes.
Stock Photo Pitfall: Premium stock photos come in very high resolutions, which might be overkill for standard webpage dimensions.
Print-Ready Graphics: Graphics tailored for print media have high DPI (dots per inch) values, making them heavy for web use.

These mistakes compel the browser to downsize images during rendering, a process that not only consumes time but also uses extra resources.

Consequences of Not Properly Sizing Images:

Wasted Bandwidth: Large images mean more bytes to download, leading to higher data usage – a critical issue for users with limited data plans.
Sluggish Page Loads: A significant portion of loading time is often spent downloading images. The larger the image, the longer users wait.
Resource Intensive Resizing: Browsers have to invest extra processing power to fit oversized images into designated spaces.
Compromised User Experience: Slower pages due to hefty images can deter users, affecting both user satisfaction and conversion rates.
Impact on Cumulative Layout Shift (CLS): As images load, they can push content around, especially if their dimensions aren’t specified. This can lead to poor CLS scores, impacting both user experience and SEO.

Optimizing Web Performance with Proper Image Sizing:

Suitably sized images streamline webpage loading, bolstering key performance metrics and diminishing bandwidth use. This becomes doubly significant for mobile users, ensuring pages consume less cellular data, leading to faster loads and reduced data costs.

How to Resize image for WordPress:

1. Manual Resizing:

A hands-on approach is detailed in our article, Practical Guide on How to Optimize Images, which sheds light on manually optimizing image dimensions.

2. Utilizing srcset:

What’s srcset? An HTML tag that empowers browsers with multiple image variations to choose from.

How it works: Offer different image sizes and let srcset dictate which to use based on the user’s device and display.

Sample Implementation:

<img srcset="large.jpg 2x,
             small.jpg 1x"
     src="small.jpg"
     alt="A representative image">

Users with a Device Pixel Ratio (DPR) of 2 get large.jpg, while those with DPR of 1 receive small.jpg.

In the absence of srcset support, browsers default to small.jpg.

3. Harnessing Image CDNs:

Why use Image CDNs? These services are very easy to use and extremely powerful in image transformation and delivery. With potential reductions in image sizes by up to 80%, they deliver great value. Cloudflare offers its basic CDN Package free of charge,

Features:

Automated compression for smaller files.
Dynamic resizing and formatting.
Efficient delivery through global CDN networks.
Image CDNs simplify your workflow, entrusting image optimization to experts.

4. Embracing Vector Over Raster:

Raster Images: Pixel-based formats like JPEG, PNG, and GIF. Quality is directly proportional to pixel count.
Vector Images: Math-based images, commonly in SVG format, defined by algorithms instead of pixels. They maintain quality regardless of scale.
Ideal candidates for vector transition include logos, basic icons, and minimalistic graphics.
The switch ensures uniformly stellar image quality regardless of the device or viewport size.

5. CMS-Specific Insights (e.g., WordPress):

Post WordPress 4.4, srcset has been a default feature. Yet, custom or premium themes might override this.
Recommendation: Adopt themes supporting srcset. If not, revert to manual resizing or plugins for image optimization.