现在大部分站长都申请了谷歌Google AdSense广告，然后挂上去，希望能有所收获。但是过的一段时间发现一个比较严重的问题，就是网站的加载速度受影响。虾皮路就遇到了这种情况，比如本来网站打开很快的，结果放上谷歌Google AdSense广告后，每次打开都要转圈圈，等谷歌Google AdSense广告全部显示出来后才算全部加载完成。这样给访客始终不太好的浏览体验。

之家也遇到过这样的情况，现在就分享一下加速谷歌广告导致网站加载慢的代码优化及网站加速教程。

优化谷歌AdSense广告代码
大家申请谷歌Google AdSense广告的时候，会发现最终的广告代码一般都是下面这个样子：

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

<ins class=“adsbygoogle”

style=“display:block”

data-ad-client=“ca-pub-id”

data-ad-slot=“id”

data-ad-format=“auto”

data-full-width-responsive=“true”></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

然后如果一个页面放多个广告的话，那么一个页面里面有很多个这样的代码。然后就会发现，其中每次都要调用一个https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js代码。其实是只要调用一次就行了的。谷歌官方也说到了：

问：如果我的网页上有多个广告单元，我是否要为每个广告单元添加 <script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script> ？
答：不，不需要，adsbygoogle.js 可以一次性加载。

那么既然官方都这样说了，那实际上可以将代码：

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

放到你主题 head 里，相当于每页都会加载。然后剩下的广告代码就精简为如下这样：

<ins class=“adsbygoogle”

style=“display:block”

data-ad-client=“ca-pub-id”

data-ad-slot=“id”

data-ad-format=“auto”

data-full-width-responsive=“true”></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

其实就是把那个JS移除了。

节省了多次调用adsbygoogle.js的时间。

但是光这样还不够，能不能让网页显示完成，然后再到谷歌Google AdSense广告显示呢？当然是可以的。

二、延迟显示谷歌AdSense广告
实际上就是JS监听加载。将每次网页加载完成后，才开始加载谷歌Google AdSense广告的JS，就是https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js。

那么，只要我们将下面的代码放到 head 里，保证每一页都有加载。（这个看你个人喜好影响不是很大，但是如果主题兼容性不好，可能回加载不出来。）

 

 

<script>

window.onload = function() {

setTimeout(function() {

let script = document.createElement(“script”);

script.setAttribute(“async”, “”);

script.src = “//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”;

document.bo<a href=“https://www.cnzzzj.com/tag/1349” title=“【查看含有[dy]标签的文章】” target=“_blank”>dy</a>.appendChild(script);

}, 2e3);

}

</script>

 

然后在每个广告位上继续放上相应的广告代码即可。和上面 head 里广告代码一样。

刷新缓存后，你会发现，网页会先展示，然后才到谷歌Google AdSense广告，网站优化加速完成了。

更新：googleapis.com国内已经解析到国内Google服务器，已经恢复正常。

最近一段时间，由于政策原因造成Google被严重干扰。GoogleApis已经不能正常使用，部分网页中的ajax.lug.ustc.edu.cn和fonts.loli.net访问速度过慢，拖慢整个网页速度。

可以替代GoogleAPIs的方案：

1、使用官方的源。如Jquery官方CDN：http://code.jquery.com/

2、把涉及的JS/CSS放到自己服务器上。

3、改为国内CDN节点。

这也是本文的主要内容，下面介绍一些各大靠谱CDN公共库：

国外：

【推荐】jsDelivr: https://www.jsdelivr.com/ 【还支持自动为github项目加速，需要release】

微软(Microsoft ASP.net CDN)：http://www.asp.net/ajaxlibrary/CDN.ashx   （支持https）

CDNJS.com提供的100多种JS库：http://cdnjs.com/  （支持https）

国内：

【推荐】BootCDN：https://www.bootcdn.cn/ 【国内靠谱CDN】

又拍云：http://jscdn.upai.com/ （支持https） 

又拍云 CDNJSCN：http://www.cdnjs.cn/ （支持https）维护者(Sofish/hfcorriez/ikbear@qiniu)

