I Struggled with Page Speed Optimization until I Found Out about These 5 Concepts

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.

3. Getting Blocked from Interacting with the Page (TBT)

Imagine you're at a coffee shop, and there’s a long line of people waiting for their drinks. Each time someone places an order, it takes a bit of time for the coffee maker to prepare the drink.

Now, imagine each drink takes more than 50 seconds to make. As each person waits for their drink, the line gets longer, and everyone has to wait more to place their order.

To keep things moving smoothly, you want to make sure each drink order takes less than 50 seconds. If the total extra waiting time (from all the long drink orders) stays under 200 seconds, then customers will stay happy because they won’t have to wait too long overall.

In this analogy:

• Each drink is like a task on your webpage.
• The line represents the blocking time—how long it takes before users can interact with the page.
• The customers are like user inputs that are delayed because of the long tasks.

How to view the Blocking time in your page?

1. Right-click the page from where you want to see the blocking time
2. Click Inspect element
3. Go to the performance tab
4. Press reload
5. Go to the main section, The rectangle which has red colour in the top-right corner is a long task that contributes to the total blocking time
   

Example of How TBT Is Calculated

• In the above example, you can see there are 5 tasks
• The task durations are
  • 200ms
  • 100ms
  • 50ms
  • 30ms
  • 155ms
• We know that long tasks are something which is more than 50ms, Which is considered blocking time.
• In the figure, the purple part indicates the excess time, which is the blocking time
• The blocking time for each task are
  • 150ms (50ms + 150ms = 200ms)
  • 50ms (50ms + 50ms = 100ms)
  • 0ms (Doesnt exceed 50ms)
  • 0ms (Doesnt exceed 50ms)
  • 105ms (50ms + 105ms = 155ms)
• When adding these values together, we get 150+50+0+0+105 = 305ms
• 305ms is the total blocking time

TBT: At a Glance

• Definition: TBT measures the cumulative duration during which Long Tasks (tasks longer than 50ms) delay the main thread and impact the responsiveness of a webpage.
• Metric: It refers to periods when Long Tasks prevent the main thread from responding to user input promptly, causing delays in interaction.
• Purpose: Indicates how much time is blocked by long tasks, affecting the interactivity of a webpage.
• Optimal Time: Aim for a total blocking time of 200 milliseconds or less when tested on average mobile hardware.
• Main Thread: This is where the browser processes tasks like parsing HTML, constructing the DOM, applying CSS styles, and executing JavaScript.

4. Avoid People from Losing Their Place in Webpages (CLS)

You can think of Cumulative Layout shift(CLS) as rearranging furniture in a room while people are inside.

Imagine you are at a party, and the host keeps moving the chairs and tables unexpectedly.

Every time you go to sit down or reach for a drink, you find that things have shifted, which is quite frustrating.

To avoid such situations, the host should set the room properly in advance and avoid making such sudden changes.

Similarly, a good CLS score means your webpage elements stay put. This provides a good experience for the users.

If the elements keep moving around, it would be a very unpleasant experience for the users.

In the above image you can observe, that a Layout shift has occurred which causes the text to be displaced.

Common causes of poor CLS

• Images without dimensions.
• Ads, embeds, and iframes without dimensions.
• Dynamically injected content such as ads, embeds, and iframes without dimensions.
• Web fonts

CLS: At a Glance

• Definition: CLS measures the total accumulation of unexpected layout shifts during a webpage's lifespan.
• Metric: It refers to visible elements moving unexpectedly between rendered frames, which can frustrate users by causing content to jump.
• Unexpected: These shifts occur without user interaction and can affect the overall user experience negatively.
• Measurement: CLS considers the cumulative impact of all shifts, not just the largest single shift. A higher CLS score indicates a more disruptive browsing experience.
• Optimal Score: Aim for a CLS score of 0.1 or less to provide a good user experience. The explanation for why such a number is used is explained in this article

5. Ability to See the Entire Page Quickly (Speed Index)

You can think of Speed Index as how fast you can set up a stage for a play.

The actors, props and scenery represent the visible content.
The quicker you set everything up, the sooner your audience can enjoy the show.

A good speed index means your stage is ready quickly, which keeps your audience happy and engaged.

Similarly, if your speed index is bad, it means the stage takes too long to set up. This will make the audience impatient and lose interest quickly.

Speed index: At a glance

• Definition: Speed Index shows how quickly the contents of a page are visibly populated.
• Metric: It measures how quickly content is visually displayed during page load.
• Tool: Lighthouse, an open-source tool developed by Google, is used for such measurements.
• Method: Lighthouse captures a video of the page loading in the browser, computes the visual progression between frames, and uses the Speedline Node.js module to generate the Speed Index score.
• Optimal Score: Aim for a Speed Index score under 3.4 seconds for the best performance. Scores over 5.8 seconds indicate poor performance.
• Benchmarking: Lighthouse determines your Speed Index score by comparing it to the speed indices of real websites, based on data from the HTTP Archive.

Getting the Learnings Applied: Tackling Performance Issues on My Pages

Case 1: Hexmos Journal

For my first case, I was processing my Engineering Lessons Blog into PageSpeed Analytics.

It gave an initial performance score of 52.

One of the significant Diagnostic that I saw is the Largest Contentful Paint element.

It took more time to load, causing the score to come down.
The LCP here is the cover image for the blog, so I thought of compressing the PNG from 1.38 mb to 500kb.

This is the result.

It displays a slight increase in the numbers. But not anything significant.

Another suggestion is to change the format of the image to a next-gen format like WebP.
Conversion of the cover image to WebP compressed it further, but still the performance was not improving.

The rest of the suggestions included the main thread, 3rd party script and layout shifts. The blog was powered by Ghost, so I didn't have much control over it. So I decided to apply the learnings to another use case.

Case 2: Hexmos Feedback

My second use case is the Hexmos Feedback page, When I processed it through page speed analytics, this was the result.

The score is pretty bad, Lets check the diagnostics.

From the diagnostics we can see that, we have a YouTube embed running on our page. This YouTube embed is having a large blocking time. It suggests using a facade, so we can load the embed when loading.

A facade allows us to show a simplified preview of certain components without fully loading them. Users can interact with the facade to access and view the actual content.

After implementing the facade, these are the results.

As you can see, the page speed significantly increased after this simple change!

Conclusion

Pagespeed analytics metrics are often an underrated set of terms that people overlook. Knowing these terms well and integrating such vocabulary into your workplace will aid the development of your products more since you are constantly thinking about page performance.

Even if we know these terms, practically applying them is equally important, Since some of these problems will be difficult to tackle. If more practice is done, we will be able to improve the page speed by a huge number.