7 SUPER EASY tips to improve web performance.
Hello peeps, I am Plxity and in today's blog, I'll be explaining a few super easy tips to improve performance score for your web application. 😄
In case you are using google fonts for your webpage, add this piece of code in the head section. This will indicate our application that resources will be fetched from Google Fonts API in the future.
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
Reference - Link
loadingattribute with value
lazyon images. It can be used to instruct the browser to defer the loading of images/iframes that are off-screen until the user scrolls near them.
<img loading="lazy" href="Link to the image (Use CDN link for faster performnce)" alt="..."/>
Reference - Link
If you are using embedded Youtube videos in your application, use this trick for faster loading of your webpage and videos.
Minify your CSS and JS files for faster loading. Remove extra whitespaces and unused code. Various tools are available for implementing this. However, you can refer to this link by Google for recommended tools.
asyncattribute in your
Deferattribute starts to download the script file in the background and starts executing once HTML is parsed.
Asyncattribute downloads the script file in the background and starts executing once is it downloaded completely. Use it as per the need in your project for faster loading. You can read more about these attributes here.
Preload your CSS file. Preload tells the browser to fetch the resources because these will be used by the application very soon. You can
preloadimages, videos, script file also. Example - How to preload CSS file.
<link rel="preload" as="style" onload="this.rel = 'stylesheet'" href='style.css'>
Thank you for reading this blog. 🎉 I hope you liked these tricks.
I'll keep updating this with more performance optimization tricks.