Recommendations on How to Improve your Web App and Apps performance.
(Also Refer Google Site Kit plugin)
1)ELIMINATE RENDER-BLOCKING RESOURCES
Eliminating render-blocking resources is a technique that can improve the loading performance of a website. When a web page is loaded, the browser must download and process all the resources (such as images, scripts, and stylesheets) that are required for the page to be displayed correctly.
If any of these resources are “render-blocking,” it means that the browser must fully download and process them before it can begin to display the page. This can cause a delay in the time it takes for the page to become visible to the user, which can negatively impact the user experience.
To eliminate render-blocking resources, there are a few techniques that can be used:
> Async loading of scripts: Scripts can also be loaded asynchronously, which means that they will not block the loading of the page. This can be done by using the “async” attribute on script tags.
> Inline critical resources: Critical resources, such as stylesheets that are needed for the page to be displayed correctly, can be included directly in the HTML code of the page, rather than being loaded as separate files. This can be done by using “style” tags in the HTML head section.
By using these techniques, it is possible to reduce or eliminate the render-blocking resources, which can significantly improve the loading performance of a website and enhance the user experience.
> Code reviews: Regularly reviewing the codebase and identifying any unnecessary or outdated code that can be removed.
> Use of linting tools: Use of linting tools like ESLint can help to identify and remove any unnecessary or redundant code from the codebase.
3) SERVE IMAGES IN NEXT-GEN FORMATS
Serving images in next-gen formats is a technique that can significantly improve the performance of a web app. Next-gen image formats, such as WebP and AVIF, are designed to provide higher quality images with smaller file sizes compared to traditional image formats like JPEG and PNG. This can lead to faster page load times and a better user experience.
Here are some ways to serve images in next-gen formats:
> Use of image compression tools: Tools like Squoosh or Guetzli can be used to compress images in next-gen formats like WebP and AVIF. These tools can significantly reduce the file size of an image while maintaining its quality.
> Use of modern web browsers: WebP and AVIF are supported by modern web browsers such as Chrome, Firefox, and Edge, Brave, DuckDuckGo, Safari. These browsers will automatically display images in the next-gen format if they are available.
> Use of server-side conversion: Server-side conversion can be used to convert images to next-gen formats when they are requested by the browser. This can be done using a script or a library like imagemin.
> Use of <picture> element: The <picture> element can be used to specify multiple versions of an image in different formats, and the browser will choose the most appropriate one to display. This allows for the use of next-gen formats for browsers that support them, while providing fallbacks for older browsers.
> Use of CDN: Using a Content Delivery Network (CDN) that supports next-gen formats can also provide an easy way to serve images in next-gen formats to users, as the CDN will automatically convert the images to the appropriate format before delivering them to the browser.
By using these techniques, it is possible to serve images in next-gen formats which can significantly reduce the file size of images and improve the performance of a website. It’s worth noting that not all the browsers support AVIF yet, it’s recommended to check browser compatibility and provide fallback formats for older browsers.
4) DEFER OFFSCREEN IMAGES
Deferring offscreen images is a technique that can be used to improve the loading performance of a website. When a web page is loaded, all the images on the page must be downloaded and processed by the browser before they can be displayed. This can take a significant amount of time, especially if the page contains many images.
To improve the loading performance, offscreen images can be deferred until they are needed by the user. Offscreen images are images that are not currently visible on the user’s screen, either because they are below the fold or because they are hidden behind other elements on the page. Deferring these images means that they will not be downloaded and processed by the browser until the user scrolls down the page and they become visible.
There are several ways to defer offscreen images:
> Use of the loading attribute: The loading attribute can be used to specify how an image should be loaded. By setting the value of the attribute to “lazy”, the browser will only load the image when it is near to the viewport.
> Use of Intersection Observer API: Intersection Observer API can be used to detect when an element is in the viewport, and then loads the images only when they are in the viewport.
By deferring offscreen images, it is possible to reduce the number of images that need to be loaded and processed by the browser when a page is initially loaded, which can significantly improve the loading performance of a website and enhance the user experience.
It’s worth noting that Lazy loading and Intersection Observer API are not supported by all browsers yet, it’s recommended to check browser compatibility and provide a fallback method for older browsers.
5) EFFICIENTLY ENCODE IMAGES
There are various ways to efficiently encode images, depending on the desired level of compression and the intended use of the encoded image. Some common methods include:
> Lossless compression: This method reduces the file size of an image without any loss of image quality. Examples of lossless image compression formats include PNG and GIF.
> Lossy compression: This method reduces the file size of an image by discarding some of the image data. The result is a lower quality image, but the file size is significantly smaller. Examples of lossy image compression formats include JPEG and WebP.
> Vectorization: This method represents an image as a set of mathematical equations, rather than as a grid of pixels. Vector images are easily scalable and can be edited without loss of quality. Examples of vector image formats include SVG and AI
> Transform coding: This method uses mathematical transformations to decorrelate the image data, making it more amenable to compression. Examples of transform-based image compression include the discrete cosine transform (used in JPEG) and the discrete wavelet transform (used in JPEG 2000 and WebP).
> This method uses machine learning algorithms to learn the characteristics of image data and encode it in a more compact form. This method is relatively new and still being researched but it’s showing promising results.
Ultimately, the best method for encoding an image will depend on the specific requirements of the application and the trade-offs between file size and image quality that are acceptable.
6) REDUCE UNUSED CSS
Reducing unused CSS (Cascading Style Sheets) can help improve the performance of a web application by decreasing the amount of code that needs to be loaded and parsed by the browser. This can lead to faster page load times and a better user experience.
There are several techniques that can be used to reduce unused CSS:
> Code refactoring: Reviewing the existing CSS code and refactoring it to make it more efficient. This can include combining similar styles, removing unused selectors, and simplifying complex selectors.
> Minification: Removing unnecessary characters, such as whitespace, from the CSS code, to reduce the file size. Minification can be done manually or using a tool like CSSNano or UglifyCSS.
> Unused CSS removal: Using tools such as PurgeCSS, UnCSS, and Clean-CSS to automatically identify and remove unused CSS from the codebase. These tools work by analysing the HTML of the application and identifying which CSS selectors are not being used.
> CSS inlining: Inlining critical CSS in the head of the HTML document, so that the browser can start rendering the page before the full CSS has loaded. This can reduce the time it takes for the user to see the initial version of the page.
> Dynamic loading of CSS: Loading only the CSS required for the current view or route in a single-page web app. This can be done by using a preprocessor such as Sass or Less or a framework such as webpack.
By reducing the amount of unused CSS, web developers can optimize the performance of their web applications and improve the user experience.
7) PROPERLY SIZE IMAGES
Properly sizing images can greatly improve the performance of a web application by reducing the amount of data that needs to be loaded and displayed by the browser. This can lead to faster page load times and a better user experience for users.
There are several techniques that can be used to properly size images:
> Image optimization: Compressing and optimizing images to reduce their file size. This can be done manually or using tools such as ImageOptim, Kraken.io, or TinyPNG.
> Resizing images: Adjusting the dimensions of an image to match the size at which it will be displayed on the page. This can be done manually or using tools such as Photoshop or GIMP.
> Use of responsive images: Using the srcset and sizes attributes on the img tag to provide different versions of an image at different resolutions and sizes, so that the browser can select the best image for the device and viewport.
> Use of CSS to scale images: Using CSS to scale images instead of loading multiple versions of the same image at different sizes. This can be done by using the background-image property in CSS and setting the background-size property to “cover” or “contain”.
By properly sizing images, web developers can optimize the performance of their web applications and improve the user experience for users.
8) AVOID ENORMOUS NETWORK PAYLOADS
Avoiding enormous network payloads can greatly improve the performance of a web application by reducing the amount of data that needs to be transferred between the server and the client. This can lead to faster page load times and a better user experience for users.
There are several techniques that can be used to avoid enormous network payloads:
> Gzip compression: Compressing the data being sent over the network using Gzip. This can significantly reduce the size of the payload and improve page load times.
> Content delivery networks (CDNs): Using a CDN to distribute the content of a web application to users from servers that are geographically closer to them. This can reduce the time it takes for the content to reach the user and improve page load times.
> Data caching: Caching the data on the client-side, so that it doesn’t have to be loaded again from the server every time the user visits the page. This can be done using tools such as Service Workers or Application Cache.
> HTTP/2 and Server Push: HTTP/2 allows multiple resources to be transferred over a single connection and Server push allows server to send resources to the client without waiting for a request.
By avoiding enormous network payloads, web developers can optimize the performance of their web applications and improve the user experience for users.
9) SERVE STATIC ASSETS WITH AN EFFICIENT CACHE POLICY
Serve static assets with an efficient cache policy can greatly improve the performance of a web application by reducing the amount of data that needs to be transferred between the server and the client. This can lead to faster page load times and a better user experience for users.
There are several techniques that can be used to serve static assets with an efficient cache policy:
> Cache-Control header: Using the Cache-Control header to specify how long the browser should cache the static assets. This can be done by setting the max-age directive, which tells the browser how long it should keep the asset in cache before checking for a new version.
> ETag header: Using the ETag header to validate the cache. The ETag is a unique identifier that is generated for each version of the asset. When the browser requests the asset, it sends the ETag of the cached version. If the ETag of the cached version matches the ETag of the version on the server, the browser can use the cached version.
> Expires header: Using the Expires header to specify a date and time after which the cached asset should be considered stale. This is an older method and not recommended as it doesn’t consider the user’s time and date.
> Content-Encoding header: Using the Content-Encoding header to specify the encoding used for the asset. This can be used to compress the asset on the server and reduce the size of the payload.
> Content-Type header: Using the Content-Type header to specify the type of the asset. This can be used to indicate the browser what type of asset it is, so the browser can handle it correctly.
By serving static assets with an efficient cache policy, web and app developers can optimize the performance of their web applications and improve the user experience for users. It’s also important to keep in mind to test the caching strategy with different browsers and devices, and to invalidate the cache when the assets are updated.