How to make your site load faster?

https://www.canva.com/design/DAFLVzWNJBU/8m6BxFBpLZlztixMPlQO-w/edit?utm_content=DAFLVzWNJBU&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

Google has deemed page loading speed one of the top 200 things that determine your site ranking. And I think it’s easily understood why as well, I mean you would probably switch to another website if it is taking to too long to load the contents right? I know I would. So, in summary, faster page loading decreases user bounce rates and increases user interaction and retention. I think that is reason enough to focus on improving it, and also reading this article, isn’t it?

Just so you know this article isn’t only focused on the developer audience, this is for any website or application in general that you might be working on irrespective of what position you work on.

Well, now that you know why I wrote this article let’s actually get down to the “main” part of the article.

I have mentioned several measures/steps as well as some sites and plugins that you can you for faster loading of a site in a pointwise manner. Let’s get started:

1. Minify JS and CSS files

Instead of explaining I will this image, which should give you quite a good idea:

source: https://webrewrite.com/wp-content/uploads/2014/07/minify_css.png

See the difference? That’s how much space you save by minifying your files, which in turn will load your files faster.

2. Compress Images

Google recommended size for images is <100 KBS, which frankly most of the sites don’t have because they don’t really care about it much but they really should. I mean these small steps can make your websites faster and users love a faster website, right? It might not be a very big change and many people won’t notice the change, but some will and it’s your job to satisfy even the minor circle of users.

if you don’t work on every small thing to satisfy your user then it’s not a business you are running but just a personal project for self-satisfaction. ~Author

Convert Images to Next Gen format

Why do you ask? Well, let me give you an example, a 10kb webp image will have the same quality as a 100kb jpeg, so you will be saving a shocking 90% space on a simple image without any loss in quality, so it’s better to use next-gen formats for images on your site.

You can find online converts for the same, and if you’re developing your site you can use next/image insted of <img> tag.

3. Enable Lazy Loading

This might be similar to the last section, well at least relatable. First look at image below:

source: https://ionicframework.com/blog/how-to-lazy-load-in-ionic-angular/ By Ely Lucas

On this site(let’s say it is a site) the 2 images/scripts on the left and right haven’t loaded yet but on the phone image, we can see the placeholder for those, so even if the user doesn’t see the image he or she knows that the content is loading and they will be able to see after it loads.

So you apply lazy loading on large files and just load the rest of the content normally so that the user can explore the main content without waiting.

4. Enable and Optimize Browser Caching

Browser caching basically means downloading and saving a part of your website locally on your system so that you don’t have to ask for the same content again from the server if you reload.

Have you noticed that when you go on a site it might take a long time but the next time you reload the site, it will load much much faster, this is precisely because of browser caching.

But you don’t wanna save everything on your user’s system, that would slow down the user’s computer, which I imagine would be a very bad user experience, right? So you have to optimize for what you cache in the browser. You can consult some experienced developers for this as well.

5. Content Delivery Network ( CDN )

If your site has users from overseas as well, it would be a wise idea to opt for CDNs for your site, however, I won’t go into details on that because I don’t know the details about it either. But I still want you to have a direction in which you can go if you really want to do something for overseas users.

6. Disable Unnecessary Plugins

I don’t think I need to explain, but yeah many just install various plugins as they see, thinking it’s good but it can slow down your site, so try to use & keep only the required plugins on your site.

7. Regular Monitoring

I think this is the most important point of all, you should regularly keep track of your website speed and page loading speed, you can use 3rd plugins for it as well so that you know if the site suddenly has a drop in the loading speed.

Tools/Plugins:

1. Google PageSpeedInsights : I feel this is the best free tool to get a fairly detailed analysis of your website. You just need to input a URL, hit Analyze and Boom! You have the reports.

Try it out yourself!

2. Smush/Imagify: plugins for image compression, and smush also provides lazy loading functionalities.

That’s it for this article, I hope it was helpful and you can follow me on my social on my profile to see what I am up to, well, see you guys next time :)