I Struggled with Page Speed Optimization until I Found Out about These oncepts

My Struggles in Page Optimization: How I Overcame It

I was tasked with page optimization for a couple of pages. Page optimization is quite important if you want your customers to stay on your site, and it also improves SEO Rankings, Google's research has shown that 53% of mobile sites are abandoned altogether if they take longer than 3 seconds to load.

To avail all such benefits, I processed my page into Google PageSpeed Insights. The scores were bad, and there were a lot of unknown terms crowded around the page.

All these new terms were very alien to me and I didn't know what to do with it.

Many people often face this situation, People don't know what these new sets of words mean. However, I realized that unlocking these words gave a lot of new meaning to my pagespeed diagnostics.

So, in this article, I will show you the terms that you need to know to get back up on your feet on this Pagespeed optimization journey.

The 5 MUST-LEARN Terms I Used to Aid My Understanding

When we run our page through the Pagespeed analytics tool, we see the following analytics.

• First Contentful Paint
• Largest Contentful Paint
• Total Blocking time
• Cumulative Layout Shift
• Speed Index

It's important to know these terms, as they will help you figure out page performance.
Here is an easy way to remember it: FLTCS, pronounced "Flat-Tics."

Let's go through FLTCS one by one.

1. Waiting Too Long for Initial Content to Appear (FCP)

Imagine you’re at a theatre for a play. The First Contentful Paint (FCP) is like the moment when the stage lights come on and you can see the first actor or prop.

It’s the first sign that the show is starting and something meaningful is appearing for you to see. If the lights come on quickly, you know the performance is underway, and you're ready to enjoy the show.

Similarly, on a webpage, FCP is about how quickly you see the first piece of content after you arrive. If this happens fast, it means your page is engaging users right away.

In the above Image, you can see that the FCP happens in the second frame when the content is loaded.

We can break this Term into different pieces, to understand better.

First: FCP marks the first appearance of visible content on a webpage after you navigate to it.

Contentful: It signifies when meaningful content, such as text, images, or graphics, becomes visible to the user.

Paint: Similar to an artist starting to paint on a canvas, FCP is the moment when the browser starts rendering and displaying the initial elements of the webpage.

How to Find FCP

1. Go to the site from where you want to view the FCP
2. Right-click and press "Inspect element"
3. Go to the performances tab and click Reload
4. Here the First Contentful paint is 259.07ms, which is good.

Improving FCP

• One issue that's particularly important for FCP is font load time, if its a custom font.
• Custom Fonts are often large files with slow load times, Some browsers hide text until the font loads causing a flash of invisible text.

FCP: At a Glance

• Definition: FCP is when the first text or image appears on a webpage.
• Metric: It measures how quickly content appears after a user visits.
• Includes: Text, images, SVGs, and non-white canvas elements.
• Excludes: Content inside iframes.
• Purpose: Indicates how fast visitors see actual content.
• Optimal Time: Aim for an FCP of 1.8 seconds or less for a good user experience.

2. Waiting Too Much for the Content That Matters Most (LCP)

Think of LCP as the moment when the biggest and most important sign in a new store is fully visible as you walk by.

Imagine you are passing a store, and you are eagerly waiting to see the biggest sign that tells you what the store is all about. If it takes too long for that big sign to appear, you might get frustrated and lose interest.

To keep shoppers engaged, the store should ensure that the big sign is up and visible quickly.

Similarly on a webpage, the Largest Contentful Paint is about making sure the biggest and most important part of your content is fully loaded and visible to users as soon as possible.

How to Find the LCP?

1. Go to the desired page, right click and click "Inspect element"
2. Click the record button
3. Reload the page
4. Under the timing section there is a button called LCP
5. Click the LCP Button and the Largest Contentful Paint will be highlighted on the screen

What Causes a Low LCP Score?

• Slow server response times
• Render blocking Javascript and CSS
  • These are files that control how your webpage looks and behaves. If they're not optimized or they load before the main content, they can delay the browser from being able to render the important stuff users want to see first.
  • For example: Imagine a webpage with a to-do list, but the button to add new items is controlled by a JavaScript file.
  • If that JavaScript is render-blocking, the browser waits to download and understand the script before showing the list or the button.
• Slow Resource Load Times
  • Contents like large images or videos can take a long time to load. This can slow down the LCP if they are the biggest piece of content on the page.
• Client side rendering
  • This is when the browser downloads and processes some of the page's code before it can start rendering anything.

LCP: At a Glance

• Definition: LCP measures when the largest content element visible on your screen is fully rendered.
• Metric: It refers to significant content elements such as images, videos, or blocks of text that are crucial for the user experience.
• Includes: img elements, image inside SVG, video elements, elements with background images loaded using url(), large blocks of text, block-level elements.
• Excludes: Content outside the viewport or images that haven't yet loaded.
• Purpose: Indicates when the browser finishes rendering the largest content element in the viewport, making it fully visible to the user.
• Optimal Time: Aim for an LCP of 2.5 seconds or less for a good user experience. An LCP between 2.5 and 4 seconds means the website needs improvement, and an LCP of more than 4 seconds indicates poor performance requiring significant improvement.

Read the remaining from our full article

The above is the detailed content of I Struggled with Page Speed Optimization until I Found Out about These oncepts. For more information, please follow other related articles on the PHP Chinese website!