Recommendations on How to Improve your Web App and Apps performance

Submitted by admin on December 21, 2016

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

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.

Async loading of scripts: Scripts can also be loaded asynchronously, which means that they will not block the loading of the page.

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.

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.

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.

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.

Increased memory usage: Unused JavaScript can also consume additional memory on the user’s device.

Maintenance issues: Unused JavaScript can also make it more difficult to maintain and update a website.

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.

Use of bundlers and modules: Using tools like webpack or Browserify to create smaller, optimized bundles of JavaScript.

Use of code splitting: Loading only the code that is needed for the current page.

Use of linting tools: Tools like ESLint can help to identify and remove any unnecessary code.

Use of performance monitoring tools: Using tools like Google Lighthouse or WebPageTest can help to identify the performance impact of unused JavaScript.

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

Here are some ways to serve images in next-gen formats:

Use of image compression tools: Tools like Squoosh or Guetzli to compress images in next-gen formats.

Use of modern web browsers: WebP and AVIF are supported by modern web browsers.

Use of server-side conversion: Convert images to next-gen formats when requested by the browser.

Use of element: Specify multiple versions of an image in different formats.

Use of CDN: Using a CDN that supports next-gen formats to serve images.

4) DEFER OFFSCREEN IMAGES

Deferring offscreen images is a technique that can be used to improve the loading performance of a website. Offscreen images are images that are not currently visible on the user’s screen.

To improve the loading performance, offscreen images can be deferred until they are needed by the user. There are several ways to defer offscreen images:

Lazy loading: A technique that defers loading images until they are needed.

Use of

Use of the loading attribute: Setting the value to “lazy” will only load the image when it is near the viewport.

Use of Intersection Observer API: Detect when an element is in the viewport to load images only then.

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: Reduces the file size of an image without any loss of quality.

Lossy compression: Reduces the file size by discarding some image data.

Vectorization: Represents an image as a set of mathematical equations.

Transform coding: Uses mathematical transformations to prepare the image data for compression.

6) REDUCE UNUSED CSS

Reducing unused CSS can help improve the performance of a web application by decreasing the amount of code that needs to be loaded and parsed. There are several techniques that can be used to reduce unused CSS:

Code refactoring: Reviewing the existing CSS code for efficiency.

Minification: Removing unnecessary characters from the CSS code.

Unused CSS removal: Using tools to automatically identify and remove unused CSS.

CSS inlining: Inlining critical CSS in the head of the HTML document.

Dynamic loading of CSS: Loading CSS required for the current view alone.

7) PROPERLY SIZE IMAGES

Properly sizing images can greatly improve the performance of a web application. Several techniques that can be used to properly size images include:

Image optimization: Compressing images to reduce file size.

Resizing images: Adjusting the dimensions of an image to match their display size.

Use of responsive images: Providing different versions of an image for different resolutions and sizes.

Use of CSS to scale images: Using CSS to scale images instead of loading multiple versions.

8) AVOID ENORMOUS NETWORK PAYLOADS

Avoiding enormous network payloads can greatly improve the performance of a web application. Several techniques include:

Minification: Removing unnecessary characters from the code.

Code splitting: Breaking up large JavaScript files into smaller chunks.

Gzip compression: Compressing data being sent over the network.

Content delivery networks (CDNs): Using a CDN to distribute content closer to users.

Data caching: Caching data on the client side.

HTTP/2 and Server Push: Optimizing the transferring of resources.

9) SERVE STATIC ASSETS WITH AN EFFICIENT CACHE POLICY

Serve static assets with an efficient cache policy can improve application performance by reducing the amount of data transferred. Techniques include:

Cache-Control header: Specifying how long the browser should cache static assets.

ETag header: Using a unique identifier for validating cached assets.

Expires header: Specifying when cached assets should be considered stale.

Content-Encoding header: Compressing assets on the server.

Content-Type header: Specifying the type of the asset.