Dear Aficionado,
Understanding the page speed metrics is not like licking both of your ears simultaneously, but they are created by software engineers with not much thought for the regular website owner.
And who can blame them?
Measuring the page loading time is not a simple task…
There are many moving parts. Many page elements start loading later or in parallel, after you request a page, so it’s not exactly clear when it must be considered fully loaded.
That’s why the engineers of Google defined not one but four essential metrics: First Contentful Paint (FCP), Largest Contentful Paint (LCP), First Input Delay(FID), and Cumulative Layout Shift (CLS).
Let’s overview each one of them briefly:
1. First Contentful Paint (FCP)
“FCP measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page. Images, non-white <canvas> elements, and SVGs on your page are considered DOM content; anything inside an iframe isn’t included.”
source: https://web.dev/first-contentful-paint/
FCP is like how fast you can spot a dog crap on the alley. If you’re too slow, you will surely step on it and start spreading that “surprise” everywhere you go.
2. Largest Contentful Paint (LCP)
“LCP measures when the largest content element in the viewport is rendered to the screen. This approximates when the main content of the page is visible to users.”
source: https://web.dev/lighthouse-largest-contentful-paint/
LCP is like the size of your new $7000 sofa. If the sofa is too big to be carried up the stairs, you will need to get it in your apartment by other means that take more time.
3. First Input Delay (FID)
“It measures the time from when a user first interacts with a page to the time when the browser is actually able to respond to that interaction.”
source: https://web.dev/optimize-fid/
FID is like “puppy VS. old dog.” The puppies are always more energetic, more responsive. You just mumble their name, and they ecstatically run to you, ready to play all day long.
4. Cumulative Layout Shift (CLS)
“CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page.
A layout shift occurs any time a visible element changes its position from one rendered frame to the next.”
source: https://web.dev/cls/
CLS is like an earthquake. The more powerful the earthquake, the more messed becomes your home, the more time you need to get your shit together.
Next time we will talk about why improving those metrics can be very tricky, and later I will mention them again in a “WordPress context.” That means we will talk about improving them with plugins, so you will not need any development skills.
Cheers,
Sashe Vuchkov
The Code & Marketing Combinator
P.S. I spend a lot of time writing these articles, but you must know that the writing takes 1/3 of my working day on average, so I still have plenty of time for developing my SEO app.
The content marketing side of the project is of equal importance.
