Áp dụng kĩ thuật Delay JS cho AdSense để tăng điểm PageSpeed Insights

Khi nhắc đến AdSense nhiều bạn sẽ ngại gắn lên Website của mình. Vì nó ảnh hưởng đến tốc độ load trang web và giảm điểm PageSpeed Insights của Google.

Thứ hạng website trên các công cụ tìm kiếm cũng từ đó mà tụt theo.

Tốc độ trước khi tối ưu AdSense

Truy cập Page Speed insights hoặc công cụ Lighthouse trong trình duyệt Chrome để kiểm tra tốc độ Website khi AdSense chưa được tối ưu.

Delay AdSense

Thay vì sử dụng mã nhúng AdSense cung cấp. Tôi sẽ sử dụng kĩ thuật setTimeout trong JavaScript để trì hoãn thực thi mã AdSense sau 3,5 giây.

Sự đánh đổi của việc Delay JS là doanh thu quảng cáo chắc chắn sẽ giảm nếu thời gian người dùng xem trang của bạn ít hơn "3,5 giây + số giây load của trang".

Đối với quảng cáo Units bạn chỉ cần dán thẻ <ins> vào vị trí cần hiển thị mà không phải thêm phần <script>.

Đây là mã JavaScript có chức năng Delay thực thi AdSense:

window.addEventListener("load", () => {
	setTimeout(function () {
		// Load adsbygoogle.js after 3,5s
		var script_adsense = document.createElement('script');
		// Replace "src" with the url provided for you by AdSense
		script_adsense.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-YOURCODE';
		script_adsense.setAttribute('crossOrigin', 'anonymous');
		document.body.appendChild(script_adsense);
		// Push multiple Ads
		jQuery('.adsbygoogle').each(function () { (adsbygoogle = window.adsbygoogle || []).push({}); });
	}, 3500);
});

Mã này bạn có thể áp dụng cho toàn bộ kiểu Quảng Cáo do Google AdSense cung cấp, bao gồm "Auto ads" và "Ad units" mà không cần phải lặp lại các hàm push({}).

Bạn có thể dùng các plugin Code snippets để dán mã này vào cuối trang và trước thẻ đóng </body> nhằm đảm bảo quảng cáo được hiển thị đầy đủ.

Đây là cách tôi gắn mã Delay AdSense trong Oxygen Builder.

Cách mới. Sử dụng kĩ thuật bắt sự kiện

Trong quá trình viết bài hướng dẫn này. Tôi chợt nhớ đến hàm bắt sự kiện trong JavaScript.

Thế là bắt đầu viết lại mã và test tốc độ. Ngạc nhiên thay, cách làm này đạt điểm số tuyệt đối như cách delay 3,5s mà quảng cáo vẫn được load sớm khi người dùng tương tác.

Vì tôi sử dụng Wordpress và được load sẵn tệp jQuery nên viết mã jQuery cho ngắn gọn:

jQuery(window).one("touchmove.adsense mousemove.adsense scroll.adsense", () => {
	// Load adsbygoogle.js
	var script_adsense = document.createElement('script');
	// Replace "src" with the url provided for you by AdSense
	script_adsense.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-YOURCODE';
	script_adsense.setAttribute('crossOrigin', 'anonymous');
	document.body.appendChild(script_adsense);
	// Push multiple Ads
	jQuery('.adsbygoogle').each(function () { (adsbygoogle = window.adsbygoogle || []).push({}); });
	// Turn off events
	jQuery(window).off(".adsense");
});

Sau khi hoàn tất và kết quả cho 2 cách đều đạt điểm 100/100 như lúc chưa gắn AdSense.