Cách tối ưu hóa trang web của bạn cho Core Web Vitals (Adsense)

Cuộc đua cải thiện Core Web Vitals không phải là một cuộc đua dễ dàng. Sẽ khó khăn hơn nếu bạn dựa vào một chương trình quảng cáo như Google AdSense để kiếm tiền từ trang web của mình.

Các trang web chạy Google AdSense có khả năng trượt bài kiểm tra Core Web Vitals cao gấp 10 lần so với cùng một trang web không có Google AdSense. Điều này chủ yếu là do số lượng yêu cầu và tài sản của bên thứ ba mà Google AdSense thêm vào trang web của bạn. Hầu hết các tài sản này đều không được tối ưu hóa, lớn và không thân thiện với người dùng.

Ngoài AdSense và các nền tảng quảng cáo, nếu bạn có nhiều hình ảnh, JavaScript và CSS chưa được tối ưu hóa, đặc biệt là ở phần đầu trang, thì rất có thể bạn sẽ không vượt qua được bài kiểm tra Core Web Vitals.

Nếu bạn đang gặp khó khăn trong việc vượt qua bài kiểm tra Core Web Vitals và cải thiện tiềm năng xếp hạng trên công cụ tìm kiếm, bạn sẽ tìm thấy các giải pháp thực tế trong bài viết này.

Core Web Vitals là gì?

Core Web Vitals là số liệu do Google Lighthouse cung cấp, xác định cách một trang web mang lại trải nghiệm trang tốt. Mặc dù có nhiều số liệu khi chạy thử nghiệm, nhưng các số liệu quan trọng nhất là Largest Contentful Paint (LCP), First Input Delay (FID) và Cumulative Layout Shift (CLS).

Google đã công bố rằng từ tháng 2021 năm XNUMX, các số liệu này sẽ trở thành một phần trong tín hiệu xếp hạng được sử dụng để xác định vị trí của trang web trong kết quả tìm kiếm.

Tóm lại, bạn có thể nói rằng Core Web Vitals không phải là nỗi kinh hoàng đối với các quản trị viên web mà là phương tiện để cải thiện trải nghiệm của trang web.

Sơn nội dung lớn nhất (LCP): LCP đo thời gian cần thiết để tải khối hình ảnh hoặc văn bản lớn nhất có thể nhìn thấy trên trang web. Nếu khối văn bản hoặc hình ảnh lớn nhất có thể nhìn thấy tải nhanh, thì người ta cho rằng phần còn lại của hình ảnh và văn bản của bạn sẽ tải nhanh. Thời gian tải cần thiết để vượt qua là 2.5 giây.

Độ trễ đầu vào đầu tiên (FID): FID đo lường tính tương tác của trang web. Điều này được xác định bằng thời gian trình duyệt bắt đầu xử lý trình xử lý sự kiện sau khi người dùng nhấp vào trang web của bạn. Điều này được gọi rộng rãi là Ấn tượng đầu tiên về trang web của bạn. Thời gian cần thiết để vượt qua là 100 mili giây.

Thay đổi bố cục tích lũy (CLS): CLS đo lường sự thay đổi bố cục xảy ra trên một trang web. Khi một trang web tải và sau đó đột nhiên có thứ gì đó xuất hiện hoặc biến mất và trang phải điều chỉnh để lớn hơn hoặc nhỏ hơn, thì sự thay đổi đó là thứ được đo lường. Nó rất tệ đối với trải nghiệm của người dùng và tôi đồng ý. Điểm số bạn cần đạt là 0.1.

Cách tối ưu hóa trang web của bạn cho Core Web Vitals

Thực hiện theo các bước sau để tối ưu hóa trang web của bạn:

1. Bắt đầu với một máy chủ web nhanh

Nếu bạn có một máy chủ web có thời gian phản hồi tệ hại, thì mọi thứ khác mà tôi sẽ liệt kê ở đây có thể không mang lại kết quả mong muốn. Máy chủ của bạn phản hồi yêu cầu càng nhanh thì càng tốt.

Tại sao một máy chủ web có Thời gian đến byte đầu tiên (TTFB) nhanh lại quan trọng? Một số người sẽ cho rằng TTFB không quan trọng, nhưng thực tế là có. Đó là nền tảng của mọi thứ khác. Nếu bạn có người dùng ở các thành phố có internet chậm, tốc độ máy chủ web của bạn có thể phản hồi sẽ có ý nghĩa rất lớn. Bất kỳ máy chủ web nào cũng có thể hoạt động tốt nếu bạn có người dùng chủ yếu đến từ các thành phố có internet siêu nhanh.

