⚡ Every Web Developer should know what the Largest Contentful Paint is
The Largest Contentful Paint is one of the metrics to measure user's page experience on your website. It is a Core Web Vital and crucial for SEO.
👇 Learn more about the LCP and how to improve it
The Largest Contentful Paint is one of the metrics to measure user's page experience on your website. It is a Core Web Vital and crucial for SEO.
👇 Learn more about the LCP and how to improve it
▶️ What is the Largest Contentful Paint (LCP)?
The LCP is a Core Web Vital focusing on the loading experience.
It measures the time until the largest element above the fold is rendered for your users. This is typical:
- an image
- a video
- a background image
- a headline
The LCP is a Core Web Vital focusing on the loading experience.
It measures the time until the largest element above the fold is rendered for your users. This is typical:
- an image
- a video
- a background image
- a headline
▶️ Why is the LCP important?
The LCP is a Core Web Vital and has become crucial for modern SEO.
The user page experience on your website has become a factor in the googles algorithm to determine your website page rank.
The LCP is one of the metrics for the page experience.
The LCP is a Core Web Vital and has become crucial for modern SEO.
The user page experience on your website has become a factor in the googles algorithm to determine your website page rank.
The LCP is one of the metrics for the page experience.
▶️ How is the LCP measured?
The LCP does observe all elements above the fold until the page is interactive.
Usually, it is starting with a small element and is updated as soon as a new bigger element is loaded.
Once the page is interactive, the LCP will no longer update.
👇
The LCP does observe all elements above the fold until the page is interactive.
Usually, it is starting with a small element and is updated as soon as a new bigger element is loaded.
Once the page is interactive, the LCP will no longer update.
👇
It compares the element content box to determine whether a new element is larger or not.
The content box of an element does not contain the element margin, padding, or border.
If an element is clipped, it also ignores the hidden element parts.
The content box of an element does not contain the element margin, padding, or border.
If an element is clipped, it also ignores the hidden element parts.
▶️ What are the timings for a good LCP?️
The LCP is typical of the biggest element.
It is crucial to load fast to avoid blank space.
✅ You are outstanding with an LCP below 2.5 seconds. ⚡
⚠️ Being below 4 seconds may be adjusted.
🔴 More than 4 seconds should be fixed.
The LCP is typical of the biggest element.
It is crucial to load fast to avoid blank space.
✅ You are outstanding with an LCP below 2.5 seconds. ⚡
⚠️ Being below 4 seconds may be adjusted.
🔴 More than 4 seconds should be fixed.
▶️ What are the reasons for a poor LCP?
The most common reasons for a poor LCP are:
1️⃣ Slow server response times
2️⃣ Render-blocking JS and CSS
3️⃣ Slow resource load times
4️⃣ Client-side rendering
They can be easily improved and adjusted.
👇 Let's have a look!.
The most common reasons for a poor LCP are:
1️⃣ Slow server response times
2️⃣ Render-blocking JS and CSS
3️⃣ Slow resource load times
4️⃣ Client-side rendering
They can be easily improved and adjusted.
👇 Let's have a look!.
1️⃣ Slow server response times
An indicator for a slow response time is a poor Time to First Byte (TTFB).
👉 If you encounter this issue, make sure there is no blocking code or query on your site.
Usually, expensive database queries or complex calculations can cause this.
An indicator for a slow response time is a poor Time to First Byte (TTFB).
👉 If you encounter this issue, make sure there is no blocking code or query on your site.
Usually, expensive database queries or complex calculations can cause this.
👉 Modern frameworks may also slow down your server response times.
For example, a page needs to be created on the server.
If you use solutions like React, you may want to change into a static serving if you can.
For example, a page needs to be created on the server.
If you use solutions like React, you may want to change into a static serving if you can.
👉 If you are not using a CDN, use it! It can greatly help to improve your loading time.
👉 If you use third-party connections, make sure you are preconnect to these URLs! This can also reduce your load time.
I have made a thread on that topic:
👉 If you use third-party connections, make sure you are preconnect to these URLs! This can also reduce your load time.
I have made a thread on that topic:
https://twitter.com/michaelketzer/status/1425857286233280512.
2️⃣ Render-blocking CSS/JS
CSS or JS can block rendering as the load time and parse time may take too long.
👇 Here is how you can reduce render-blocking CSS
CSS or JS can block rendering as the load time and parse time may take too long.
👇 Here is how you can reduce render-blocking CSS
👉 Minify your CSS
You usually use white spaces, line breaks, and comments in your CSS for readability and editability.
Minifying will remove these and reduce the stylesheet size.
I have made a thread on that:
You usually use white spaces, line breaks, and comments in your CSS for readability and editability.
Minifying will remove these and reduce the stylesheet size.
I have made a thread on that:
https://twitter.com/michaelketzer/status/1422450312275767307
👉 Use critical CSS and defer non-critical CSS
Basically, this means you want to inline critical CSS for your content above the fold and defer any CSS below the fold and not required for the current user's view.
I have made a thread about that:
Basically, this means you want to inline critical CSS for your content above the fold and defer any CSS below the fold and not required for the current user's view.
I have made a thread about that:
https://twitter.com/michaelketzer/status/1422081939528421380
👉 Render-blocking JavaScript
Make sure to minify your JS, load only critical JS, and defer any non-critical JS not used on the current page.
I have made a thread on deferring loading and how it works:
Make sure to minify your JS, load only critical JS, and defer any non-critical JS not used on the current page.
I have made a thread on deferring loading and how it works:
https://twitter.com/michaelketzer/status/1425015754928410633
3️⃣ Slow resource load times
Unoptimized resources on your webpage can also cause a poor LCP.
As mostly your media are the LCP, you want to ensure that your resources always perform well on your LCP.
Some tips and threads on how to optimize media loading:
Unoptimized resources on your webpage can also cause a poor LCP.
As mostly your media are the LCP, you want to ensure that your resources always perform well on your LCP.
Some tips and threads on how to optimize media loading:
👉 Use next-gen image formats
Next-gen image formats have better compression and keeping the quality of your images.
It reduces the network payload and will help to display your website a lot faster.
I have made a thread regarding next-gen images:
Next-gen image formats have better compression and keeping the quality of your images.
It reduces the network payload and will help to display your website a lot faster.
I have made a thread regarding next-gen images:
https://twitter.com/michaelketzer/status/1422812972817260547
👉 Use scaled images
Scaled images will always serve images that are matching into the current position and size.
There is no need to load a 1080p image on a 200px times 200px element.
I have made a thread regarding that topic:
Scaled images will always serve images that are matching into the current position and size.
There is no need to load a 1080p image on a 200px times 200px element.
I have made a thread regarding that topic:
https://twitter.com/michaelketzer/status/1424651837848834049
👉 Use different video formats
Using specific video formats can also greatly improve the slow loading time as the compression is mostly a lot better. It also reduces the file size in most cases.
Check out my thread regarding video formats:
Using specific video formats can also greatly improve the slow loading time as the compression is mostly a lot better. It also reduces the file size in most cases.
Check out my thread regarding video formats:
https://twitter.com/michaelketzer/status/1423213338511781889
4️⃣ Client-side rendering
Many websites are using client-side JavaScript logic to render your page.
Whether it is React, Vue or Angular.
Using server-side rendering can greatly improve the response time. At its best, you should use static file generation!
Many websites are using client-side JavaScript logic to render your page.
Whether it is React, Vue or Angular.
Using server-side rendering can greatly improve the response time. At its best, you should use static file generation!
▶️ How can you measure your LCP?
A small list of known speed tooling websites, including Core Web Vitals:
- web dev: web.dev/measure/
- Page speed insight: developers.google.com/speed/pagespee…
- GTmetrix: gtmetrix.com
- WebPageTest: webpagetest.org/webvitals
A small list of known speed tooling websites, including Core Web Vitals:
- web dev: web.dev/measure/
- Page speed insight: developers.google.com/speed/pagespee…
- GTmetrix: gtmetrix.com
- WebPageTest: webpagetest.org/webvitals
▶️ What are Web Vitals?
Web Vitals are metrics by google that can be measured on every website. They have become crucial for SEO this year. Poor Web Vital metrics should be fixed!
I have made a thread regarding Web Vitals:
Web Vitals are metrics by google that can be measured on every website. They have become crucial for SEO this year. Poor Web Vital metrics should be fixed!
I have made a thread regarding Web Vitals:
https://twitter.com/michaelketzer/status/1426101631196835840
That was my second thread regarding Web Vitals.
Tomorrow I will publish a breakdown on the second Core Web Vital.
It will be the First Input Delay.
Tomorrow I will publish a breakdown on the second Core Web Vital.
It will be the First Input Delay.
✅ Done
If you found this thread useful, consider following me @michaelketzer and retweet the first tweet! 🙏
Did I miss something? Please let me know 🙏
If you found this thread useful, consider following me @michaelketzer and retweet the first tweet! 🙏
Did I miss something? Please let me know 🙏
• • •
Missing some Tweet in this thread? You can try to
force a refresh
