Reasons Images are Slowing Down Your Page Load Time (and How to Make it Better)
Websites are ubiquitous.
Any niche you think of, there will be thousands of websites clamoring for the visitor’s attention.
Can you blame the users if they can’t and won’t wait for your richly loaded web page to download onto their browser?
The search engines consider the page load speed as an essential parameter for user engagement; hence it is also factored into the web page ranking.
Given two web pages with same information, the page that loads faster will rank higher in search results. So, imagine what will happen if there are hundreds of web pages faster than yours.
Now, what component of a web page contributes the most to slow down a web page?
You guessed it right.
It is the images that not only eat up most of the real estate of a web page but also consume most of the bandwidth.
These are the top reasons why images are slowing down your page load time:
Too large image files.
Synchronous loading of elements.
Too many images & HTTP request.
Let's see how they are problematic and how to make everything better.
Before getting into it, you might be asking yourself: "How do I know that images are currently slowing down my page load time?" Google's PageSpeed Insights is a great tool to validate the speed of your pages and finding troublesome elements. You should run it with your site to confirm if your images need optimization.
1. Too large image files can take a long time to load
Large sized images, high-resolution images, and uncompressed images can drastically reduce the page load speed.
How to fix this:
→ Display size
Decide on an optimal width and height for image display on different end-user devices like desktop, laptop, tablet, smartphone.
Do not use one large image and scale the display size with width and height attributes of the IMG element. Instead, generate and store the different sized files.
Use conditional logic to serve the appropriately sized image file depending on the user device.
→ Resolution
A standard 15” laptop screen has a display capability of about 100 PPI (Pixels Per Inch) or DPI (Dots Per Inch). There’s no point in serving 300 DPI resolution images.
Standard resolution for image display on web pages is 72 PPI. 300 DPI is needed for print, not for screens. Almost all the screens range from 72 PPI to 100 PPI.
→ Image manipulation
JPEG, GIF, and PNG are the standard file formats that can compress images to take up a lesser number of bytes, thereby reducing the size of the file to be downloaded. However, these three types of files could be further optimized by reducing the unnecessary overhead that is stored with the images in the form of meta-data.
Apart from that, you can use image manipulation techniques to cut down the size of the image without getting rid of the visual details (for more information, see this wiki page.
This can be done in applications like GIMP or Adobe Photoshop for static images or using a cloud image solution for dynamic images.
2. Synchronously loading HTML, CSS, JavaScript and Images
When your web page synchronously loads all the HTML, CSS, JavaScript and images together, the initial render time can be very high.
Images can take up a significant portion of the render time.
How to fix this:
Defer loading images. Instead load them asynchronously after the necessary CSS and HTML has been rendered. The images may be placed below the fold and loaded conditionally using JavaScript when the visitor scrolls down to the relevant portion of the page.
This also reduces the number of HTTP requests during the initial page load.
3. Too many images and HTTP requests
Every image file referenced in the web page needs one connection to the server.
Too many images in the web page not only increase the load size but also can choke the connection to the server by sending more than the allowed HTTP requests.
How to fix this:
→ Reduce number of images
Use images sparingly. Keep the number to less than five.
→ Use a CDN
A CDN (Content Delivery Network) will allow you to place your files on servers distributed around the world. Image file requests from your web page go to external servers, and your server could be serving just the base HTML file.
→ Upgrade server
Shared hosting provides limited resources to each website that is sharing the server. The most important limitation is the number of simultaneous connections allowed for each site, usually less than ten.
This not only reduces the number of file requests you can make but also limits the number of simultaneous visitors who can view your website.
Upgrading to a VPS (Virtual Private Server) can help you overcome this limitation to some extent. Several vendors like DigitalOcean, UpCloud, Linode, Vultr provide basic VPS for less than $5 per month.
Can't reduce the number of images?
What to do if the number of images on your website cannot be reduced?
Unless your page content is predominantly about a particular image, it is prudent to place thumbnail image inline with content and link it to the original image.
You can also try using a low width, low-quality image or if the content permits, just a placeholder. The visitors can see the actual, bigger picture on demand.
The demand can be programmed to work with a tap or a click, or even a mouse hover with some JavaScript. Thus even though you can’t reduce the number of images, you can at least lessen the bytes downloaded.
4. Still something seems to be amiss
Is there something else you can do if after doing all the optimization discussed above, your page still doesn’t satisfy PageSpeed Insights?
https://www.datocms-assets.com/48401/1627662469-giphy-downsized.webm
Yeah, there's still hope! These last techniques should get great results:
Use correct image format: Use JPEG image where a deterioration with lossy compression for photographs is okay, instead of the lossless compression of PNG images. Check out this article on Gizmodo that describes the difference between JPEG, PNG, and GIF.
Use newer image format: Google has introduced a new image format WebP, which produces image files 25% to 34% smaller than JPEG. So using the WebP format would be better.
Use CSS3 methods: Using CSS3 methods, it is possible to replace images with gradients and shadows that create visually appealing effects.
Editor's note: If you're here for SEO purposes, keep in mind that speed is only one of many factors that impact search engine rankings. We cover other technical SEO issues here and here.
Do you have an issue not covered in this article? Please feel free to share your views in the comments.
*If you've enjoyed this post, please take a second to share it on Twitter.
