Notification texts go here. Contact Us Buy Now!
$10.00
10
$000

Get your blog ready With details you won't find anywhere.

Insert Google Adsense ads without losing PageSpeed ​​Insights points

abdalrahman
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated


insert-google-adsense-ads-without-losing-pagespeed-​​insights-points



Often after adding Google AdSense ads to the website, the web performance of PageSpeed ​​Insights analysis drops dramatically. This article will help fix that.

Learn about the Promotion code provided

When creating a new ad unit, you will be provided by Adsense with a piece of code to insert into your website, it looks like this:

  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins         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>

Results when analyzing PageSpeed ​​Insights before and after adding ads

insert-google-adsense-ads-without-losing-pagespeed-​​insights-points


My PageSpeed ​​Insights score dropped from 99 to 69 (that's on computers, but phones dropped to 34 :< ). So I went looking for a solution to optimize the placement of Adsense ads without losing PageSpeed ​​Insights points

How to place Adsense ads without losing PageSpeed ​​Insights points

At a glance, I see this script makes the website load quite long (because it has to execute the script and the source of the ad)

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

I tried leaving and the PageSpeed ​​Insights results returned to normal. However, where to get the ads to display anymore??. An idea flashed in my mind: When the user scrolls down the page, the other script will be executed. Since PageSpeed ​​Insights servers can't scroll the page, ads won't show and page performance won't be affected.

Write javascript

Anyone who is not familiar with javascript here, please ignore. I'll explain it a bit so you guys can understand how it works :v

Create a variable loadads associated with the function to insert Adsense script into the website. When the loadads variable is called, the function is executed

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);}

Catch the page scroll event with addEventListener and call loadads

window.addEventListener('scroll', loadads);

So every time the page scrolls, the browser adds that script once. I will add the function loadAds removeEventListener variable to remove the page scroll event associated with the loadAds just now

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: Insert window.addEventListener('scroll', loadads); For you to use PC, just drag the mouse and the ad will appear =))

Code to insert Google Adsense ads without losing PageSpeed ​​Insights points

Please insert the following code into the pages that need to load ads

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

If you use blogger, you can follow the instructions below

  • Step 1: Go to Blogger > Themes > Edit HTML

  • Step 2: Find the </body> tag and insert the following Code above it:

    Sometimes the </body> tag is encoded as </body> , you can insert it on top of it

Note: replace https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js with the url in your code

Remember to use this code, then remove all <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> .

Epilogue

This code will help when you optimize PageSpeed ​​Insights, in fact, the user experience is still affected because it has to load a lot. Hope you find it useful and add optimization skills to the website.

Read Also

Getting Info...

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.