Chèn quảng cáo Google Adsense không mất điểm PageSpeed Insights


Thường thì sau khi thêm quảng cáo Google AdSense vào website, hiệu năng web khi phân tích PageSpeed Insights sụt giảm nghiêm trọng. Bài viết này sẽ giúp khắc phục điều đó.

Chèn quảng cáo Google Adsense không mất điểm PageSpeed Insights

Tìm hiểu về mã Quảng cáo được cung cấp

Khi tạo đơn vị quảng cáo mới, bạn sẽ được Adsense cung cấp một đoạn mã để chèn vào trang web, trông nó như thế này:


  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-xxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Kết quả khi phân tích PageSpeed Insights trước và sau khi thêm ads

hiệu năng web khi phân tích PageSpeed Insights sụt giảm nghiêm trọng

Điểm PageSpeed Insights của mình tụt từ 99 xuống còn 69 (đó là trên máy tính chứ điện thoại tụt còn có 34 :< ). Thế nên mình đã đi tìm kiếm giải pháp để tối ưu việc đặt quảng cáo Adsense mà không mất điểm PageSpeed Insights

Phương Pháp đặt quảng cáo Adsense không mất điểm PageSpeed Insights

Nhìn sơ qua mình thấy đoạn script này làm cho trang web tải khá lâu (vì vừa phải thực thi script và source của quảng cáo)

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

Mình thử bỏ đi và kết quả PageSpeed Insights đã trở về bình thường. Tuy thế thì lấy đâu ra ads mà hiển thị nữa??. Một ý tưởng lóe lên trong đầu mình: Khi người dùng có thao tác cuộn trang xuống thì đoạn script kia sẽ được thực thi. Vì các máy chủ của PageSpeed Insights không thể cuộn trang nên sẽ quảng cáo sẽ không hiển thị và hiệu suất trang sẽ không ảnh hưởng.

Viết javascript

Ở đây ai không rành javascript thì bỏ qua nha. Mình giải thích tí để các bạn hiểu về cách thức thực hiện của nó thôi:v

Tạo một biến loadads gắn với hàm có chức năng chèn script Adsense vào trang web. Khi gọi tới biến loadads thì hàm đó được thực thi

var loadads = function () {
  var an = document.createElement('script')
  an.async = true;
  an.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'
  var sc = document.getElementsByTagName('script')[0]
  sc.parentNode.insertBefore(an, sc);
}

Bắt sự kiện cuộn trang bằng addEventListener và gọi tới loadads

window.addEventListener('scroll', loadads);

Thế là mỗi khi cuộn trang thì trình duyệt lại add script đó vào 1 lần. Mình sẽ thêm vào hàm của biến loadAds removeEventListener để xóa đi sự kiện cuộn trang gắn với loadAds vừa nãy

var loadads = function () {
  var an = document.createElement('script')
  an.async = true;
  an.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'
  var sc = document.getElementsByTagName('script')[0]
  sc.parentNode.insertBefore(an, sc);
  window.removeEventListener('scroll', loadads);
}

Bonous: Chèn thêm window.addEventListener('scroll', loadads); cho ae dùng PC chỉ cần rê chuột là quảng cáo sẽ hiện =))

Code chèn quảng cáo Google Adsense không mất điểm PageSpeed Insights

Hãy chèn đoạn code sau vào những trang cần load quảng cáo

<script> /* <![CDATA[ */
window.addEventListener("load", () => {
    var loadads = function () {
        var an = document.createElement('script')
        an.async = true;
        an.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'
        var sc = document.getElementsByTagName('script')[0]
        sc.parentNode.insertBefore(an, sc);
        window.removeEventListener('scroll', loadads);
        window.removeEventListener('mouseover', loadads);
    }
    window.addEventListener('scroll', loadads);
    window.addEventListener('mouseover', loadads);
});
/* ]]> */</script>

Ae dùng blogger có thể thực hiện theo hướng dẫn bên dưới nha

  • Bước 1: Các bạn vào Blogger > Chủ Đề > Chỉnh sửa HTML

  • Bước 2: Tìm thẻ </body> và chèn Code sau trên nó:

    Đôi lúc thẻ </body> nó bị mã hóa thành &lt;/body&gt;, bạn chèn lên trên nó nhé

Lưu ý: thay https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js bằng url trong mã của bạn

Nhớ là dùng code này rồi thì bỏ hết <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> nha.

Lời kết

Code này sẽ giúp ích khi bạn tối ưu điểm PageSpeed Insights, thực tế thì trải nghiệm người dùng vẫn bị ảnh hưởng vì phải load khá nhiều. Hi vọng ae cảm thấy hữu ích và thêm kỹ năng tối ưu cho website.

From LapTrinh5s with