The site is a SPA site build with on reatJS with Next.js generator.
Using Chrome Audit report reports, the publisher Ads section shows up this issue:
Avoid bottleneck requests 4.4 s spent blocked on requests
for the 3rd-party resources:
- …js/adsbygoogle.js(pagead2.googlesyndication.com) 1,8535 ms
- …r20190131/show_ads_impl_fy2019.js(pagead2.googlesyndication.com) 1.502 ms
- …chunks/...(mysite.com) 1.200 ms
I am already using preconnect hint inside the headers, using link tag this hint:
<link rel="preconnect" href="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" as="script"/>
preload hint as more or less the same effect that preconnect as i can measure.
I still have to load the script with scrip tag, like this, otherwise adds are not rendered:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
I guess the huge delay is because the Ad tags are render by the javascript, so some resources from google can only be load after, but that is how static generated sites are made, so can't change that.
How can i improve performance of google Ads for a site build on ReactJS?
Note: I am using react-adsense component.
Update: I am using static generation of Next.js static builder, so google ads should see a regular web site page.
Update 2: By disabling javascript i can see the html as it is render from the server. The render page has all visible elements. Ads resources are loaded right at the top as recommended. I also added a preload hint. Here is the relevant part of the page headers:
<html>
<head>
<link rel="preload" href="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" as="script"><link rel="preload" href="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" as="script">
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
...
Can't figure out what is causing the bottle neck. Using the network tab i can see that Adsbygoogle.js starts to load in less than 100s and finish loading much early then 200ms.
The test on my old iphone is fast.