Performance Series - In-Depth Optimisation

TL;DR

Low-hanging fruit

Caching

• Full page caching (resolves server response time issues)
• Browser caching (resolves efficient caching policy warnings)

Optimizing Images

• Resize (reduce height and width resolution)
• Compress • Lazy loading (load when almost visible on the screen)
• Change file type (to WebP where possible)

Optimizing Videos • Compress

Content Delivery Network

Complex Improvements

Optimizing Videos

• Compression (handbrake)
• Lazy loading

Optimizing Files

• File size reduction (minify)
• Order of file loading
• Removal of unused CSS & JavaScript
• Eliminating unnecessary tools

Hosting

• Location
• PHP version
• OPCache
• JIT
• Caching

In-depth

Images

Lighthouse points • Efficiently encode images • Image elements do not have explicit width and height • Avoid enormous network payloads • Serve images in next-gen format • Defer off-screen images

Images, along with videos, are usually the largest components of a website in terms of file size. Retrieving this data by visitors takes time, which depends on the network speed. The smaller the files, the faster they can be fetched.

To optimize images, the following steps can be followed:

Resize resolution Images' resolution doesn't always match what is displayed on a website. For example, an image provided by a photographer may be in 4K (~4K pixels wide). The image displayed on the website usually requires fewer pixels. Therefore, unnecessary data is loaded. The required number of pixels should be determined for the website.

Compression Compressing images removes unnecessary pixels from them. This can often be done using a technique called "lossless," which removes unnecessary data without sacrificing quality. This can result in a size reduction of up to 90%.

This can be done using online tools like https://compresspng.com/.

Lazy loading When a website is loaded, not everything is immediately visible. Other images on the page come into view only when scrolling. There's no need to fetch them when the page is first opened. They can be loaded later when the user is about to see them. The advantage is that the initial part of the website can be loaded faster.

Changing file type to WebP Technologies keep evolving, including file types. WebP is a relatively new technology that can store images in much smaller sizes, about 25-35% smaller. This reduces the amount of data that needs to be fetched.

Videos

Lighthouse point • Avoid enormous network payloads

Lazy loading By using lazy loading for videos, you ensure that the user doesn't have to wait for the videos to load on the pages. The page loads other elements first. The necessary video data is loaded only when the page is displayed. In the meantime, a temporary image is displayed, such as a nice shot from the video.

Implementing lazy loading for videos requires custom code adjustments in the video loading process.

Compression Videos are often not in the necessary format for the website. For example, 4K videos are not necessary in many cases. To save data, videos can be resized to, for example, 1080p. 4K videos are roughly 4 times larger than 1080p videos.

To compress videos, you can use the free tool https://handbrake.fr.

Caching

Lighthouse points • Serve static assets with an efficient cache policy • Reduce initial server response time

Full page caching To display all the data on a page, often data needs to be fetched, including from databases, external systems, or complex calculations. In many cases, this data is the same for every visitor. For example, the homepage, product list, or contact page.