When we are developing, we all want our website to run as well as possible, but the thing is where do I start, or "I think my website is already sufficiently optimized", but there is always something that can be improved and with my post I hope to give you some tips that can improve the performance of your website even if it is only 2% is already a breakthrough, your users will thank you.
I want to emphasize that these are just a few things that you can improve on your website, that can make a big difference but for you it is a simple change.
The first thing you should know is that, although you have probably already noticed, google has changed its metrics that now become the core web vitals, these new metrics will be taken into account when google shows you in its search engine, the main ones to take into account are these
All these metrics will appear when you run Lighthouse with chrome, or in pageSpeed Insights
A small explanation of each of these metrics:
- LCP(Largest Contentful Paint): This metric will measure how long it takes to load the largest element of the page we are measuring, which in short measures the load.
- FID(First Input Delay): How long it takes for the page to be interactive, it is a metric that measures a good user experience.
- CLS(Cumulative Layout Shift): This metric measures the stability of your page, seeing if the elements make your page jump.
Having explained all this, we can start with some suggestions.
1 . Image optimization
Images are a big enough load for users, and even more if we use high quality images, so the best thing to do in these cases is to find a solution to prevent direct loading as soon as we enter the web.
In case you didn't know, modern browsers are implementing lazy loading natively, in this case the only change you would need to make is to put 'loading="Lazy"' inside your img tag. E.g.:
<img loading="lazy" />
If you want to know which browsers accept this new attribute you can check it out at CanIuse
In case most of your users use a browser that doesn't have this attribute implemented yet you can always use a polyfill, I recommend this Polyfill
Another tip is to always try to set a width and height for the images, and in case you are not able to know what size they will have, you can always put a wrapper that foresees the aspect ratio of your images, and thus not increase the CLS metric by avoiding that when loading the image it makes your page jump. For example in case they have an aspect ratio of 6x4 we can use padding-top: 66.6%, you can also use the css attribute aspect-ratio: 16 / 9.
2 . Optimize your web fonts
Use preload when importing your fonts, with the preload attribute you are forcing your user to load the fonts as fast as possible and avoid waiting for each font to load later.
In case you are not using system fonts, check that your fonts are loading fine in all the browsers that your users use, it is something very easy to miss, and maybe this helps you to prevent these little things. In case you see that one of your fonts is not being supported you can always use WOFF fonts as fallback to avoid these situations, WOFF has very good support in all browsers.
The problem with failing fonts, is that it can cause some CLS in your page, when loading fails makes a shift between the fonts, so is better to always have a fallback that you know is going to work, to dodge those kind of jumps.
3 . Remember to keep your code clean
It is a very obvious thing but it is always good to remember it, it is very important to keep your code as clean as possible, like removing loads of code that are not being used, modulate your css files to not make loads where you are not going to use those classes, etc.
Another thing to keep in mind is the load you are submitting to the user/server with each library you use in your page, try to keep everything as optimal as possible and if you see that you are using a library maybe too heavy for what you use it for, do some research and look for one that is lighter and more adapted to your needs.
An example of a library that I personally use and is very lightweight is GlideJs, It gives me exactly what I need with no extra dependencies, and a good API to work with.
When you have extra things to load, the TTI metric will go up as your webpage is heavier and has more trouble trying to be interactive to your user, here is a graphic that shows you how it works simplified.
4 . In case something doesn't fit, look for a creative solution!
This is something abstract, but it is always good to keep your head open to new ideas that maybe you did not know, stay active and looking for new solutions to optimize your website, ask your colleagues and surely you will end up discovering a lot of things you did not know before, not for having more years you will know everything, maybe your newly graduated colleague can bring you a new functionality that you did not know. For example something like the IntersectionObserver is something that is there but I hardly hear about it, if you did not know about this API, I leave you the post of a partner who explains very well how to use it in React: Interaction Observer
As a little reflection, while working using ReactJs we noticed that our project not being that big was taking a pretty big toll on our web's performance, the problem was coming from doing too much process that wasn't really needed from a framework on the users end, when we could use simple Vanilla Js to control those functionalities, so maybe as another tip consider not using a framework for simple things when not really needed.
Well, thank you for reading my post and I hope I have taught you a thing or two that will help you in your day to day, if you like this post maybe I will continue with some more suggestions that I can give you. Leave any suggestions you have on the comment section and I will gladly respond to them, or correct me if I'm wrong in some of my suggestions, we are all here to learn!
Top comments (0)