SEO - Core Web Vitals

Xin chào các bạn nhà phát triển web và những người yêu thích SEO! Tôi rất vui mừng được làm hướng dẫn viên của các bạn trong hành trình thú vị qua thế giới của Core Web Vitals. Là một ai đó đã dạy khoa học máy tính lâu hơn tôi muốn thừa nhận (hãy nói là tôi nhớ khi internet dial-up được coi là nhanh), tôi đã chứng kiến sự tiến hóa fascinante của web. Hôm nay, chúng ta sẽ khám phá một chủ đề quan trọng đối với bất kỳ ai muốn để lại dấu ấn trên internet: Core Web Vitals.

Core Web Vitals: Chúng là gì?

Hãy tưởng tượng bạn đang xây dựng một ngôi nhà. Bạn sẽ không chỉ tập trung vào việc làm cho nó trông đẹp mắt, phải không? Bạn sẽ muốn đảm bảo rằng nó có nền tảng vững chắc, hệ thống nước tốt và hệ thống điện hiệu quả. Core Web Vitals giống như những thành phần thiết yếu này, nhưng cho các trang web.

Core Web Vitals là một bộ các yếu tố cụ thể mà Google coi là quan trọng trong tổng thể trải nghiệm người dùng của một trang web. Chúng là một phần của các tín hiệu Page Experience của Google, cùng với tính thân thiện với di động, an toàn khi duyệt web, bảo mật HTTPS và hướng dẫn về các quảng cáo xâm lấn.

Tầm quan trọng của Core Web Vitals

Bây giờ, bạn có thể tự hỏi, "Tại sao tôi nên quan tâm đến những Core Web Vitals này?" Hãy để tôi kể cho bạn một câu chuyện ngắn.

Trong những ngày đầu tiên dạy học, tôi có một học sinh đã xây dựng một trang web đẹp mắt. Nó trông giống như phiên bản số hóa của nhà thờ Sistine. Nhưng khi chúng tôi cố gắng tải nó, oh boy! Nó chậm hơn một con ốc bươu bò qua lạc. Người dùng sẽ rời đi trước khi trang web thậm chí còn kết thúc việc tải. Đó là khi tôi nhận ra tầm quan trọng của không chỉ cách một trang web trông như thế nào, mà còn cách nó hoạt động.

Google đã làm rõ rằng Core Web Vitals hiện là các yếu tố xếp hạng. Điều này có nghĩa là chúng có thể ảnh hưởng đến vị trí của trang web của bạn trong kết quả tìm kiếm. Trong thế giới cạnh tranh của SEO, mỗi ưu thế đều quan trọng!

Các chỉ số chính trong Core Web Vitals

Có ba chỉ số chính tạo nên Core Web Vitals:

1. Largest Contentful Paint (LCP)
2. First Input Delay (FID)
3. Cumulative Layout Shift (CLS)

Hãy cùng phân tích từng chỉ số một.

Largest Contentful Paint (LCP)

LCP đo lường hiệu suất tải. Cụ thể, nó đánh dấu điểm trong tiến trình tải trang khi nội dung chính của trang có khả năng đã tải.

LCP có thể đánh giá điều gì?

LCP cơ bản cho chúng ta biết nhanh như thế nào phần nội dung lớn nhất trở nên可见 cho người dùng. Điều này có thể là một hình ảnh, một video hoặc một phần văn bản block-level.

Giới hạn để đo lường LCP

Dưới đây là bảng tiện ích để hiểu giới hạn của LCP:

Thời gian LCP	Đánh giá
0-2.5 giây	Tốt
2.5-4 giây	Cần cải thiện
Hơn 4 giây	Poor

Để tối ưu hóa LCP, hãy xem xét các yếu tố sau:

<!-- Tối ưu hóa hình ảnh lớn nhất của bạn -->
<img src="optimized-hero-image.jpg" alt="Hero Image" loading="eager">

<!-- Sử dụng preload cho các tài nguyên quan trọng -->
<link rel="preload" href="critical-style.css" as="style">

Trong ví dụ này, chúng ta đang tối ưu hóa hình ảnh lớn nhất và nạp előrészletesly các CSS quan trọng. Điều này có thể cải thiện LCP đáng kể.

First Input Delay (FID)

FID đo lường tính tương tác. Nó量化 trải nghiệm người dùng cảm nhận khi cố gắng tương tác với các trang không phản hồi.

FID có thể đánh giá điều gì?

FID giúp đánh giá sự chậm trễ giữa khi người dùng đầu tiên tương tác với trang web của bạn (ví dụ: nhấp vào một liên kết hoặc chạm vào một nút) và khi trình duyệt thực sự có thể phản hồi tương tác đó.

