Tại sao tôi viết bài này

Hiện tại tôi đang điều hành một số trang web và kể từ khi bắt đầu, hiệu suất của tôi đã lên xuống rất nhiều. Nhiều lúc tôi thấy nó thật khó chịu. Mọi thứ dường như hoạt động rất tốt đối với tôi tại địa phương, nhưng sau đó tôi kiểm tra phân tích máy chủ của mình và tôi có thể thấy rằng đối với một số quốc gia, tốc độ của tôi rất tệ.

Nó dường như luôn luôn như vậyCLShoặcLCPđó là vấn đề đối với tôi Vì vậy, tôi nghĩ tôi sẽ chia sẻ kinh nghiệm của mình và cố gắng giúp người khác tìm ra điều này, đặc biệt nếu bạn đang trải qua điều tương tự. Hoặc có thể bạn đã gặp rắc rối với vấn đề này và có quan điểm hoặc giải pháp độc đáo? Tôi rất thích nghe về nó.

TheoTạp chí công cụ tìm kiếm, việc tối ưu hóa hai số liệu này có thể cải thiện đáng kể khả năng hiển thị trang web của bạn và sự hài lòng của người dùng. Về mặt lý thuyết thì điều đó nghe có vẻ tuyệt vời, nhưng thực sự việc sửa chữa chúng lại là một câu chuyện khác. Hãy để tôi hướng dẫn bạn những gì tôi đã học được.

Chính xác thì CLS và LCP là gì?

Trước khi bắt đầu cuộc đấu tranh của riêng mình, hãy để tôi giải thích những từ viết tắt này thực sự là gì, bởi vì khi tôi nhìn thấy những từ viết tắt này lần đầu tiên trong Google Search Console, tôi không biết chúng có nghĩa gì.

Thay đổi bố cục tích lũy (CLS)đo lường mức độ thay đổi bố cục trang của bạn khi tải. Bạn có biết khi bạn chuẩn bị nhấn vào một nút và toàn bộ trang sẽ thay đổi, vì vậy bạn bấm nhầm không? Đó là một vấn đề CLS. Với tư cách là người dùng, điều đó vô cùng khó chịu và hóa ra các công cụ tìm kiếm cũng phạt bạn vì điều đó.

Sơn có nội dung lớn nhất (LCP)đo thời gian tải phần tử hiển thị lớn nhất trên trang của bạn. Thông thường đó là một hình ảnh nổi bật hoặc một khối văn bản lớn. Nếu LCP của bạn chậm, khách truy cập của bạn sẽ nhìn chằm chằm vào một trang tải được một nửa và nhiều người sẽ rời đi.

Cả hai đều thuộc quyền sở hữu của GoogleCác chỉ số quan trọng về trang web cốt lõi, điều này ảnh hưởng trực tiếp đến thứ hạng tìm kiếm của bạn. Vì vậy, ngay cả khi nội dung của bạn xuất sắc thì điểm CLS và LCP kém vẫn có thể cản trở bạn.

Tối ưu hóa trang web của bạn cho CLS và LCP

🖼️

Đặt kích thước hình ảnh
Chỉ định chiều rộng và chiều cao cho hình ảnh

📢

Sử dụng quảng cáo có trách nhiệm
Tránh thay đổi kích thước quảng cáo bất ngờ

⚡

Tải trước các tài nguyên quan trọng
Đảm bảo nội dung quan trọng tải nhanh chóng

🔄

Giảm thiểu nội dung động
Hạn chế nội dung thay đổi trong quá trình tải

📊

Theo dõi hiệu suất thường xuyên
Sử dụng các công cụ để theo dõi điểm CLS và LCP

Cơn ác mộng CLS của tôi

CLS là vấn đề đầu tiên tôi gặp phải. Đối với tôi, các trang của tôi trông ổn nhưng điểm số của tôi lại rất tệ. Sau khi tìm hiểu kỹ, tôi đã tìm ra thủ phạm chính:

Hình ảnh không có kích thước:Tôi không đặt chiều rộng và chiều cao cho hình ảnh của mình. Trình duyệt không biết cần dự trữ bao nhiêu dung lượng, vì vậy mọi thứ sẽ thay đổi sau khi hình ảnh được tải.
Phông chữ tải muộn:Phông chữ tùy chỉnh của tôi đang tải sau khi trang được hiển thị, khiến tất cả văn bản của tôi tăng vọt khi phông chữ mới thay thế phông chữ dự phòng. Điều này thật tinh tế nhưng nó đã bổ sung thêm.
Nội dung động:Tôi đã có một số thành phần chèn nội dung sau khi trang được tải, đẩy mọi thứ bên dưới chúng xuống.

