Hướng dẫn tạo Lazy load cho Google Adsense

Google AdSense là một chương trình kiếm tiền do Google điều hành. Nó vẫn là cách đáng tin cậy nhất để kiếm tiền trực tuyến cho nhiều nhà xuất bản. Một vấn đề phổ biến mà các nhà xuất bản thường gặp phải là Google AdSense ảnh hưởng đến tốc độ blog ban đầu của chúng tôi. Do không có quyền kiểm soát để tối ưu hóa tài nguyên, chúng tôi chỉ cảm thấy buồn.

Giống như hình thu nhỏ video YouTube, họ nên sử dụng WebP cho hình ảnh đơn vị quảng cáo. Thật trớ trêu, đôi khi họ không bận tâm đến việc nén GZIP hoặc giảm thiểu tài nguyên. Tài nguyên khổng lồ và vô số tra cứu DNS bổ sung, giết chết tốc độ trang của chúng tôi như địa ngục.

@AdSense Tại sao quá chậm?

– TheGulshanKumar

Cách đây vài tháng, khi tôi tweet vấn đề tốc độ đơn vị quảng cáo, tôi không nhận được bất kỳ phản hồi thỏa đáng nào. Tôi đã trở lại chính mình với một giải pháp sẽ ngăn AdSense làm chậm quá trình tải nội dung gốc của bạn.

Thành thật mà nói, cá nhân tôi không phải là một fan hâm mộ lớn của tải lười biếng ngay cả đối với hình ảnh. Nhưng tôi vẫn muốn chia sẻ một lựa chọn. Nếu muốn, bạn có thể thử một lần nếu bạn thực sự 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.

Đương nhiên, đây là giao diện của mã đơn vị quảng cáo gốc.

<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ì sẽ 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 DEFER thực. Tập lệnh AdSense sẽ bắt đầu tải xuống trong trình duyệt, chỉ một lần cửa sổ sẽ hoàn tất việc tải trang web chính. Bằng cách này, khách truy cập không phải đợi để xem nhanh toàn bộ trang cho AdSense.

Vì 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 được tất cả những điều kỳ diệu.

Tất cả những gì bạn cần làm theo hai bước dưới đây

Trước hết, hãy xóa tập lệnh bên dưới khỏi tất cả các đơn vị quảng cáo hiện có.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Bây giờ nó sẽ xuất hiện như thế này

<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>

Sau đó, thêm mã JavaScript bên dưới vào Chân trang chủ đề của bạn, có thể ngay trước thẻ body.

Phương pháp 1. sự kiện onload

Gợi ý : Có thẻ Noptimize để tương thích với Autoptimize . Nó sẽ ngăn việc tổng hợp JS nội tuyến của trình lazy load AdSense.

<!--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-->

Mã trên, bạn có thể sử dụng thông qua tùy chọn Chủ đề nếu có sẵn để thêm tập lệnh tùy chỉnh
Đối với Genesis, hãy sử dụng qua plugin Genesis Simple Hooks với tùy chọn genesis_after
hoặc plugin Đầu trang và Chân trang cho bất kỳ chủ đề nào khác.

Chính xác thì script này làm gì?

Tập lệnh này 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 xong trang web chính của bạn. Đó là lý do tại sao tôi đặt tên nó là Lazy Loading cho Google AdSense.

Phương pháp 2. Sự kiện onscroll

Cách tiếp cận này sẽ tải đơn vị quảng cáo khi người dùng cuộn trang web của bạn.

<script type='text/javascript'>
//<![CDATA[
var la=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===la||0!=document.body.scrollTop&&!1===la)&&(!function()
{var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),la=!0)},!0);
//]]>
</script>

Tôi hy vọng điều này sẽ giúp bạn trong việc cải thiện hiệu suất của trang web của bạn.