Hãy thử kiểm tra xem máy chủ web của bạn sẽ phản hồi như thế nào với 3G hoặc 2G thay vì 4G. Bởi vì nếu bạn có nhiều người dùng kết nối qua 3G hoặc 2G, thì nó sẽ cộng vào điểm Core Web Vitals của bạn. Vì vậy, mỗi mili giây đều có giá trị. Sự khác biệt giữa việc đạt 100ms trong FID của bạn và đạt 101ms là với 100ms, bạn sẽ vượt qua nhưng với 101ms, bạn sẽ trượt. Vì vậy, nếu ai đó nói với bạn rằng 1ms không quan trọng, thì người đó có thể đã sai.

Khi chọn một máy chủ web, hãy luôn đảm bảo có một trung tâm dữ liệu gần hơn với phần lớn người dùng trang web của bạn. Bạn có thể tìm vị trí của họ bằng cách xem phân tích của mình. Hầu hết người dùng của bạn đến từ đâu? Chọn một trung tâm dữ liệu gần họ hơn. Càng gần càng tốt.

Cá nhân tôi đã nhận thấy sự thay đổi đáng kể trong Dữ liệu thực địa của Core Web Vitals của một trang web sau khi thay đổi máy chủ web. Tôi không làm gì khác.

Nếu bạn đang tìm kiếm một máy chủ web nhanh, có rất nhiều đề xuất ngoài kia được thúc đẩy hoàn toàn bởi các chi nhánh mà không có sự chân thành. Nếu bạn đang chạy WordPress và bạn có đủ khả năng chi trả, tôi thực sự khuyên bạn nên Kinsta. Chúng là tốt nhất cho WordPress. Nếu bạn cần thứ gì đó rẻ hơn hoặc bạn không sử dụng WordPress thì Cloudways cũng rất hiệu quả.

2. Sử dụng một chủ đề nhẹ và được tối ưu hóa tốc độ

Mẹo này đặc biệt hữu ích với những người không phải là lập trình viên và thậm chí với những lập trình viên có ít thời gian hơn. Đặc biệt nếu bạn đang sử dụng WordPress, nơi có rất nhiều tùy chọn, hãy đảm bảo rằng bạn sử dụng một chủ đề nhẹ và được tối ưu hóa tốc độ.

Bởi vì chủ đề giống như bộ xương của trang web của bạn, nếu bộ xương bị hỏng thì phần thân cũng sẽ bị hỏng. Chỉ có vậy thôi.

Có một danh sách dài các phương pháp hay nhất mà bạn nên tìm kiếm trong một chủ đề. Một số phương pháp xấu phổ biến nhất là phụ thuộc quá nhiều vào JQuery, tải quá nhiều CSS/JS khi không cần thiết, kích thước chủ đề lớn, v.v. Bạn luôn có thể sử dụng một công cụ như Phòng thí nghiệm màu vàng, để kiểm tra bản demo.

Nếu bạn đang sử dụng WordPress, bạn có thể kiểm tra danh sách chủ đề WordPress nhanh nhất.

KHAI THÁC. Tối ưu hóa hình ảnh của bạn

Hình ảnh rất tuyệt. Chúng làm cho nội dung trở nên hấp dẫn. Nhưng chúng có thể trở thành gánh nặng nếu không được tối ưu hóa. Có hình ảnh lớn như 3 MB chắc chắn sẽ ảnh hưởng đến tốc độ của bạn. Và nếu những hình ảnh này hiển thị khi trang web của bạn được truy cập trước khi cuộn, chúng chắc chắn sẽ ảnh hưởng đến số liệu LCP của bạn.

Sự thật là hình ảnh không được tối ưu hóa sẽ làm tăng kích thước trang của bạn. Kích thước trang càng lớn thì thời gian tải càng lâu.

Cá nhân tôi thích tối ưu hóa mọi hình ảnh trước khi tải chúng lên. Tôi không sử dụng bất kỳ dịch vụ bên ngoài nào để tối ưu hóa hình ảnh. Tuy nhiên, nếu bạn sử dụng WordPress hoặc CMS tương tự, có các plugin và giải pháp để tối ưu hóa hình ảnh tự động. Ngoài ra còn có các giải pháp đám mây bất kể bạn sử dụng cái gì.

