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:
> Defer loading of non-critical resources: Non-critical resources, such as images or scripts that are not immediately needed for the page to be displayed, can be deferred until after the page has loaded. This can be done by using the “defer” attribute on script tags, or by loading images and other resources dynamically using JavaScript.
> 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.
> Optimize and Minimize the resources: Optimizing images, minimizing CSS and JavaScript, and using a Content Delivery Network (CDN) can also help to reduce the size of the resources that need to be loaded and can speed up the page load time.
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.
2) REDUCE UNUSED JAVASCRIPT
Reducing unused JavaScript is an important technique for improving the performance and maintainability of a web app. Unused JavaScript refers to code that is included in a website but is not actually needed for the page to function properly. This can occur for a variety of reasons, such as code that was written for a feature that was later removed, or code that is only needed for certain pages or users.
Including unnecessary JavaScript on a website can have several negative impacts:
> Increased page load time: The more JavaScript that needs to be downloaded and processed by the browser, the longer it will take for the page to load. This can negatively impact the user experience and lead to higher bounce rates.
> Increased memory usage: Unused JavaScript can also consume additional memory on the user’s device, which can lead to slower performance and a less responsive experience.
> Maintenance issues: Unused JavaScript can also make it more difficult to maintain and update a website, as developers may need to sift through unnecessary code to find the parts that are being used.
There are several techniques that can be used to reduce unused JavaScript:
> Code reviews: Regularly reviewing the codebase and identifying any unnecessary or outdated code that can be removed.
> Use of bundlers and modules: Using tools like webpack or Browserify, which can help to identify and eliminate unused code by creating smaller, optimized bundles of JavaScript.
> Use of code splitting: Using code splitting, which allows for the loading of only the code that is needed for the current page, can help to reduce the amount of JavaScript that needs to be loaded for the user.
> Use of linting tools: Use of linting tools like ESLint can help to identify and remove any unnecessary or redundant code from the codebase.
> Use of performance monitoring tools: Using tools like Google Lighthouse or WebPageTest can help to identify and measure the performance impact of unused JavaScript and provide guidance on how to optimize it.
By implementing these techniques and regularly reviewing and optimizing the JavaScript codebase, it is possible to reduce the amount of unused JavaScript on a website and improve its performance and maintainability.
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:
> Lazy loading: Lazy loading is a technique that defers the loading of images until they are needed by the user. This can be done using JavaScript libraries such as LazyLoad or IntersectionObserver.
> Use of <noscript> tag: The <noscript> tag can be used to specify alternative content that will be displayed if JavaScript is not available. This can be used to provide a placeholder for offscreen images, which can then be loaded as the user scrolls down the page.
> 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”.
Lazy loading: Deferring loading of images until they are needed, which can improve page load times and save bandwidth for users. This can be done using JavaScript libraries such as LazyLoad or the loading attribute in HTML.
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:
> Minification: Removing unnecessary characters, such as whitespace, from the codebase, to reduce the file size. This can be done for HTML, CSS, and JavaScript files using tools such as HTMLMinifier, UglifyJS and CSSNano.
> Code splitting: Breaking up large JavaScript files into smaller, more manageable chunks. This can be done using tools such as webpack or Rollup.
> 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.