中科大库：https://servers.ustclug.org/2014/07/ustc-blog-force-google-fonts-proxy/[支持https，完全GoogleAPIs镜像] 维护者（LUG@ustc）

新浪云：http://lib.sinaapp.com/ （支持https，但库不全不新）

百度云：http://developer.baidu.com/wiki/index.php?title=docs/cplat/libs[不推荐，不支持https]

360卫士：http://libs.useso.com/  [不推荐，不支持https]

七牛CDN  StaticFile：http://www.staticfile.org/[不推荐，不支持https]维护者(Sofish/hfcorriez/ikbear@qiniu)

 

 ————————–以下内容可以不看———————————

什么是CDN公共库？

CDN公共库是指将常用的JS库存放在CDN节点，以方便广大开发者直接调用。与将JS库存放在服务器单机上相比，CDN公共库更加稳定、高速。一般的CDN公共库都会包含全球所有最流行的开源JavaScript库。
 

为什么要引用CDN公共库？

1.减少等待时间

CDN-Content Delivery Network（内容分发网络），通过各种各样的服务途径把你的一些静态内容分散开来，当用户的浏览器提交这些文件的链接请求，他们便会自动下载网络上最近的可用的文件。这样任何使用你的服务的用户从JS库下载都将获得比从你自己的服务器上下载更快的速度。

2.增加网页的同时载入速度

为了避免服务的过载，浏览器限制了同时连接的数目，依据不同的浏览器，这个限制可能是每个机房仅仅两个之少。
使用CDN公共库加载JS，使你本地服务器上更多服务可以同时进行。

3.更好的缓存

使用CDN公共库的最大好处是你的用户可能根本不需要下载jQuery.不论你的缓存多么强大，如果你用自己的服务器提供jQuery，那么你的用户至少要下载一次它，某个用户很有可能在他们浏览器的缓存区里下载了许多完全相同的jQuery.min.js的拷贝版本，但是当他们第一次访问你的网站的时候，这些拷贝版本会被忽略。

而当浏览器检测到同样版本的指向CDN公共库的链接，它就会知道这是下载同一个文件，不仅是CDN公共库的服务器会返回一个304（不需要修改文件的指令，即服务器上的文件未改动过）来回复一个重复的请求，而且会命令浏览器的缓存该文件长达一年的时间。

这意味着即使一些人访问了数百的使用CDN公共库的网站,他们只需要下载一次就够了。

googleapis.com是谷歌提供的福利，可以直接引用上面的文件和使用一些服务。因为谷歌服务器在宽带上的优势，很多网站，都加载了这个域名的一个或多个文件。

这个网站有多个子域名，其中被广泛应用的有ajax，fonts，maps，translate。

由于google已经完全被墙了，所以一些像ajax.lug.ustc.edu.cn等前端公共库无法加载。

最要命的就是ajax，比如说http://ajax.lug.ustc.edu.cn/ajax/libs/jquery/1.11.0/jquery.min.js;http://ajax.lug.ustc.edu.cn/ajax/libs/angularjs/1.2.13/angular.js。

这个东西没有拖下来，整个网站基本都访问不了。也就是说，googleapis.com影响了很多的网站。

在网上查找到一个解决方案，不用翻墙，通过chrome的插件拦截地址将地址替换成国内的CDN库；感觉还是挺方便的：

chrome插件对应的源代码地址：https://github.com/justjavac/ReplaceGoogleCDN。

内容如下：
Replace Google CDN

Chrome Web Store 安装地址：
https://chrome.google.cn/webstore/detail/replace-google-cdn/kpampjmfiopfpkkepbllemkibefkiice

    由于众所周知的原因，只需替换一个域名就可以继续使用Google提供的前端公共库了。同样，通过script标记引用这些资源，让网站访问速度瞬间提速吧骚年！

很多网站，尤其是国外网站，为了加快网站的速度，都是用了 Google 的 CDN。但是在天朝，由于某些原因，导致全球最快的 CDN 变成了全球最慢的。

于是，我写了这个插件，将 Google 的 CDN 替换成国内的。

本来我使用的是 360 提供的。360网站卫士常用前端公共库CDN服务

经网友提醒 360 的不支持 https，于是改成中科大的。