4. Xóa hoặc giảm kích thước hình ảnh nền

Hình ảnh nền thường rất lớn. Và nó có thể làm chậm thời gian tải của bạn vì phải tải trước khi nội dung có ý nghĩa được hiển thị.

Bạn có thể xóa hoàn toàn hình nền để có một trang web nhanh hơn. Nếu chúng quan trọng như vậy, hãy cân nhắc tối ưu hóa chúng ở kích thước nhỏ nhất có thể hoặc sử dụng các mẫu thay vì hình ảnh.

5. Sử dụng bộ nhớ đệm của trình duyệt

Nếu bạn có nhiều độc giả trung thành thì bạn nên cân nhắc đến việc lưu trữ đệm trình duyệt. Khi người dùng truy cập trang web của bạn lần đầu tiên, trình duyệt sẽ lưu trữ đệm trang web đó. Đối với mỗi lần truy cập khác, trang web sẽ tải ngay lập tức. Điều này có thể cải thiện đáng kể FID và LCP từ lần truy cập thứ hai trở đi.

Đối với người dùng WordPress, hầu hết các plugin lưu trữ đệm đều có thể giúp bạn thực hiện điều này.

6. Thu nhỏ JavaScript và hoãn JavaScript không sử dụng

Mặc dù JavaScript rất tuyệt vời, nhưng nó thường chặn hiển thị. Điều này có nghĩa là nó có thể ảnh hưởng đến thời gian tải và cuối cùng là FID của bạn.

Hãy thử thu nhỏ JavaScript bằng cách xóa khoảng trắng và chú thích để giảm kích thước tệp. Ngoài ra, hãy đảm bảo rằng bạn hoãn JavaScript không quan trọng. Điều này sẽ cải thiện FID của bạn.

Đối với người dùng WordPress, có các plugin như Autoptimize, WP Rocketvà những người khác có thể làm điều này thay bạn.

7. Đặt thuộc tính kích thước AdSense

Nếu bạn đang chạy AdSense trên trang web của mình và bạn đang gặp khó khăn với CLS, thì điều này có thể giải quyết mọi vấn đề của bạn. Nó đã giải quyết được vấn đề của tôi và cũng nên giải quyết được vấn đề của bạn.

Nếu bạn có một đơn vị quảng cáo gần tiêu đề hiển thị khi người dùng truy cập, một vấn đề là quảng cáo có thể không tải ngay lập tức. Quảng cáo có thể tải sau khi trang đã được tải và khi tải, bố cục sẽ bị thay đổi. Điều này rất phổ biến đối với các đơn vị quảng cáo phản hồi. Khi điều đó xảy ra, không thể vượt qua số liệu CLS.

Cách tốt nhất để xử lý vấn đề này là chỉnh sửa mã AdSense của bạn một chút. Đừng lo lắng, nó rất hợp pháp. Chỉ cần chỉ định thuộc tính kích thước cho quảng cáo, đặc biệt là chiều cao. Sau khi bạn thực hiện xong, bạn sẽ không còn nhận thấy sự thay đổi bố cục mỗi khi quảng cáo đang tải.

Dưới đây là ví dụ về đơn vị quảng cáo phản hồi mà tôi đã sử dụng trên blog của mình ngay bên dưới tiêu đề. Tôi đã thay thế ID Nhà xuất bản và Vị trí quảng cáo bằng XXXXXX. Nhận thấy rằng tôi đã thêm thuộc tính chiều cao (min-height: 300px). Ngay khi tôi thực hiện điều đó, mọi sự cố CLS đã biến mất mãi mãi.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Header ad -->
<ins class="adsbygoogle"
     style="display:block; min-height: 300px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Điều này có tác dụng giữ nguyên kích thước đó trên trang. Vì vậy, bất cứ khi nào quảng cáo xuất hiện, sẽ không có sự thay đổi bố cục, vì bạn đã đặt kích thước.

8. Thiết lập thuộc tính kích thước cho hình ảnh và phương tiện khác của bạn

Giống như Quảng cáo, hình ảnh và phương tiện truyền thông khác có thể gây ra sự thay đổi bố cục khi chúng được tải trên trang web của bạn. Bạn có thể chỉ đang đọc một cái gì đó, sau đó một hình ảnh tải và đột nhiên có sự thay đổi bố cục, những gì bạn đang đọc không còn hiển thị nữa và tất cả những gì bạn thấy là thứ khác hoặc thậm chí bạn vô tình nhấp vào thứ khác.