Cách khắc phục hầu hết các vấn đề về CLS của tôi đơn giản đến mức đáng ngạc nhiên. Tôi bắt đầu xác định kích thước rõ ràng cho tất cả hình ảnh và phương tiện. Tôi đã thêm tính năng hoán đổi hiển thị phông chữ vào quá trình tải phông chữ của mình để dự phòng hiển thị ngay lập tức. Và tôi dành không gian bằng CSS cho bất kỳ nội dung nào tải động.

Công cụ nhưThông tin chi tiết về tốc độ trang của Googleđã giúp ích rất nhiều ở đây. Chúng hiển thị cho bạn chính xác những yếu tố nào đang gây ra sự thay đổi bố cục, do đó bạn không cần phải đoán.

Rồi đến vấn đề LCP

Ngay khi tôi nghĩ mình đã sắp xếp xong mọi việc,điểm LCPbắt đầu gắn cờ. Điều khó chịu nhất là trang web của tôi tải rất nhanh ở Vương quốc Anh, nhưng số liệu phân tích của tôi lại cho thấy tốc độ khủng khiếp ở các quốc gia khác. Đó là vấn đề về LCP - nó phụ thuộc rất nhiều vào vị trí của người dùng và khoảng cách từ máy chủ của bạn.

Các vấn đề chính tôi tìm thấy là:

Hình ảnh lớn không được tối ưu hóa:Hình ảnh anh hùng của tôi quá lớn. Tôi đã tải lên ảnh có độ phân giải đầy đủ mà không nén chúng.
Thời gian phản hồi của máy chủ:Không có CDN, người dùng ở xa máy chủ của tôi phải chờ đợi phản hồi đầu tiên rất lâu.
JavaScript chặn kết xuất:Tôi đã tải các tập lệnh trong đầu đang chặn trang hiển thị cho đến khi chúng hoàn tất.

BẰNGNghiên cứu của Backlinkocho thấy, các trang web có điểm LCP tốt có mức độ tương tác tốt hơn đáng kể và tỷ lệ thoát thấp hơn. Khi tôi bắt đầu khắc phục những vấn đề này, tôi có thể thấy sự khác biệt trong số liệu phân tích của riêng mình.

Điều gì thực sự đã giúp LCP của tôi

Tôi bắt đầu nén tất cả hình ảnh của mình và sử dụng định dạng WebP nếu có thể. Tôi cũng đã chuyển các tập lệnh không cần thiết sang tải không đồng bộ hoặc trì hoãn chúng hoàn toàn. Các trang web của tôi được lưu trữ trên Vercel, nơi xử lý rất nhiều nội dung của mạng biên cho tôi, nhưng nếu bạn đang sử dụng dịch vụ lưu trữ truyền thống, hãy thiết lập mộtCDNcó thể tạo ra sự khác biệt lớn cho giao thông quốc tế.

CDN lưu trữ các bản sao trang web của bạn ở các địa điểm trên khắp thế giới, do đó, khách truy cập được phục vụ từ một nơi nào đó gần họ hơn thay vì máy chủ gốc duy nhất của bạn. Nếu bạn thấy tốc độ kém ở các khu vực cụ thể thì đó là một trong những điều đầu tiên đáng xem xét.

Phần khó chịu - Nó không bao giờ thực sự được "sửa"

Đây là điều không ai nói với bạnCLS và LCP. Bạn không sửa chúng một lần và tiếp tục. Mỗi lần tôi thêm một tính năng mới, một hình ảnh mới hoặc thay đổi bố cục của mình, điểm số lại có thể thay đổi. Đó là một điều đang diễn ra.

Tôi đã có nhiều tuần mà mọi thứ đều có màu xanh lục trong Google Search Console, sau đó tôi thêm một thành phần mới và đột nhiên CLS của tôi lại bị gắn cờ. Điều này thực sự khó chịu nhưng giờ đây tôi đã học được cách kiểm tra Core Web Vitals của mình sau mỗi thay đổi quan trọng.

