When I recently opened my personal website on a slower Internet connection than usual, I noticed that certain images wouldn't load in automatically. If I scrolled too fast, then the images would be invisible or just start to render. I quickly realized that this would lead to an unpleasant and awkward experience for anybody that may visit my site, as certain sections would simply be blank or half there. It didn't take long to pinpoint the issue, as one look at the network activity in the dev tools showed me everything that I had to know.
The icons and images I was using for my personal website came from an open source 3D icons library. The icons are high resolution and extremely detailed. I didn't originally consider the size of these icons, however, as you can see from the network activity, each icon was a few megabytes. Add a couple more icons and now the web browser is downloading around 38 megabytes of resources just to render the website as intended.
After realizing how much time it took to fully download all of the resources on my current Internet connection, it became obvious that I had to speed up the load time of my site. I utilized TinyPNG, a website meant for compressing WebP, PNG, and JPEG images. After compressing all of my icons, I was able to get the size of each image down by an average of 80%. After replacing the images, I checked the network activity once again.
The load time of my website improved significantly and to my surprise, the image quality looked exactly the same. Each image was now below 1 megabyte resulting in a total of 10 megabytes across all the resources necessary for my website.
There are more methods that I plan on looking into when it comes to optimizing my website performance. One being utilizing the WebP format rather than PNG. The issue with this method is that some older versions of browsers may not support WebP yet, however, there are solutions to switch between WebP and PNG depending on browser compatibility. Then, there is lazy loading which is a technique commonly used for only initializing the images when its necessary. For example, the images that I utilize for my contact section at the bottom of my website wouldn't be initialized until a visitor would scroll to that section.
This is a very simple way to speed up load times and I wish that I had recognized this sooner, hopefully this can help someone else as well.
Top comments (1)
I guess I should compress my PNG right now.