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 page loading 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 blog loading 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'/>That way, the browser will load an JS Adsense only so that page loading becomes faster.
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'/>The appearance as an example like this:
<!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 Adsense lazyload , 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'/>And examples of appearances like the following:
<!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 ->
<amp-custom style>
/ * 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 AMP ADS ads are loading late, try this trick to speed up loading ads.