How to Improve Your Website Performance.
Introduction
So first lets talk about why do we actually need a performed website ?. Of course its better for the user experience. If the user click on the link and then it just pops up instead of having to load, that considered very important factor for performing well in SEO. So if u have a blog or business website that should perform well on SEO, then performance is the most and important thing- to be consider.
In my experience these are very typical complaints that usually many people find on the speed inside test if u don’t have a very performance website.
So I am going to explain some points what the issues and of course what is solutions to figuring out those issues are. U can also have a very performance website and after that, you will have a very good SEO performance website. Now let's go into the first issue we have faced a lot with our website or the websites of clients.
- Defer off-screen Images And Serve Images in Next-Gen Formats.
In the above images, we have three of the complaints that google has it's just about images deferring off-screen images, serving images in next-gen formats, and properly sizing images. So to properly size images you can either upload already good images or small images,s not more than 50 kilobytes. If it's kind of those hero header images, it can be 120 kilobytes but it should not be more than that. If you want to automate that process you can use services like Cloudinary or imgix which will resize and refit your images or your images are performing on your website.
The other things with deferring off-screen images are actually if you have images below the above fold, so the above fold is the section of the website you see when you open it up but when u scroll those images down below don’t have to be preloaded. So that’s what deferred off-screen images mean. In other words lazy loading images. If you work with next js, next js version 10 has a very good next image component.
Example:
Now, what are the benefits of the next/image component?
Lazy loading:
Lazy loading means only loading a particular chunk of an app when it is only visible in the client viewport. The good thing is next/image component lazy loads the image by default which automatically decreases the loading time and u can also set the priority={true} if u don't want lazy load an image. It will turn it off and you can also add a blurred placeholder for any image using the placeholder prop.
2. Preload Key Requests And Eliminate Render-Blocking Resources.
Mostly this issue has to do with the fonts usually how the fonts are actually loaded is quite complex but the solution is very easy. Next js they feature kind of a package or they are related to the package you can download from npm which is called font source. You can download fonts and use in your repository and load them from your projects instead of calling an API like it is with google fonts. If you encounter that issue go to the font source download your fonts there and then this issue should be gone, this will reduce a couple of seconds of this load time just with that little trick.
If you use next js try to use static generated pages like getStaticProps, getServerSideProps, or another method of next js. Server-side rendering (SSR) is the technique that is used to render your initial HTML of a web page on the server before delivering it to the browser. Next.js provide an async function named getServerSideProps which can be used to render any page on the server and return static HTML to the client.
Example:
If u host your website try to do that on CDN. It is good to host your website on vercel, they take care of everything there. So it's good and the issue does not appear. But if you self-host, make sure that you try to host on the CDN if you have static websites or static pages. Other things if u use next js don’t do crazy server-side rendering stuff in the server-side render methods like getStaticProps or getServerSideProps of next js.
Example:
3. Remove Unused JavaScript:
This is a very important topic here. Have a good concept of the website or the project you are building. So no crazy features which is also like the good thing about that if you don’t have crazy features on your website it's not just good for performance but also good for user experience and developer experience as well. So if you have lightweight minimalistic websites that are in the most categories that are the best you can do anyways. So try to have that with the great concepts and if you then have the great concepts you have to really think about what are the dependencies of your project.
Example:
Make sure that you have the concepts of your websites ready you really need a design system or can u do a vanilla CSS or something very lightweight like tailwind that is very important. If u think of using bootstrap or chakra UI or something like that they have tree-shaking so they only load in components that we generally use in our code of course that is true but sometimes it doesn’t work. So don’t only depend on tree-shaking because sometime tree-shaking doesn’t work and then debugging where exactly the issues are is a big hassle. So in the beginning try not to use packages and really think about if you really want to use packages if you really need them that is the most important part of the remove unusual JavaScript with the next js application.
Another thing is also that you don’t load some crazy heavy javascript package or script. So if u use something like google tag manager or Google Analytics, they will be performing well as well but especially ads are notoriously bad for the performance of your website and other heavy packages as well. Maybe you have some 3D animation with javascript or something like that.
If you have heavy packages like that then consider using dynamic imports which is supported by next.js. when our application loads, all its components, and the CSS load that is required by the application in the initial load. Dynamic import allows you to split your code into small chunks and load them when needed. This will reduce the initial load time and overall bundle size of the application. While using dynamic imports you have to be careful how to do that to not get some weird bugs but surely that’s an option.
Example:
Conclusion
So that is pretty much it so has a bulletproof concept and really just takes in what you need. It’s not only good for performance but also for user experience and the developer experience as well. Another thing is to make sure how you handle your media images and videos that you defer them if they are below the first fault and also that they are correctly sized for your websites. After all, you can really say as a developer you have done whatever you can to help these websites to perform well.
