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. 😄

Let's begin...

1. 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

2. If you are using images, use CDN because it responds faster to images. You can check Cloudinary, It provides some amazing features to upload your images on CDN. Reference - Link

3. Use loading attribute with value lazy on 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

4. If you are using embedded Youtube videos in your application, use this trick for faster loading of your webpage and videos.

5. 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.

6. Use defer and async attribute in your <script/> tag. Defer attribute starts to download the script file in the background and starts executing once HTML is parsed. Async attribute 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.

7. Preload your CSS file. Preload tells the browser to fetch the resources because these will be used by the application very soon. You can preload images, 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.

Follow me on Twitter, GitHub for more content.