Points to be considered while optimizing the performance of a webpage:
- Images Optimisation
- Fonts Optimisation
- Optimizing CSS and JS
Image Optimisation
- Choose the Right File Format (PNG, JPG, Webp, SVG, etc.)
- Compress the image appropriately
- Use appropriate dimensions for the image, also specify height and width attributes for the image
- Use Lazy loading for below-the-fold images. (You can use different 3rd party libraries like Unveil, lazysizes, etc.)
To achieve the above steps(except lazyloading) you can use the Cloudinary service. It will automatically serve the right file format and compress the image and serve the right quality based on the device.
Fonts Optimisation
- Use woff2 file format.
- Use font display swap CSS property in the font face to ensure that fonts remain visible while the fonts get downloaded
- Import only required fonts.
- preconnect the font domain
<link rel="preconnect" href="https://fonts.googleapis.com">
- preload the fonts as style as shown below:
<link rel="preload" href="https://use.typekit.net/gwu7gbd.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
- Use only the required glyphs while loading the fonts. For example, I am using only alphabets on my website, then I can load the fonts as shown below:
- It's better to use the required Unicodes only while loading the fonts.
For more details on best practices, visit this web.dev artcile
Optimizing CSS
- Remove Unused CSS. You can refer to this article to know about the tools that can be helpful for removing unused CSS,
- Extract Critical CSS and inline the crititical CSS inside the
<head>tag. Refer to this article to know about the tools that help you to identify the critcial CSS. - Defer the Non Critical CSS. Refer to this article to know how to defer the unused CSS.
Optimizing JS
-
Defer unused JavaScript
- Code-split your bundle into multiple chunks
- Defer any non-critical JavaScript, including third-party scripts, using
asyncordefer
Minimize unused polyfills
Use a web worker
For More details on optimizing JS, you can refer to this article.
Top comments (0)