How to speed up website loading time when you have lots of videos and pictures

WAMP agency had a task to speed up the site and increase the page loading speed. At the same time, it was necessary not to lose the quality of images and videos: the client sells diamond jewellery, and it is important to show items in detail.

Video compression

We started to analyse what can be done with the video and how it works now. We found out that the videos are all loaded with an audio track, but at the same time they are played everywhere without audio, with the muted tag. Therefore, we decided to remove the audio tracks and thereby reduced the size by 15% on average.

All videos have been converted to mp4 only. We decided to make versions in WebM format so that WebM would be reproduced for browsers that support this format.

We requested all videos from the client in original quality and played around with the encoding settings. As a result, most of the videos were converted to WebM with a value of 40 in the compression settings. Some videos, which had a lot of dynamic scenes with tiny details, had to be encoded with a compression setting of 30.

WebM compression settings range from 1 to 65, where 1 is the best quality. With the settings we chose, we didn’t lose any quality compared to the mp4 videos that were already on the site. At the same time, we managed to reduce the size by an average of 50% compared to the original mp4 with sound.

Then, in the page code, we added a link to the video in two formats, and now the browser decides which format it can play. We also added the playsinline tag so that autoplay works in Safari. As a result, the video codes turned out in the following format:

https://static.sybaritejewellery.com/video/home_page.webm” type=”video/webm”>

https://static.sybaritejewellery.com/video/home_page.mp4″ type=”video/mp4″>

Image Compression

Then we moved on to the pictures. We went through them all and converted all large images in JPG.

Then, by analogy with video, we wanted to make images duplicates in WebP format, but, after thinking, we abandoned this idea, since the site is dynamic, new posts and photos of items will be added, and the current admin panel did not support uploading inWebP. So we went the other way.

The client had CDN configured in Cloudflare. There was a free plan, and we upgraded to Pro for $20 a month. Went through all the add-ons in Cloudflare and included the following:

Polish — Image loading times are reduced by image size optimisation, and the WebP codec is used with supported clients to further improve performance.
Auto Minify — reduces the size of the code and scripts on the site.
Brotli — speeds up page loading for visitors by applying Brotli compression.
Enhanced HTTP/2 Prioritisation — through parallelisation and multiplexing, intelligently parses the site’s HTML code to determine the order in which resources are loaded for maximum performance. Visitors using Safari and Edge browsers will see the biggest improvements.
TCP Turbo — reduces latency and throughput with custom TCP optimisations.
Mirage — reduces the loading time of pages with images on mobile devices with slow connections by replacing images with low resolution and lazy loading counterparts.
Rocket Loader — reduces rendering time for pages containing JavaScript.

Results

Previously, the PageSpeed Insights desktop performance rating was:

and now it is:

The mobile performance rating was:

and now mobile page speed looks like:

All mentioned actions decreased by 50% website loading speed and enter the green & yellow zones according to these Google PageSpeed ratings.

You can check also: How to start a website for a small business and how much does it cost.