How to make websites with lots of video and images load faster?
Our task was to speed up the site and make it load faster. At the same time, the quality of the images and videos had to be maintained: the client sells diamond jewellery and it is important to show the items in detail.
Compressing Video
We did a lot of analysis on what we could do with the video and how it was working now. We found that the videos were all being loaded with an audio track, but at the same time they were all being played without the audio, with the mute tag on them. So our decision was to remove the audio tracks, with an average reduction in size of 15%.
All of the videos have been converted to mp4 only. For browsers that support WebM, we decided to create WebM versions.
We played around with the encoding settings by requesting all videos from the client in their original quality. This resulted in most videos being converted to WebM with compression set to 40. Some videos had to be encoded with a compression setting of 30 because they had a lot of dynamic scenes with tiny details.
WebM compression settings range from 1 to 65, with 1 being the best quality. We lost no quality compared to the mp4 videos already on the site with the settings we chose. At the same time, we had an average reduction in size of 50% in comparison to the original mp4 with sound.
We then added a link to the video in two formats in the page code. Now the browser decides which format it can play. To make autoplay work in Safari, we also added the playsinline tag. This resulted in the video codes looking as follows:
video autoplay playsinline muted loop
source src="https://static.sybaritejewellery.com/video/home_page.webm" type="video/webm"
source src="https://static.sybaritejewellery.com/video/home_page.mp4" type="video/mp4"
/video
Photo compression
And then we moved on to the images themselves. We went through them all and did a JPG conversion of all the large ones.
Then we wanted to make duplicates of the images in WebP format, similar to the video, but after some thought we abandoned this idea. The site is dynamic, new articles and photos of articles are added, and the current admin panel doesn't support uploading in WebP. So we decided to go the other way.
Cloudflare CDN
The client had set up a CDN in Cloudflare. We upgraded to Pro for $20 per month. There was a free plan. Went through all the add-ons in Cloudflare, including:
1. Polish - reduces image load times by optimising image size and uses the WebP codec on supported clients to further improve performance.
2. Auto Minify - reduces the size of code and scripts on the site.
3. Brotli - speeds up page loading for visitors by applying Brotli compression.
4. Enhanced HTTP/2 Prioritisation - using 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 greatest improvements.
5. TCP Turbo - reduces latency and throughput with custom TCP optimisations.
6. Mirage - reduces the time it takes for pages with images to load on mobile devices with slow connections by replacing low-resolution, slow-loading images.
7. Rocket Loader - reduces rendering time for pages containing JavaScript.
+50% website loading speed
94 Desktop PageSpeed
66 Mobile PageSpeed
WebM & WebP
Desktop PageSpeed Insights performance rating was:
and now after optimizations Desktop shows:
Mobile PageSpeed Insights performance rating was:
and now after optimizations Mobile shows:
50% reduction in web page load time
All of the aforementioned actions resulted in a 50% reduction in the time taken to load the website, reaching the green and yellow zones according to the Google PageSpeed Rating.
