Posts

Showing posts from January, 2023

Web Vitals for Performance - (LCP, FID, CLS, SI, TTI)

Image
  Web Vitals are a set of metrics that measure the user experience of a website. They were developed by Google and are intended to help website owners and developers improve the performance and user experience of their sites. Some important Web Vitals to know about are mentioned below : Largest Contentful Paint (LCP) : measures loading performance First Input Delay (FID) : measures interactivity Cumulative Layout Shift (CLS) : measures visual stability Time to Interactive (TTI) : measures how long it takes for a page to become interactive NOTE : These metrics are considered to be important indicators of the overall user experience and are used by Google to help rank websites in search results. Developers can use web vitals to measure and track the performance of their website and identify areas for improvement. Here are a few ways developers can use web vitals: Measure performance : Developers can use tools such as Google's Web Vitals extension for Chrome or the Lighthouse audit...

ViteJS (Module Bundlers, Build Tools)

Image
Module Bundlers ( Useful :1] Click  2] Click ) Web browsers can only understand and execute JavaScript, HTML and CSS . However, developers often use other technologies and tools like React, Sass, TypeScript, and Tailwind to improve the development process, write more maintainable code, and add additional functionality to their applications. We need a way to combine all this JS & CSS code into a single optimized javascript file, this is achieved through module bundling. A module bundler is a tool that takes all the JavaScript files in a project and combines them into a single JS file (or a few files) that can be loaded by a browser. It usually starts with an entry point file, and from there it will start looking for "import" statements and then bundles up all of code needed for that entry file. The entry point is typically defined in the config file of the bundler. The entry point is the file where the bundler starts its traversal of the application's dependencies...