此插件包括三部分。

    ajax.lug.ustc.edu.cn - 前端公共库
    fonts.loli.net - 免费字体库
    themes.googleusercontent.com - fonts 有时会使用到这个里面的资源。

目前在免费CDN市场上，360因为“免费”而越做越大，加速乐做的很早。但因免费的节点不多，好多用户都被强走了。安全宝现在也还不错。目前国内的免费CDN市场已呈现三足鼎立趋势。

 

可为什么我还需要自己搭建CDN服务器来实现网站加速呢？

原因有三

1.要用国内的CDN服务器域名都需要备案。

2.免费的CDN服务器的稳定性和加速效果都不是很行。

3.付费的CDN服务器一般都贵的要死，一些草根站长根本用不起。

 

一、CDN服务器搭建前准备（本文以LuManager来搭建CDN服务器）

1.找一个国内访问速度快的服务器来安装LuManager控制面板。例如你在郑州，你可以选择郑州服务器。

2.LuManager控制面板支持Nginx、Tengine、Apache，自带了CDN缓存加速，设置简单，功能强大。

3、经过测试，LuManager CDN会自动为加速网站生成镜像缓存，用户访问将不再是源网站，而是CDN加速节点，对于静态文件加速效果。

 

二、LuManager CDN缓存加速创建教程1、登录LuManager后台控制面板，点击“添加网站”输入你想要绑定的域名。

1、登录LuManager后台控制面板，点击“添加网站”输入你想要绑定的域名。

2、然后点击“选填”选项，在创建特殊网站中选择“CDN网站加速”，填入你的源网站域名和源网站的IP地址。

 

3、在下方选择“开启CDN普通缓存”，CDN缓存文件类型默认值：html|htm|shtml|shtm|gif|jpg|jpeg|png|bmp|swf|js|css|mp3|mav|doc|dot|xls|pdf|txt|zip|rar|gz|tgz|bz2|tgz|rm|rmvb|ico

 

4、多个用半角|分隔，如jpg|png|gif等，请不要缓存php|asp|jsp|cgi|aspx等动态网页的内容，留空则使用默认值。

 

5、文件类型可以用正则进行匹配，如要匹配discuz的附件，可以用php.mod=attachment(由于php?mod=attachment中的?在正则中是特殊符号，需用.)

 

6、设置好可以到网站管理中看到网站CDN加速已经创建成功了。

 

三、设置DNS域名解析启用CDN缓存加速访问1、到域名的DNS管理处，将不同网络的用户设置访问到不同的CDN加速节点上，例如国外和国内用户区分，电信和联通用户区分，还有搜索引擎区分。

2、对于正在使用美国主机的朋友，让用户直接访问国内的CDN缓存加速服务器上，将在很大程度上提升网页的加载速度。这是我将我的Godaddy主机设置到国内的CDN机房中。

 

四、LuManager CDN加速访问效果1、从Ping值来看，设置LuManager CDN过后的网站用户访问不再是源站，而CDN节点上。

2、用站长测速工具，用了国内CDN加速的网页加载速度比没有用的提高了一倍。

 

五、LuManager CDN高级缓存模式和删除缓存内容1、如果要开启LuManager CDN高级缓存模式，请在创建CDN加速网站时选择该项。

 

2、高级缓存可以自由选择网站的索引文件(默认首页)，缓存文件在节点服务器上是“乱放”并加密过的，而且经常访问的文件会使用内存缓存，速度飞快。 建议对文件保密性和访问速度要求较高，并且内存充裕的用户选择此方式。

3、要想删除LuManager CDN缓存内容，可以先设置一个密码，也可以不设置。

 

4、例如部落要删除缓存文件，直接访问该网址：http://10.204.164.9:8888/index.php?m=Public&a=cache_delete&id=2&hash=哈稀值&file=文件名

 

5、哈稀值的算法：密码的md5值，即md5(password)。如果密码留空，则无需验证密码也可以删除（省略hash参数）

 

6、文件名：文件名相对网站根目录，以/开头，如要删除网站根目录下的mydir/file文件， 用/mydir/file便可（我们建议将文件名用urlencode进行编码）。如果是“文件+内存”模式，文件名为/lum_high_cache