Cách thêm Lazy Load quảng cáo Google Adsense cho Blog - Tôi Share

Chắc hẳn các bạn đang sử dụng Google Adsense để phân phát quảng cáo trên Blog để kiếm tiền đều biết một điều rằng khi gắn quảng cáo Google Adsense nên Blog nó khiến cho Blog của bạn tải trang chậm đi nếu không muốn nói là rất chậm. Bài viết này mình sẽ chia sẻ cho các bạn cách tối ưu và giúp Blog của bạn tải nhanh hơn khi gắn quảng cáo của Google Adsense và cách mình muốn chia sẻ ở bài viết này là sử dụng Lazy Load. Vậy đầu tiên Lazy Load là gì?

Lazy Load là gì?

Lazy load hay lazy loading là 1 kĩ thuật tối ưu khi làm web, thay vì tải toàn bộ trang web và render ngay từ đầu, kỹ thuật này cho phép tải ngay các thành phần cần thiết để hiển thị tới người dùng và trì hoãn các tài nguyên còn lại cho đến khi cần.

Ưu điểm của Lazy Loading

• Cải thiện trải nghiệm người dùng.
• Nâng cao website performance.
• Tiết kiệm tài nguyên.
• Gia tăng điểm số đánh giá website.

Google cũng luôn khuyên các nhà xuất bản cải thiện tốc đọ tải trang nhanh hơn. Họ luôn phát triển nhiều công cụ và bài viết để giúp các nhà xuất bản cải thiện tốc độ trang web. Để cải thiện tốc độ của trang web, Google khuyên bạn nên Lazy Loading để hạn chế những hình ảnh không xuất hiện tại màn hình đầu tiên.

Cách thêm Lazy Load quảng cáo Google Adsense cho Blog

Tiếp theo đến với vấn đề chính mình sẽ hướng dẫn hay chia sẻ cho các bạn thêm đoạn code Lazy Load cho Google Adsense để giúp Blog của bạn tải nhanh hơn.

Bước 1: Các bạn truy cập vào trang chỉnh sửa HTML của Blogger.

Bước 2: Tìm và xoá thẻ script của Google Adsense đi, code có dạng:

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

Bước 3: Copy và dán đoạn JavaScript bên dưới vào phía trước thẻ </body>.

<script>//<![CDATA[ 
window.addEventListener("scroll", function() {
    var adsenseCodehay = document.createElement("script");
    adsenseCodehay.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
    adsenseCodehay.async = true;
    adsenseCodehay.setAttribute('crossorigin', 'anonymous');
    adsenseCodehay.setAttribute('data-ad-client', 'ca-pub-xxxxxxxxxxxxxxxxx');
    document.body.appendChild(adsenseCodehay);
}, true);
//]]></script>

Bước 4: Thay ca-pub-xxxxxxxxxxxxxxxxx bằng AdSense Publisher ID của bạn.

Bước 5: Bấm lưu và kiểm tra Blog của bạn.

Lời kết

Vậy là xong, mình vừa chia sẻ cho các bạn Cách thêm Lazy Load quảng cáo Google Adsense cho Blog. Nếu có vấn đề gì khi thực hiện hay lỗi gì các bạn có thể comment xuống phía bên dưới bài viết mình sẽ hỗ trợ các bạn!