Tips To Optimization and Improving Site Speed in 2024

Optamize Google page speed

Why Website Speed Optimization Is Important

It is very important to optimize and improve website speed to provide best user experience and to load website very fast on the browser. Major search engine like google or bing consider page speed to be very important to rank website on their search engine.

If the website speed is slow and takes time to load on the browser, then it may effect the user experience and also may hang the browser. Additionally, most of the users nowadays are on mobile with 2g ,3g network so we need page to be very light to load on mobile browser.

Detailed Steps On How We Can Increase A Website Speed

Step 1 : Analyze Current Page Speed Of the website

Run your current website in google chrome website and inspect by opening developer console as shown in image below, Click on light house tab, for more information you can also go through crome referance link how to open lighthouse tab
https://developer.chrome.com/docs/lighthouse/overview

Now Select the option on which device (mobile/desktop) you want to perform performance test and from gatagories choose Performance as shown in image below

Now click on Analyze page speed button shown below

It Will take a while to analyze page speed , below is the refrence what we get after page speed analyze

You can see above score is 77% it is showing yellow. There are three ranges: Green (Good speed), Yellow (Need to improve) and Red (Very low speed)

Now we will go step by step to understand the metrics.

First Contentful Paint (FCP)
Largest Cintentful Paint (LCP)
Total Blocking Time (TBT)
Cumulative Layout Shift (CLS)
Speed Index (SI)


Please click on above link to understand more about these metrics.


Further reading

  • React UseEffect | simplifyScript

    Understanding the useEffect hook in React

    In this article, we will learn about another React hook called useEffect(), through this article you will be able to understand what is react useEffect Hook and how to use useEffect() hook in react, this is most communally used hook after useState() hook, we mostly use this hook in every component on react now first […]
  • React useState function

    How to Use useState Hook in React Application

     In a React application, normal vanilla JavaScript may not work for some concepts. For example, if I want to toggle a class on a button click or add and remove classes, I might need to show a popup on the website. This can be easily achieved in vanilla JavaScript using the element.classList.toggle(“newClass”) method, allowing us to add […]
  • javascript DOm manipulation - simplifyscript

    What is DOM manipulation in javascript 

    In this article, we will explore JavaScript DOM manipulation, a key feature of JavaScript that allows developers to modify the Document Object Model (DOM) of a webpage. DOM manipulation enables you to dynamically alter the content and structure of HTML documents. To grasp this concept thoroughly, we’ll start by defining what the DOM is and […]