Skip to main content

Brought up your Website's Google Page Speed upto 90+

 Hi Guys, If you are running or developing a website you may encounter low Google page speed, So let's dig deeper into the technical guide of Google Page Speed Insights to ensure a good score.

Google defines page speed in two ways:

  1. How long it takes to display content above the fold.
  2. How long it takes a browser to fully render the page.

The tool has two main things:

  1. Field Data,” or the performance data
  2. Second, it measures your page performance via the Lighthouse API. This is called “Lab Data”
Field Data or Core Web Vitals :
  1. First Contentful Paint (FCP): The time it takes for the first text or image asset to load.
  2. Largest Contentful Paint (LCP): The time it takes for the largest text or image asset to load.
  3. First Input Delay (FID): The time it takes for the browser to respond to the user’s first interaction.
  4. Cumulative Layout Shift (CLS): This measures any movement of the page in the viewport.
Lab Data :
  1. Speed Index: The time it takes for the content to visually appear during page load.
  2. Time to Interactive: The time it takes for the page to become fully interactive.
  3. Total Blocking Time: The sum of time between FCP and full interactivity.



Labels:

Comments

Post a Comment

Popular posts from this blog

React: Remember me functionality with React

Want to know how can you easily integrate Remember me on your website just follow the steps below and I am sure you will find this pretty easy. There is no rocket science to crack it you just need basic code knowledge only. Step 1: Add the react-cookie in your project    npm install react-cookie Step2: Add the following code in index.js import { CookiesProvider } from "react-cookie"; ReactDOM.render(      <CookiesProvider>           <App />      </CookiesProvider>,      document.getElementById('root') ); Step3: Add the following code in your component    import React, { useState } from 'react'; import { useCookies } from 'react-cookie'; const App = () => { const [name, setName] = useState(''); const [pwd, setPwd] = useState(''); const [cookies, setCookie] = useCookies(['user']); const handle = () => {      setCooki...
Post a Comment
Read more

JS: Cheatsheet

   Datatypes Difference Between Var, Let and Const Functions and its types Asynchronous operations in JS
3 comments
Read more

React: Print Specific Section of the page with - ReactToPrint

  Want to know how can you easily print specific section of your website just follow the steps below and I am sure you will find this pretty easy. There is no rocket science to crack it you just need basic code knowledge only. Step 1: Add the ReactToPrint in your project    npm install --save react-to-print Step2: Add the following code in your component   import React, { useRef } from 'react'; import ReactToPrint from 'react-to-print'; const Example = () => {      const componentRef = useRef();      return (           <div>                <ReactToPrint                     trigger={() => <button>Print this out!</button>}                     content={() => componentRef}    ...
Post a Comment
Read more