Bạn có thể tránh tất cả những điều này bằng cách thiết lập thuộc tính size cho các tệp phương tiện của bạn. Chỉ số CLS của bạn sẽ vui mừng vì bạn đã làm như vậy.

9. Tải hình ảnh một cách chậm rãi.

Bạn có thể đã thấy lời khuyên trên PageSpeed ​​Insight để hoãn hình ảnh ngoài màn hình. Nghĩa đơn giản của nó là tải chậm hình ảnh của bạn.

Tải chậm sẽ làm giảm kích thước trang và cũng làm giảm thời gian tải trang khi người dùng truy cập. Điều này tốt cho số liệu CWV.

Điều này đặc biệt sẽ giúp cải thiện LCP.

10. Tối ưu hóa CSS bằng cách thu nhỏ và tạo CSS quan trọng

CSS là thứ tạo nên vẻ đẹp cho một trang web, nhưng một tệp CSS lớn có thể là vấn đề lớn vì nó sẽ làm chậm quá trình hiển thị trang cho người dùng.

Khi người dùng truy cập trang web của bạn, trình duyệt theo hành vi bình thường sẽ trì hoãn việc hiển thị trang web của bạn cho người dùng cho đến khi nó tải, phân tích cú pháp và thực thi tất cả CSS được tham chiếu trong tiêu đề trang web của bạn. Nếu bạn có tệp CSS lớn, đây có thể là một vấn đề lớn. Nó sẽ làm chậm trang web của bạn.

Critical CSS có thể giúp bằng cách chỉ tải CSS cần thiết để tải trang. Trong khi phần CSS còn lại có thể được tải không đồng bộ.

Ngoài ra, việc thu nhỏ CSS bằng cách xóa khoảng trắng và chú thích để giảm kích thước tệp cũng có thể hữu ích.

Quý vị cũng có thể xóa CSS không sử dụng. Nếu dịch vụ bạn sử dụng đang đẩy mã CSS không được sử dụng, bạn có thể xóa chúng một cách an toàn.

Nếu bạn sử dụng WordPress, có các plugin như WP Rocket, LiteSpeed ​​Cache, FlyingPress và các công cụ khác có thể giúp bạn thực hiện điều này.

11. Triển khai tải thông minh AdSense

Phương pháp này có thể loại bỏ gần như hoàn toàn mọi thách thức nếu AdSense là nguyên nhân làm chậm trang web của bạn.

Đây là về việc tải AdSense theo cách thông minh. AdSense sẽ không được tải cho đến khi người dùng thực hiện hành động như cuộn hoặc nhấp. Điều này sẽ cải thiện đáng kể thời gian tải và bất kỳ Core web vitals nào bị AdSense ảnh hưởng.

Có rất nhiều plugin WordPress có thể giúp bạn làm điều này, WP Rocket và Flying Scripts là một ví dụ. Theo tôi biết thì phương pháp này không vi phạm chính sách của Google AdSense.

Lưu ý: Mặc dù phương pháp này có thể giúp cải thiện tốc độ nhận thức và điểm số trang, nhưng nó có thể ảnh hưởng đến doanh thu AdSense của bạn. Tôi khuyên bạn nên chạy thử nghiệm để chắc chắn liệu nó có đáng không

12. Sử dụng phông chữ System Stack nếu bạn có thể

Phông chữ làm tăng thêm thời gian tải trên bất kỳ trang web nào. Và đối với các trang web không có hình ảnh, khối văn bản của bạn có thể chịu trách nhiệm cho xếp hạng LCP của bạn. Trong trường hợp đó, điểm LCP của bạn sẽ bị ảnh hưởng trực tiếp bởi phông chữ của bạn.

Trong khi Google Font và Font Awesome tiếp tục cải thiện, việc sử dụng phông chữ hệ thống sẽ mang lại sự cải thiện đáng kể. Mặc dù không quá cầu kỳ tùy thuộc vào thiết bị.

13. Sử dụng CDN

Nếu bạn có người dùng từ nhiều nơi trên thế giới, thì việc sử dụng CDN có thể giúp cải thiện tốc độ và gián tiếp cải thiện số liệu Core Web Vitals của bạn.