Giới hạn để đo lường FID

Dưới đây là cách đo lường FID:

Thời gian FID	Đánh giá
0-100 ms	Tốt
100-300 ms	Cần cải thiện
Hơn 300 ms	Poor

Để cải thiện FID, hãy xem xét chia nhỏ các nhiệm vụ dài và tối ưu hóa JavaScript của bạn:

// Chia nhỏ các nhiệm vụ dài
const longTask = () => {
// Mã nhiệm vụ dài ở đây
};

// Sử dụng requestIdleCallback để chạy nhiệm vụ khi trình duyệt rảnh
requestIdleCallback(() => {
longTask();
});

Mã đoạn này minh họa cách sử dụng requestIdleCallback để chạy các nhiệm vụ có thể dài khi trình duyệt rảnh, cải thiện tính tương tác.

Cumulative Layout Shift (CLS)

CLS đo lường tính ổn định thị giác. Nó quantifies how often users experience unexpected layout shifts.

Làm thế nào Google tính toán điểm số CLS của bạn?

CLS được tính bằng cách nhân hệ số tác động ( πόσο lớn của viewport bị ảnh hưởng) với hệ số khoảng cách ( πόσο xa các phần tử di chuyển).

CLS có thể đánh giá điều gì?

CLS giúp đánh giá mức độ ổn định của bố cục trang của bạn khi nó tải. Một điểm số CLS thấp có nghĩa là trang của bạn không di chuyển khi các phần tử mới tải, cung cấp trải nghiệm người dùng tốt hơn.

Giới hạn để đo lường CLS

Dưới đây là cách đo lường CLS:

Điểm số CLS	Đánh giá
0-0.1	Tốt
0.1-0.25	Cần cải thiện
Hơn 0.25	Poor

Để cải thiện CLS, hãy luôn chỉ định kích thước cho hình ảnh và quảng cáo của bạn:

<!-- Chỉ định kích thước hình ảnh -->
<img src="example.jpg" width="640" height="360" alt="Example Image">

<!-- Dành không gian cho quảng cáo -->
<div style="min-height: 250px; min-width: 300px;">
<!-- Mã quảng cáo ở đây -->
</div>

Mã này đảm bảo rằng không gian được dành cho hình ảnh và quảng cáo, giảm thiểu sự di chuyển bố cục khi trang tải.

Tăng cường Core Web Vitals

Bây giờ chúng ta đã hiểu Core Web Vitals là gì và cách chúng được đo lường, hãy xem xét một số chiến lược tổng quát để tăng cường chúng:

1. Tối ưu hóa hình ảnh (nén, sử dụng các định dạng hiện đại như WebP)
2. Tối thiểu hóa và hoãn JavaScript
3. Sử dụng bộ nhớ cache
4. Thực hiện lazy loading cho các tài nguyên không quan trọng
5. Sử dụng Mạng Phát송 Nội dung (CDN)

Dưới đây là một ví dụ đơn giản về việc thực hiện lazy loading:

<img src="example.jpg" loading="lazy" alt="Lazy Loaded Image">

Thuộc tính này cho biết trình duyệt chỉ tải hình ảnh khi nó sắp vào khung nhìn, tiết kiệm băng thông và cải thiện thời gian tải.

Kết luận

Và đây là tất cả, các bạn! Chúng ta đã cùng nhau hành trình qua vùng đất của Core Web Vitals, từ việc hiểu chúng là gì đến việc học cách cải thiện chúng. Nhớ rằng, tối ưu hóa các chỉ số này không chỉ để làm hài lòng Google - nó còn để cung cấp trải nghiệm tốt hơn cho người dùng của bạn.

Khi chúng ta kết thúc, tôi nhớ lại một học sinh khác của tôi. Cô ấy đã lấy những nguyên tắc này vào tim và biến trang web chậm và cồng kềnh của cô ấy thành một cỗ máy lean, mean, và thân thiện với người dùng. Lượng truy cập của cô ấy tăng vọt, và lần cuối cùng tôi nghe, cô ấy đang điều hành một công ty tiếp thị số thành công.

Vậy, bất kể bạn đang xây dựng trang web đầu tiên của mình hay bạn là một chuyên gia có kinh nghiệm, hãy nhớ những Core Web Vitals này. Chúng là vé của bạn để có thứ hạng tốt hơn và người dùng hạnh phúc hơn. Và谁知道? Có lẽ bạn sẽ là câu chuyện thành công tiếp theo của tôi!

Đến gặp lại lần sau, chúc các bạn mã hóa vui vẻ, và mong rằng các yếu tố web của bạn luôn ở trong màu xanh lá!

Credits: Image by storyset