Posted on Oct 20 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.Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Elie - Sep 26 Ivy Chen - Sep 22 Freecodez - Oct 14 Harshal Kahar - Oct 14 Once suspended, Patricklisiecki will not be able to comment or publish posts until their suspension is removed. Once unsuspended, patricklisiecki will be able to comment and publish posts again. Once unpublished, all posts by patricklisiecki will become hidden and only accessible to themselves. If patricklisiecki is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Patrick Lisiecki. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag patricklisiecki: patricklisiecki consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging patricklisiecki will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.