To accomplish this I used the following javascript I loaded in before the end body tag. Once the high-resolution image is loaded we want to change the low resolution with the high -resolution image. To do so we want to first load in the low-resolution image and already load the high-resolution image asynchronous in the background. This is perfect for the first seconds the page is loading but we want to give the user the great experience of our original background image. But now we have a low-resolution blurred image as our background.
This reduction in size results in a load time of 550 milliseconds instead of the 10 seconds. This results in an image size from 4.8MB to 900 bytes. When we create this image we have reduced the resolution of the image from 7372x4392 pixels to 20x11 pixels. This ‘placeholder’ is a low-resolution variant of the original image. The next step would be to load a so-called ‘placeholder’ image before we actually load the original image. This seems like a huge step but ten seconds is still way too much. This is an easy win and will reduce the load time to around ten seconds. So how do we overcome this issue? Well, the first thing we can do is to compress the background image by using various tools on the internet. Google seems to invest a lot in letting developers know about page performance in their conferences. My expectation is that this has become a more and more important factor over the years. In 2010 Google stated that page speed is a factor in their ranking algorithm. It seems that not only your user experience is dropping because of this. The user might already have left your website at this time.Ī simple bad optimized website with a background image of 4.8MB over a fast 3G cellular network However, the background image takes 27.32 seconds to load where the user sees parts of the images loading in. So basically the user sees the content after 1.14 seconds. As you can see the DOM is loaded in 1.14 seconds.
In the example below I created a simple website that contains a background image of 4.8MB. This results in empty sections on your page where an image slowly loads in. The problem here is that often the site document is already loaded while the images are still loading. A good way to test this on your current website is by selecting network throttling in Chrome Devtools. That would take ages to load and results in users leaving your website. Imagine yourself on a slow 3G cellular connection loading that website.
I often see websites that load several megabytes worth of images just to have a slider on their homepage. Having a website full of beautiful images is great and all but can be a huge bottleneck for page loading. This is how I optimized image loading to accomplish a better user experience. A website full of images can be a huge bottleneck for website performance.
0 kommentar(er)
