Serve Images in Next-Gen Format

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

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

The majority of websites use images in JPEG or PNG formats, which have been in use since the 90s.

The emergence of a new mage format presents an opportunity to SIGNIFICANTLY reduce decrease your image file sizes. This format serves images in next-generation format that take advantage of advancements in image processing and compression. This new format is known as WebP.

How does serving images in next-gen formats affect page performance?

This next-gen image formats offer superior compression and quality characteristics compared to older formats like JPEG or PNG.
WebP, serves as an excellent replacement for JPEG, PNG, and even GIF images. It also supports lossless compression, lossy compression, and animated images.
In the vast majority of cases, serving a WebP image can reduce image file sizes in the order of 50-80%.

How to leverage using WebP to decrease images sizes in WordPress?

Choose a next-gen format based on the range of browser/device support available. WebP is Google’s recommended next-gen format and is also the most widely used format with the best browser/device support.
To serve WebP images, use one of the following methods:

1. Manually convert your images to WebP format

There are multiple ways to do this manually, including:

A. Using an online WebP converter
You can manually convert your images to the WebP format using an online WebP converter. Note that this method is only recommended if youhave a few images to convert.

B. Using a Bulk WebP converter
For bulk conversion of images to the WebP format, consider using a Chrome extension like Bulk Images to WebP converter or using Android Studio for creating WebP images for mobile websites.

2. Use Photoshop
If you are familiar with Photoshop, you can use it to “save as” using the WebP format.

3. For WordPress (or other CMS users)
If you are using a CMS (e.g., WordPress), you can use of og many optimization plugins to serve WebP images on your website.