Google Adsense ảnh hưởng đến tốc độ tải trang web khi bạn đo tốc độ trang web bằng PageSpeed Insights. Sau đây chúng ta sẽ tìm hiểu cách khắc phục trang web chậm do đặt quảng cáo Google AdSense.
Giống như hình thu nhỏ của video YouTube, đáng lẽ Google nên sử dụng WebP cho hình ảnh của đơn vị quảng cáo. Thật là mỉa mai, đôi khi họ không bận tâm đến việc phục vụ với nén GZIP hoặc giữ cho tài nguyên được thu nhỏ. Tài nguyên khổng lồ và tải thêm nhiều tra cứu DNS, làm cho tốc độ trang của chúng ta tăng lên kinh khủng.
Giải pháp của chúng tôi là sẽ sẽ ngăn AdSense làm chậm việc tải nội dung gốc của website. Việc này sẽ ưu tiên nội dung website hiển thị trước các đơn vị quảng cáo của Google
Nói thật là tôi không thích Lazy load lắm ngay cả đối với lazy load hình ảnh. Nhưng tôi vẫn muốn chia sẻ một giải pháp này. Nếu bạn thích, bạn có thể thử một lần nếu bạn rất quan tâm đến việc phân phát nội dung chính trước, trước Đơn vị quảng cáo.
Hướng dẫn thiết lập Tải nhanh cho AdSense
Mã quảng cáo của Google AdSense ban đầu thường thế này:
Ví dụ
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- leaderboard -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Chi tiết kỹ thuật : Về cơ bản những gì xảy ra khi nó tải ở dạng không đồng bộ, có nghĩa là trình duyệt tiếp tục tải xuống tập lệnh adsbygoogle.js mà không chặn phân tích cú pháp HTML.
Nhưng ở đây, trong phương thức lazy load, tôi sẽ thay đổi phương thức ASYNC thành DEAX thực sự. Tập lệnh AdSense sẽ bắt đầu tải xuống trong trình duyệt, khi cửa sổ đã hoàn tất tải nội dung trang web chính. Theo cách này, khách truy cập không phải đợi để xem toàn bộ trang sau khi tải nội dung AdSense.
Với mục đích này, bạn không cần thực hiện bất kỳ thay đổi lớn nào trong đơn vị quảng cáo của mình. Đơn giản là chúng tôi sẽ thay đổi kiểu tải adsbygoogle.js sẽ làm tất cả điều kỳ diệu.
Tất cả bạn cần làm theo hai bước dưới đây
1. Trước hết, xóa tập lệnh bên dưới khỏi tất cả các đơn vị quảng cáo.
Ví dụ
<script async src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
2. Sau đó, thêm mã JavaScript bên dưới vào footer của website, ngay trước thẻ </body>
Ví dụ
<!--noptimize-->
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
<!--/noptimize-->Ghi chú: Thẻ noptizes là để tương thích với plugin Tự động tối đa hóa . Nó sẽ ngăn chặn việc tổng hợp mã hóa trình lazy load của AdSense.
Script này chính xác làm gì?
Script sẽ đảm bảo rằng đơn vị Quảng cáo AdSense của bạn sẽ bắt đầu tải và hiển thị sau khi hoàn tất tải trang web chính của bạn. Đó là lý do tại sao tôi đặt tên cho nó, Lazy Loading cho Google AdSense.