⚡ 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
▶️ 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
▶️ 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.
▶️ 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.
👇
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.
▶️ 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.
▶️ 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!.
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.
👉 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.
👉 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:
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.
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.
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!
🔍 Every Front-End Developer should know the basics of how Google search works
Suppose you develop a Website you most likely want users to find your page. Optimize your page for Google ensures the correct audience will find your page.
↓ Learn how Google search works
The goal of a website is to be found in Google.
To show your website at Google, it goes through these 3 steps:
🔹 Crawling
🔹 Indexing
🔹 Serving
In this thread, we will take a closer look at all the steps.
{ 1 / 12 }
🔹 Crawling
Crawling is the first step. This is about finding your website in the first place.
Some pages are already known to Google through simple links. You can speed up this step with sitemaps.
Once Google has found your page, Google will crawl it.
⚡ Every Web Developer should know and use WebP images
The WebP image format is considered a next-gen image format and reduces the file size for images by 25-35%.
This is crucial for modern SEO and web performance.
👇 Read more about how to use WebP in seconds.
▶️ What is WebP?
WebP is an image format published by google in 2010.
It creates lossless images that are 26% smaller than PNG's and lossy images 25-34% smaller.
In reality, I have seen over 40% smaller sizes already.
And WebP supports transparency!
{ 1 / 7 }
▶️ What browsers are supporting WebP?
The current support includes all main browsers.
It supports Safari only for iOS or macOS Big Sur 11+.
Using the picture tag ensures compatibility for older browsers and fallback alternatives in other formats!
⚡ Every Web Developer should know performance budgets
A performance budget is a set of constraints that apply to metrics that affect a website's performance. Having budgets helps to ensure your website performs well.
👇 Learn about web performance and performance budgets
▶️ Why is performance important?
Performance is an important part of the user experience, and it can directly impact your business.
User experience has also become a factor in Google page ranking.
Setting a performance budget defines the boundaries for your website.
⚡ Every Web Developer should know how to create next-gen image formats
Serving your images in next-gen formats is crucial to ensure your performance is fantastic and loads fast for any of your users.
👇 Learn how to create images in the next-gen format in seconds
1️⃣ What are next-gen formats?
Next-gen formats are image formats such as
- WebP
- AVIF
- JPEG 2000
- JPEG XR
We will focus on WebP as this has the best support across all browsers and is most used!
2️⃣ What is WebP?
WebP is a next-gen image format published by google in 2010. It creates lossless images that are 26% smaller than PNG's and lossy images 25-34% smaller.
In reality, I have seen over 40% smaller sizes already.