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.



Comments

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

WP: 8. Dynamically show post taxonomies and their data in tab format [Solved]

    Today I ran into a problem, I need to dynamically show post taxonomies and their data in tab format and found this solution. And nonetheless, It's better to fix the thing with some bunch of code rather than uploading one more bulky plugin on your website that will end up making your site heavy. Just follow the steps below and avoid heading up into any malicious or bulky plugin for this particular problem from now on forever. Step 1: Get the taxonomies terms first <?php     $terms = get_terms( array(       'taxonomy' => 'off_plan_categories',       'hide_empty' => true,     ) );     // echo '<pre>';     // print_r($terms);     // die; ?> Step 2:  Execute loop first for tab navigation <nav id="offPlanPropertyTabs" class="offplan-property-type-tabs nav nav-tabs"> <?php foreach($terms as $key => $term): ?>   <button class="nav-item nav-link <?php...

JS: Cheatsheet

   Datatypes Difference Between Var, Let and Const Functions and its types Asynchronous operations in JS