Giải thích một cách đơn giản, CDN tạo nhiều bản sao trang web của bạn và lưu trữ chúng tại nhiều Điểm hiện diện (POP) khác nhau ở nhiều nơi khác nhau trên thế giới. Khi ai đó yêu cầu trang web của bạn, nó sẽ phục vụ trang web của bạn từ vị trí gần nhất.

Ví dụ, nếu trang web của bạn được lưu trữ tại Hoa Kỳ và bạn có khách truy cập từ Vương quốc Anh, thay vì lấy trang web của bạn từ Hoa Kỳ, CDN sẽ phục vụ trang web của bạn từ Vương quốc Anh. Hiệu ứng của việc đó sẽ là giao hàng nhanh. Tốc độ.

Bạn có thể kiểm tra CDN tốt nhất ngoài đó.

14. Thiết lập DNS prefetching

Nếu bạn dựa vào một dịch vụ bên ngoài như CDN để phân phối trang web của mình, thì bạn có thể cần thiết lập DNS Prefetching để giảm thiểu sự chậm trễ do tra cứu DNS.

DNS prefetching sẽ prefetch DNS trước khi nó được gọi. Vì vậy, nó tải ngay lập tức khi nó được gọi cuối cùng.

15. Tối ưu hóa các tập lệnh của bên thứ ba

Kiểm tra để đảm bảo rằng một số dịch vụ bạn sử dụng trên trang web của mình không thêm các tập lệnh của bên thứ ba có thể làm chậm trang web của bạn.

Bạn có thể thay thế giải pháp bằng các yêu cầu của bên thứ ba làm chậm trang web của bạn bằng một giải pháp tốt hơn.

Khi nói đến Google AdSense, một tập lệnh của bên thứ ba khác, bạn không thể làm gì nhiều. Thực hành tốt nhất là sử dụng tối đa 3 quảng cáo hợp nhất trên một trang. Tránh sử dụng Nội dung phù hợp vì nó mang lại thu nhập thấp nhưng làm tăng thời gian tải.

16. Xóa AdSense khỏi đầu trang

Lời khuyên này dựa trên các thử nghiệm. Nếu tất cả các số liệu của bạn đều tốt trong báo cáo của Search Console ngoại trừ LCP, trước tiên hãy đảm bảo rằng hình ảnh và phông chữ của bạn đã được tối ưu hóa. Nếu chúng đã được tối ưu hóa và bạn vẫn không đạt LCP thì AdSense có thể phải chịu trách nhiệm.

Nếu có thể, hãy xóa AdSense khỏi trang chủ trong một tháng và xem vấn đề có được giải quyết không.

Nếu bạn không muốn xóa nó, bạn có thể trì hoãn nó theo cách thủ công hoặc sử dụng plugin như Flying Scripts.

17. Chuyển sang AMP

AMP có nghĩa là Accelerated Mobile Pages. Ý tưởng của AMP là tối ưu hóa các trang web để tải nhanh hơn trên thiết bị di động. Và tất nhiên, AMP mã nguồn mở dự án được khởi xướng bởi Google.

Mặc dù AMP ban đầu được thiết kế để tăng tốc các trang trên thiết bị di động nhưng nó cũng có thể tăng tốc các trang trên máy tính để bàn.

Các trang AMP luôn nhanh hơn các trang dành cho thiết bị di động hoặc máy tính để bàn, đôi khi nhanh hơn tới 100% theo quan sát của chúng tôi.

Nếu chiến lược kiếm tiền duy nhất của trang web của bạn là Google AdSense, thì bạn có thể cân nhắc chuyển toàn bộ trang web của mình sang AMP. Cá nhân tôi nhận thấy rằng trên một blog của tôi, AdSense trên các trang AMP đôi khi chuyển đổi nhiều hơn trên thiết bị di động và máy tính để bàn!

Kết luận

Core Web vitals có thể giúp bạn cải thiện trang web của mình cho người dùng chứ không chỉ cho Google. Rất phổ biến khi có điểm kiểm tra dữ liệu phòng thí nghiệm tốt nhưng điểm dữ liệu thực địa kém.

Điều này là do thành phần người dùng của bạn. Nếu hầu hết người dùng của bạn đến từ những nơi có internet chậm, bạn có thể đã tối ưu hóa tốt nhưng vẫn thất bại trong dữ liệu thực địa.