Trang web được ra mắt lại cũng có khả năng xem quảng cáo trên 75%, tỷ lệ thoát giảm 50% và số lượt xem trang tăng 27%.
Khi Google công bố sáng kiến Chỉ số quan trọng chính của trang web, nhà xuất bản Netzwelt của Đức đã nhanh chóng nhận ra tiềm năng của những chỉ số mới này để mang lại trải nghiệm trang tuyệt vời và cải thiện khả năng kiếm tiền dựa trên quảng cáo. Họ đã bắt đầu hành trình chạy lại trang web, áp dụng các phương pháp hay nhất phổ biến về hiệu suất trong khi đồng thời tối ưu hoá thẻ và vị trí quảng cáo. Việc cam kết mang đến trải nghiệm người dùng tuyệt vời và trang tải nhanh đã được chứng minh là một cách để tối ưu hoá mức độ tương tác và doanh thu từ quảng cáo, với số lượt xem trang tăng 27%, khả năng xem quảng cáo trên 75% và doanh thu từ quảng cáo tăng 18%.
27%
Tăng số lượt xem trang
18%
Tăng doanh thu từ quảng cáo
75%
Khả năng xem quảng cáo
Thách thức
Giống như nhiều nhà xuất bản tin tức khác, Netzwelt đã phải vật lộn để tìm ra sự cân bằng phù hợp giữa việc tối ưu hoá trải nghiệm người dùng và tốc độ trang trong khi vẫn duy trì doanh thu quảng cáo cao. Những thách thức chính mà họ gặp phải là:
- Điểm số tổng hợp về mức thay đổi bố cục (CLS) cao do các thay đổi về bố cục do quảng cáo kích hoạt, đặc biệt là từ các khung quảng cáo nhiều kích thước và biểu ngữ đầu trang.
- Thời gian hiển thị nội dung lớn nhất (LCP) đến muộn do quảng cáo là nội dung hiển thị lớn nhất hoặc do chiếm băng thông khi tải hình ảnh chính.
- Thời gian phản hồi lần tương tác đầu tiên (FID) cao do JavaScript của bên thứ ba cần thiết cho hoạt động quảng cáo, đặt giá thầu dựa vào tiêu đề và các mục đích khác.
- Các hiệu ứng phụ đối với Core Web Vitals từ hộp thoại yêu cầu đồng ý do các nhà cung cấp bên thứ ba kiểm soát, cũng góp phần làm thay đổi bố cục và có thể được phát hiện là lượt vẽ lớn nhất bị trễ.
Tối ưu hoá trang web tin tức cho Chỉ số quan trọng chính của trang web
Khi bắt đầu làm việc với các chỉ số quan trọng về trang web, Netzwelt nhanh chóng nhận thấy rằng việc tối ưu hoá Các chỉ số quan trọng về trang web không cần phải ảnh hưởng tiêu cực đến quảng cáo mà có thể được dùng làm cơ hội để cải thiện khả năng xem quảng cáo. Do đó, nhóm Netzwelt đã tối ưu hoá Các chỉ số quan trọng về trang web để nâng khả năng xem quảng cáo lên trên 75% nhằm thu hút quảng cáo có giá trị cao hơn (mức trung bình trên toàn cầu đối với quảng cáo hiển thị dưới 50%).
Tối ưu hoá CLS
Quảng cáo thường tải muộn (đôi khi có chủ ý thông qua tính năng tải lười) và kích thước thực tế của quảng cáo thường không được biết trước do các vị trí quảng cáo đa kích thước và linh hoạt.
Vấn đề này có thể được chia thành hai phần: quảng cáo ở phía trên và phía dưới màn hình đầu tiên.
Quảng cáo ở đầu trang có thể gây ra tình trạng nhảy bố cục lớn do tải muộn với kích thước không xác định. Việc chặn không gian lớn nhất mà họ có thể cần có thể dẫn đến trải nghiệm người dùng không tốt, trong khi việc yêu cầu nhà quảng cáo sử dụng kích thước cố định có thể làm giảm doanh thu từ quảng cáo. Netzwelt đã giải quyết vấn đề này bằng cách đặt quảng cáo trên cùng ở chế độ cố định và xoá một số kích thước biểu ngữ lớn hơn được phép. Quảng cáo lớp phủ giúp tránh kích hoạt các lượt chuyển đổi bố cục cho quảng cáo có nhiều kích thước. Mặc dù việc giảm số lượng kích thước đủ điều kiện sẽ ảnh hưởng đến doanh số bán quảng cáo, nhưng khả năng xem tốt hơn sẽ dễ dàng bù đắp cho điều này.
Dữ liệu trong quá khứ và thử nghiệm A/B đã giúp Netzwelt tìm được kích thước và vị trí phù hợp cho nhiều thiết bị và kích thước màn hình, cũng như các quy tắc nội dung đa phương tiện CSS dùng để đặt trước không gian.
Quảng cáo dưới màn hình đầu tiên có thể cải thiện đáng kể:
- Một biểu ngữ không hiển thị nhưng được tải sẽ làm giảm khả năng xem quảng cáo và khiến trải nghiệm trang trở nên tệ hơn.
- Một biểu ngữ được tải tại thời điểm người dùng cuộn qua biểu ngữ đó có thể tạo ra các lượt chuyển đến nội dung khác.
Để duy trì trải nghiệm trang tốt và khả năng xem quảng cáo cao, Netzwelt đã triển khai tính năng tải lười và dành không gian cho kích thước của mẫu số chung nhỏ nhất. Trong vùng nhiều kích thước, các biểu ngữ được yêu cầu ở kích thước từ 300x250 đến 300x600, được đặt trước chiều cao 250px. Điều này đã loại bỏ sự thay đổi bố cục cho các kích thước nhỏ hơn và giảm đáng kể sự thay đổi bố cục cho các biểu ngữ lớn hơn. Phương pháp này không phải là tối ưu, nhưng là một khởi đầu và là một giải pháp thỏa hiệp hiệu quả.
Để tối ưu hoá hơn nữa, Netzwelt đã sử dụng Intersection Observer và Network Information API để kiểm soát vị trí đặt quảng cáo và giảm sự thay đổi bố cục. Các vị trí quảng cáo và chiến lược tải lười khác nhau được sử dụng tuỳ thuộc vào vị trí cuộn và chất lượng kết nối mạng, đồng thời quảng cáo có thể được thay đổi từ nhiều kích thước thành kích thước cố định. Mục tiêu của thuật toán này luôn là tối đa hoá khả năng xem quảng cáo trong khi giảm thiểu mức thay đổi bố cục. Các trình duyệt không hỗ trợ API NetworkInfo sử dụng giá trị proxy dựa trên kết hợp giữa thiết bị và loại mạng bắt nguồn từ IP. Chiến lược tải thích ứng này đặc biệt giúp giảm CLS cho những người dùng có kết nối Internet chậm.
Tối ưu hoá FID
Độ trễ đầu vào đầu tiên có vẻ như là vấn đề đối với nhà xuất bản tin tức, vì quảng cáo thường đi kèm với nhiều thư viện JavaScript bổ sung. Và có vẻ như việc này có tác động tiêu cực khi xem dữ liệu của phòng thí nghiệm như Lighthouse. Tuy nhiên, khi xem xét dữ liệu thực địa trong Almanac Web 2020, nhiều trang web có tốc độ phản hồi đủ nhanh. Một phần là do JavaScript quảng cáo tải muộn (sau lần nhập đầu tiên), lưu vào bộ nhớ đệm tốt (ví dụ: xử lý lưu mã v8 vào bộ nhớ đệm) hoặc được nhà cung cấp quảng cáo tối ưu hoá tốt. Trình theo dõi khả năng xem của nhà cung cấp đảm bảo tránh các tác vụ dài. Vì vậy, ngay cả khi tổng thời gian chạy dài, Tổng thời gian chặn (TBT) và FID sẽ không bị ảnh hưởng. Mặc dù FID không phải là vấn đề lớn đối với Netzwelt, nhưng vẫn có một số điểm cần tối ưu hoá:
- Giảm số lượng tập lệnh và nhà cung cấp quảng cáo, tập trung vào một ngăn xếp nếu có thể.
- Tải tất cả tập lệnh bằng phương thức trì hoãn hoặc không đồng bộ.
- Sử dụng webpack hoặc các công nghệ tương tự để loại bỏ và gỡ bỏ gói.
- Sử dụng các quy tắc CSS đơn giản giống như BEM.
- Tránh các tác vụ chạy trong thời gian dài và sử dụng mẫu rảnh cho đến khi khẩn cấp.
- Làm việc với RequestAnimationFrame bất cứ khi nào bố cục bị ảnh hưởng.
Tối ưu hoá LCP
Quảng cáo có thể ảnh hưởng đến Thời gian hiển thị nội dung lớn nhất theo hai cách: một cách rõ ràng là nhận dạng quảng cáo là lượt vẽ lớn nhất và một cách gián tiếp là làm tắc nghẽn băng thông mạng hoặc ảnh hưởng đến đường dẫn quan trọng khiến lượt vẽ lớn nhất thực tế (ví dụ: hình ảnh chính) không thể tải đủ nhanh.
Netzwelt đã xoá quảng cáo hình chữ nhật trung bình khỏi các vị trí quảng cáo trên cùng trong khi tối ưu hoá cho CLS. Điều này cũng mang lại lợi ích khác là quảng cáo không trở thành thành phần lớn nhất.
Netzwelt tuân thủ chính sách nghiêm ngặt để ưu tiên nội dung hơn quảng cáo. Netzwelt ưu tiên hình ảnh và phông chữ chính dùng trong phần trên cùng của trang, đồng thời tối ưu hoá đường dẫn quan trọng để ưu tiên hơn so với tập lệnh quảng cáo và quảng cáo. Việc ưu tiên này giúp LCP không bị ảnh hưởng bởi quảng cáo.
Ngoài những biện pháp tối ưu hoá này, Netzwelt còn áp dụng các phương pháp hay nhất khác:
- Tách CSS cho đường dẫn kết xuất quan trọng và đặt CSS đó vào tiêu đề.
- Tải trước các phông chữ, tập lệnh và hình ảnh quan trọng nhất.
- Tránh tải từng phần hình ảnh ở đầu trang.
- Đã sử dụng
font-display="swap".
Sự đồng ý theo GDPR và Chỉ số quan trọng chính của trang web
Hộp thoại yêu cầu đồng ý thường ảnh hưởng tiêu cực đến các chỉ số quan trọng về trang web. Giống như quảng cáo, hộp thoại yêu cầu đồng ý có thể ảnh hưởng đến các chỉ số quan trọng về trang web theo hai cách:
- Rõ ràng nếu được phát hiện là lần vẽ lớn nhất hoặc gây ra sự thay đổi bố cục.
- Ngầm ẩn, bằng cách đánh cắp băng thông từ lượt vẽ lớn nhất thực tế, chặn đường dẫn quan trọng đến lượt vẽ lớn nhất hoặc trì hoãn quảng cáo cho đến khi có sự đồng ý, điều này có thể kích hoạt các thay đổi về bố cục.
Netzwelt hợp tác với một nhà cung cấp yêu cầu đồng ý bên thứ ba, cũng đã triển khai các biện pháp tối ưu hoá. Trước tiên, Netzwelt đã đảm bảo tránh những sai lầm đơn giản:
- Các tập lệnh yêu cầu đồng ý được tải không đồng bộ để không chặn các tài nguyên quan trọng.
- Sự đồng ý được định dạng để các phần tử lớn không đủ điều kiện là phần tử lớn nhất trong LCP.
- Lớp phủ yêu cầu đồng ý sử dụng
position: fixedđể tránh thay đổi. - Mặc dù quảng cáo chỉ hiển thị sau khi người dùng đồng ý, nhưng hệ thống sẽ giữ lại đủ khoảng trắng trước đó để tránh việc bố cục bị thay đổi khi quảng cáo tải.
- Đảm bảo việc hiển thị và vị trí của hộp thoại đồng ý không kích hoạt việc thay đổi bố cục. Một vấn đề được phát hiện và khắc phục ở đây là tuỳ chọn khoá cuộn của nhà cung cấp dịch vụ, tuỳ chọn này đã tắt tính năng cuộn trong khi hiển thị yêu cầu đồng ý bằng cách di chuyển nội dung chính của bài viết khi cuộn, gây ra sự thay đổi bố cục.
Sau công việc này, vẫn có sự khác biệt lớn giữa CLS trong trường hợp thực tế và trong phòng thí nghiệm. Mặc dù CLS trong phòng thí nghiệm gần bằng 0, nhưng giá trị trong trường lại cao hơn ngưỡng đáng kể. Sau khi điều tra, chúng tôi nhận thấy nguyên nhân là do sự thay đổi bố cục trong iframe đồng ý, hiện chỉ được ghi lại chính xác trong dữ liệu trường. Netzwelt tiếp tục làm việc với nhà cung cấp sự đồng ý bên thứ ba để cải thiện vấn đề này.
Mô hình thuê bao tin tức và Chỉ số quan trọng chính của trang web
Các nhà xuất bản tin tức đang chuyển sang mô hình thuê bao để tài trợ cho hoạt động báo chí. Mô hình này có liên quan đến Các chỉ số quan trọng về trang web vì mọi người sẽ không đăng ký theo dõi những trang web có trải nghiệm người dùng kém. Ngoài ra, người đăng ký không muốn thấy quảng cáo trong nội dung có tính phí, nhưng việc ẩn quảng cáo có thể khiến bố cục thay đổi. Trang web cần kiểm tra xem người dùng có quyền xem nội dung hay không và có hiển thị quảng cáo hay không. Các bước kiểm tra này có thể gây ra độ trễ bổ sung, dẫn đến việc thay đổi nội dung hoặc trải nghiệm người dùng kém.
Netzwelt đang sử dụng mô hình nội dung luôn miễn phí, nhưng người đăng ký sẽ không thấy quảng cáo. Họ đã điều tra nhiều cách để truy vấn và lưu trữ các quyền nhằm giảm độ trễ và thay đổi bố cục.
Truy vấn ban đầu về quyền luôn gây ra độ trễ, vì vậy, nếu truy vấn quyền mất quá nhiều thời gian, trang web sẽ hiển thị trạng thái gần đây nhất được lưu vào bộ nhớ đệm. Đối với người đăng ký mới, điều này có nghĩa là có một chút rủi ro khi người dùng trả phí nhìn thấy quảng cáo một lần. Người dùng vừa kết thúc gói thuê bao có thể thấy một lần tải không có quảng cáo trước khi quyền được lưu trữ cục bộ cập nhật. Sau khi xác định được các quyền, chúng sẽ được lưu trữ cục bộ bằng API LocalStorage để tránh độ trễ và thay đổi bố cục trong quá trình điều hướng trong tương lai.
Kết quả tối ưu hoá
Kết quả của các hoạt động tối ưu hoá của Netzwelt đã tự nói lên tất cả. Điểm số PageSpeed Insights của họ không có đối thủ nào sánh kịp trong số các nhà xuất bản tin tức trên toàn thế giới:
Các biện pháp tối ưu hoá này đã cải thiện trải nghiệm trang nhưng được thực hiện với mục tiêu hướng đến doanh nghiệp, đồng thời nâng cao trải nghiệm quảng cáo, khả năng hiển thị quảng cáo và doanh thu. Sau khi chạy lại trang được tối ưu hoá, Netzwelt đã thấy CPM tăng từ 20 đến 30%, với khả năng xem quảng cáo trên 75%. Tuy nhiên, Netzwelt giả định rằng mức tăng doanh thu tổng thể còn cao hơn nữa. Lưu lượng truy cập đã tăng lên kể từ khi ra mắt lại, có thể là do mức độ tương tác của người dùng cao hơn và tỷ lệ thoát thấp hơn nhờ trải nghiệm người dùng được cải thiện. Rất khó để định lượng và xác định mối quan hệ nhân quả giữa những hiệu ứng này với việc chạy lại, vì lưu lượng truy cập tự nhiên sẽ biến động và cũng có những hiệu ứng từ đại dịch toàn cầu. Những hiệu ứng gián tiếp này là một trong những lý do khiến Netzwelt luôn xem xét tất cả các con số khi đánh giá trang web của họ, chứ không chỉ CPM, vì chỉ số này có thể gây hiểu lầm. Chỉ số Core Web Vitals và trải nghiệm người dùng, kết hợp với tất cả các chỉ số liên quan đến quảng cáo, sẽ cung cấp thông tin thực tế.
Nhìn về tương lai
Netzwelt tin rằng trong tương lai không có cookie của bên thứ ba, tính năng nhắm mục tiêu theo bối cảnh thông qua nội dung, kết hợp với trải nghiệm người dùng và trải nghiệm trang tốt (bao gồm cả khả năng xem quảng cáo) là chìa khoá để thành công với tư cách là nhà xuất bản tin tức.
Do đó, Netzwelt không chỉ dừng lại ở Core Web Vitals mà còn nỗ lực hơn nữa bằng cách triển khai nhiều tính năng web hiện đại như Ứng dụng web tiến bộ (PWA), nội dung ngoại tuyến, chế độ tối, API chia sẻ trên web và Hoạt động đáng tin cậy trên web (TWA) bằng cách sử dụng API hàng hoá kỹ thuật số mới.