The Latest Way to Speed Up Loading Adsense Ads - By
default for Adsense ads that use asynchronous ads will appear after all page
elements are loaded. If the loading page is slow, then loading Adsense ads will
be even slower.
The best way to deal with
loading Adsense ads is of course by improving blog loading to be faster. The
faster the blog page loads, the faster Adsense ads will appear.
And one way to speed up
loading a blog is to simply use 1 piece of JS Adsense, meaning that JS Adsense
should not be stored in each ad slot or in each ad code, but just save the code
like this above the code </body> .
<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
Just imagine if we store JS
Adsense in each ad slot or in each ad code, then the browser will load JS
Adsense as many as the number of JS.
And now I will share the
latest ways to speed up loading of AdSense ads. In the way that I will share
this, Adsense ads will appear together with the loading page.
The trick is to use <link
rel="preload"> for JS Adsense. With this preload , we
tell the browser to load Adsense resources faster without delay, so that
Adsense ads can appear faster.
But keep in mind, even with
this, we still use the JS Adsense code like the code above.
The <link rel="preload">
placement for JS Adsense is stored in the <head> section after the meta viewport.
The following is the code:
<link as='script' href='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' rel='preload'/><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,minimum-scale=1"/>
<meta name="description" content="This is Description"/>
<link as='script' href='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' rel='preload'/>
<style>
/* Add your styles here */
</style>
<link rel="canonical" href="."/>
<title>My Page</title>
</head>
<body>
<h1>Hello World</h1>
<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
</body>
</html>But if you use Adsenselazyload , then you don't need to use this trick.
And for AMP HTML use the
following code:
<link as='script' href='https://cdn.ampproject.org/v0/amp-ad-0.1.js' rel='preload'/>
<link as='script' href='https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js' rel='preload'/><!doctype html>
<html amp="amp" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,minimum-scale=1"/>
<meta name="description" content="This is the AMP Boilerplate."/>
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js"/>
<link as='script' href='https://cdn.ampproject.org/v0/amp-ad-0.1.js' rel='preload'/>
<link as='script' href='https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js' rel='preload'/>
<link rel="preconnect dns-prefetch" href="https://fonts.gstatic.com/" crossorigin=""/>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
<script async='async' custom-element='amp-auto-ads' src='https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js'/>
<!-- Import other AMP Extensions here -->
<style amp-custom>
/* Add your styles here */
</style>
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet"/>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible.selected}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible.selected}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible.selected}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible.selected}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible.selected}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<link rel="canonical" href="."/>
<title>My AMP Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>For bloggers who say that the AMP ADS ad loading is late, try this trick to speed up the loading of the ad. Maybe usefull….