Tác động của CLS và LCP đến trải nghiệm người dùng

0,1 giây

Dung sai của người dùng

32%

Tăng tỷ lệ thoát

Giảm tỷ lệ chuyển đổi

Các chỉ số quan trọng về trang web cốt lõi

Tầm quan trọng của thứ hạng SEO

Một báo cáo củaThương hiệu tài chínhnêu bật việc các trang web chậm có thể trực tiếp dẫn đến mất doanh thu như thế nào. Đó là động lực đủ để tiếp tục cố gắng, ngay cả khi cảm thấy tẻ nhạt.

Những công cụ đã giúp tôi nhiều nhất

Nếu bạn đang giải quyết những vấn đề tương tự, đây là những công cụ tôi thực sự sử dụng và thấy hữu ích:

Bảng điều khiển Tìm kiếm của Google:Đây là nơi đầu tiên tôi nhận thấy vấn đề của mình. Nó hiển thị điểm số Core Web Vitals của bạn được chia nhỏ theo trang và cho bạn biết chính xác những gì cần chú ý.
Thông tin chi tiết về tốc độ trang:Tôi chạy từng trang thông qua trang này sau khi thực hiện thay đổi. Nó đưa ra những khuyến nghị cụ thể, có thể thực hiện được thay vì những lời khuyên mơ hồ.Hướng dẫn hiệu suất web của Shopifycũng là một nguồn tài nguyên đồng hành tuyệt vời.
Tiện ích mở rộng quan trọng của trang web:Tiện ích mở rộng Chrome này hiển thị CLS, LCP và các số liệu khác của bạn trong thời gian thực khi bạn duyệt trang web của riêng mình. Tôi giữ nó liên tục trong quá trình phát triển.

Khi bạn đã xác định được vấn đề về hiệu suất của mình, hãy sử dụngCông cụ xếp hạng AI của Google Tìm kiếmđể kiểm tra xem những cải tiến của bạn có thực sự mang lại khả năng hiển thị tìm kiếm tốt hơn hay không. Sẽ không có ích gì nếu sửa điểm nếu nó không giúp ích cho thứ hạng của bạn.

Lời khuyên của tôi nếu bạn đang trải qua điều này

Nếu hiệu suất của bạn cũng lên xuống như tôi thì đây là những gì tôi đề xuất:

Không sợ hãi.Các vấn đề về CLS và LCP cực kỳ phổ biến. Bạn không làm mọi thứ sai - những số liệu này chỉ mang tính nhạy cảm.
Kiểm tra số liệu phân tích của bạn theo quốc gia.Trang web của bạn có thể nhanh đối với bạn nhưng lại chậm đối với khách truy cập ở nơi khác. CDN có thể giải quyết vấn đề này một cách nhanh chóng.
Sửa hình ảnh trước.Theo kinh nghiệm của tôi, hình ảnh không được tối ưu hóa và thiếu kích thước là nguyên nhân gây ra hầu hết các vấn đề về CLS và LCP.
Kiểm tra sau mỗi lần thay đổi.Tập thói quen chạy PageSpeed Insights bất cứ khi nào bạn thực hiện các cập nhật quan trọng.
Hãy kiên nhẫn.Dữ liệu Google Search Console có thể mất vài ngày hoặc vài tuần để cập nhật. Đừng cho rằng các bản sửa lỗi của bạn không hoạt động chỉ vì bảng điều khiển chưa thay đổi.

Tôi vẫn đang học và vẫn đang giải quyết vấn đề này. Điểm số của tôi tốt hơn họ, nhưng tôi sẽ không gọi chúng là hoàn hảo. Nếu bạn đã tìm thấy giải pháp hiệu quả cho mình, tôi thực sự muốn nghe về chúng. Bạn cũng có thể thử trực quan hóa dữ liệu hiệu suất của mình bằngcông cụ tạo biểu đồ trực tuyến miễn phíđể theo dõi các cải tiến theo thời gian.

Điểm mấu chốt là thế này:CLS và LCPsẽ không biến mất. Chúng quan trọng đối với SEO, chúng quan trọng đối với trải nghiệm người dùng và nếu bạn điều hành các trang web như tôi, chúng sẽ khiến bạn luôn cảnh giác. Nhưng chúng có thể sửa được và mọi cải tiến bạn thực hiện đều đáng giá.