Why Does My Website Run Very Slowly, and How Do I Optimize It for Free?
As a web developer, this is the type of question we often ask our team, or even ourselves.
In web development, a website that is time-consuming to access is often considered a curse to the developer. As of now, I still believe that.
There’s no need to worry, though! As web developers, who are responsible for our own creations, there are several things we can do about this situation. Based on my experience in optimizing my personal website in the past few weeks, here are the takeaways:
Use image wisely based on your needs
There’s a root cause to slow websites that we often overlook, do you have any guesses?
Most of us already have the answer, and it is the nonoptimal use of asset images. We often go overkill on our choice of images to put on our websites. Sure, the higher quality image is better, but that’s not always the case in web development.
Every image on our website doesn’t need to be made up of thousands of pixels. Sure, a 4000x2000px image looks good, but it’s much better if we choose an image wisely based on our needed criteria. Because the bigger the dimension of the image, the longer the loading times are.
Let’s say we need a 200x100px image for one of our website’s sections, then it would be better to use an image of that size instead of going for a bigger one.
We can insist on going overkill by choosing a bigger, higher-quality image, but it will only increase the load time of our website since it needs to load all the image assets on the web. I don’t think it’s a wise decision because eventually, no matter how big the dimensions of our image are, it will be resized by our website with the size we have predefined inside the CSS.
Compress your image without losing its quality
If we’re in a situation where we have resized the images on our website, and yet the size is still too large, is there anything can we do?
Don’t get flustered! There’s a technology called Lossless Image Compression. According to imagify.io, it means:
Lossless compression means that you reduce the size of an image without any quality loss.
Moreover, there are a bunch of free tools out there that we can use to do this Lossless compression. The one I often use is kraken.io.
Minify this, minify that, minify everything
With these tools, we can maintain the quality of the images on our website despite the smaller size of the image because it went through lossless processing.
Have you ever seen Google or Facebook’s source code through the Inspect Element on your browser? Do you understand at a glance the meaning of the code? I personally don’t.
This is because they minified their code in order to minimize the files of the codes. According to Wikipedia, Minification generally means:
The process of removing all unnecessary characters from the source code of interpreted programming languages or markup languages without changing its functionality.
To minify code on our own, we can use the tools easily found in the internet or if we’ve been using modern frameworks, usually the framework’s bundler will automatically do it during deployment to production.
Cloud Delivery Network (CDN) is a must
Last but not least, the use of CDN.
According to Cloudflare, CDN generally means
A content delivery network (CDN) refers to a geographically distributed group of servers which work together to provide fast delivery of Internet content.
The use of CDN is beneficial for users that don’t belong in the same demography as the server does, as CDN can help us distribute our website’s contents effectively. It also helps to minimize delays in loading web page content by reducing the physical distance between the server and the user. This helps users around the world view the same high-quality content without slow loading times.
The result of using CDN for the past few weeks
For the CDN itself, we can use Cloudflare for free. This service can also be easily integrated with our website.
Here is what I got after using the above solution:
Hey, there! If you’re still interested in optimizing your personal website, or any web development topics just let me know through the comment section and I will gladly make dedicated content that discusses web optimization from zero to master. Feel free to reach out to me.
References:
https://gtmetrix.com/optimize-images.html
https://developers.google.com/speed/docs/insights/OptimizeImages
