博客打开速度优化的一些小技巧

[typcn]

减小页面体积

因为客户端带宽有限 你需要精简 js / css 将页面（不含图片）控制到 300KB 以下

1. 尽量不要使用各种 UI 库，比如我的 blog 的 CSS 就是纯自写的，带上代码高亮才几百行
2. 只有部分浏览器才支持的代码，单独存出来，待页面加载完成后判断浏览器，再进行 ajax 读取
3. 列表页面的图片不要直接以 img 标签输出到浏览器上，浏览器会同时加载图片和脚本，带宽小的用户需要等待更长的时间来加载。待页面底部的 JS 加载完成后，再将图片 URL 放入 img 标签。
4. 使用第三方评论，且在文章加载完成后再加载评论框。
5. 使用 Jade 之类的模板引擎进行渲染，这样 HTML 代码自动就是压缩的，且不会误伤文章中的换行。

移除外链

找出那些 Google Fonts / Google JS / CloudFlare JS
将他们保存下来，传到你的服务器上，然后替换为自己的地址。

使用 CDN 静态化

重点来了（严肃）

打开 https://cloudedge.chinanetcenter.com/ 注册账号新增域名等待审核

像我这样设置（当然发了新文章要去刷一下缓存）

修改 DNS 等待生效，是不是非常快？

点击体验（SOFT AD） -> http://blog.eqoe.cn/

[typcn]

效果

[aiguozhedaodan]

重点的那个，的重点是用不起

[blacktulip]

需備案的服務應抵制
不過樓主的網站速度還可以。

[typcn]

@aiguozhedaodan 流量不大的话一个月几块钱就够了
@blacktulip 在国内不得不备案啊

[ericls]

ngx_pagespeed

[cnZary]

Pagespeed+1，我用Page speed，用了CDN反而慢了，因为经过处理的js css之类的不会被CDN拉过去，被CDN拉过去的都是源文件。。

[cnZary]

我是使用了2个Google开发的玩意..
https://developers.google.com/speed/pagespeed/module
https://code.google.com/p/mod-spdy/

[typcn]

@linzianplay @ericls

我也有 Pagespeed 被 CDN 拉过去也非常正常，最好的方法是你手动合并文件并压缩而不是由机器来完成。他不能完全合并在不同目录的 JS CSS，而且你修改 JS CSS 还要手动 SSH 上去删对应的文件来生效。

说用了 CDN 慢的，
你用的 CDN 真的有那么多节点吗？你用的 CDN 真的快吗？你有我的站速度快吗？

[Akiyori]

One size does not fit all.


我记得前几天还有 Fastly 的..

[typcn]

@Akiyori 智能解析有点问题，海外请访问 http://hwblog.eqoe.cn

[typcn]

@linzianplay 我的服务器上面也装有这个，之前用 WP 的时候觉得还不错，后来感觉有点累赘了

[cnZary]

@typcn 没备案，节点再多也没用，我说的慢，是七牛和又拍云哪一类的CDN，所以用了后加载还是没加载Page speed处理后的文件，如果是cname的那种CDN就还有效，主机在日本，无论如何也不会比在大陆块吧

[typcn]

@linzianplay 好吧，如果使用这类 CDN 的话，建议你将网站上的 JS CSS 下载下来，然后用工具合并之后再上传到七牛/又拍上面，最后修改主题内的 JS/CSS URL 即可。

[ericls]

@typcn 是的。 但是为了解决修改的问题 还可以引入的时候加上 ?var=xxx

[cnZary]

@typcn
@ericls
谢谢，其实只是略懒...没别的...周末我再弄弄吧😃

[yuhaaitao]

@typcn 这个具体操作？wp的

[Tink]

要备案的cdn都白瞎

[davidyin]

速度不错，就是字太大了。

[582033]

用varnish也不错

[kmvan]

我的 wp 博客速度如何？ http://inn-studio.com 带宽10-20kb/s，没用cdn和静态html缓存。

[typcn]

@kmvan 2 seconds 但是 WP 不抗打你懂得

[DearTanker]

我觉得我的站也快的一逼
http://www.huging.com/

[soulteary]

备案的站点的速度享受国内线路buff加成，做到基础之后，可以考虑功能上的扩展了。

----

常规站点提高速度无非以下几点： https://www.v2ex.com/t/160825

关于样式：
由页面程度复杂程度决定，如果程序结构简单（热插拔的功能较少），版面样式和使用的控件都有限，tag走白名单，自己写，如default page。反之，合理划分模块，适当选取reset，base等即可。

关于脚本：
考虑可访问性的情况下，热拔插的插件不应该影响内容，如果有影响，考虑降级兼容（配合样式布局）。
比如你脚本里使用的新的history对象，部分老浏览器就gg了。当然，如果不考虑老浏览器用户，直接用原生+自己剔除不用功能的jq/zepto/...都可以...

关于图片：
额外补充的是，抛弃老浏览器，直接base64打印（thumb而非origin）到页面里，没有啥问题。

关于懒加载：
首屏渲染需要值得考虑，首屏渲染配合的图片内容（类型，子类型）也需要考虑。

三方评论：

三方评论GG后的切换，是否有冗余，切换后功能是仅展示，还是full features

关于html minify：
压缩tag之间的无用内容，不触碰inline script，调试不时之需。

关于CDN：

国产CDN挺良心的，试用半个多月的七牛，速度蛮快的，切换不同地址的cdn也很方便（比如如果七牛有问题的话，就切换一个SAE APP做零时CDN），前提是你的程序设计的时候就考虑到cdn资源的使用，包括并不仅限于css/js/html inline resource...

[bobopu]

请教一下如何使google adsense快速加载？
网站页面已经优化到秒开的程度，但网页打开后adsense需要3-4秒才能展现出来，目前adsense设置的是异步加载方式。如何能让adsense与网页一样快。

[NoOneAI]

@bobopu 不是同步加载方式打开得更快么？

[mjever]

LZ网站确实秒开啊！

[bobopu]

@hunterzhang86 好吧，那我就改为同步。

[ivenvd]

用 Firefox 性能测试工具测了一下：

http://blog.eqoe.cn/： 初次缓存 1.24s 没有缓存 3.25s
http://www.kissuki.com/：初次缓存 0.16s 没有缓存 2.15s

其中我的博客没有经过任何优化……

[typcn]

@ivenvd 我的图片是在页面加载完成后才load的，还有多说评论和谷歌统计
全部都是异步，你不能用浏览器的工具看，而是看内容展现的时间。



你的站在我这里4秒，不挂梯子一分钟。还有谷歌字体

如果是海外用户 请使用 hwblog.eqoe.cn 进行访问

[kmvan]

@typcn 如果是海外用户 请使用 hwblog.eqoe.cn 进行访问
hwblog，这名字太那个了。。。 seaoutsideblog 才显得高端大气

[cst4you]

我也不厚道的来一发
http://www.beatstage.com

青云香港跑逻辑, upyun做静态CDN(从香港拉源, 不存储).

[zaqxsw123nm]

@ivenvd 额...http://www.kissuki.com 打开花了10几秒才加载完。。。。

[ivenvd]

@zaqxsw123nm 没翻墙吧……

[zaqxsw123nm]

@ivenvd 俩个打开都没翻墙啊。。。也没说要翻墙打开。。。

[chairuosen]

花式晒网速 http://ruosen.io/

[bubbles]

我现在用的七牛+SuperCache，做全局，对于我小站够用了

[ivenvd]

@zaqxsw123nm 呃，我默认 V2EX 上的都翻墙了……

[sangmingming]

http://blog.isming.me

hexo + gitcafe + github +七牛。也挺快的。

[fook]

一起晒 http://www.fangjue.com/

[daiv]

@sangmingming 好复杂 居然用了 4个服务，

[zgoing]

@fook 看到helloworld也是醉了

[lovexisen]

http://aihonglou.com
拉出来晒晒

[Bluek404]

http://bluek404.net
什么加速方法也没用，js什么的全部都是本地
直接静态扔在github page

我这边打开楼主博客5秒
我的2秒
没用缓存
是因为静态博客的原因？
山东电信

[typcn]

@Bluek404 慢主要是多说拖慢了，你要看页面出现时间，你可以试试把广告和多说屏蔽掉，通常可以在 100 毫秒左右内打开我的 blog

[Bluek404]

@typcn 看了下统计应该是图片问题
我博客除了多说的头像外没有任何图片

[typcn]

@Bluek404 图片是在页面其他元素加载完成后才加载，也是网宿应该没问题，估计是DNS是国外的解析错

[geekzu]

其实影响速度很大一部分因素是主机处理动态文件的时间过长

[kn007]

一点也不快，因为你是在国内的。我朋友在国内的都非常快。需要的话，我可以给你网址，给你看看。
我这个在国外的网站，一点不比你慢。没使用cdn。 http://kn007.net/

[typcn]

@kn007 确实很快，瞬间

[kn007]

@typcn 没想到你在，我正在换dns解析。另外方便提供下你的地区么。
我给你另外一个网址 fatesinger.com

[kn007]

@typcn 或许你可以清空dns缓存后，访问我的网站了： kn007.net

[typcn]

@kn007


刷了下DNS ，开了




你的15秒 我的1秒

[kn007]

看请求和大小。给个地区吧
另外一个地址呢。

[typcn]

@kn007 深圳电信，G口专线

另一个地址不错，2.08 s

[kn007]

广东东莞电信，8M家庭。看图。另外我觉得chrome的这个意义不算太大。你可以自己看图。。都是隐身模式

[kn007]

@typcn 忘记at了，看楼上

[typcn]

@kn007 看 Chrome 这个load time 确实没意义。。多说都是页面加载完成后再加载，比如你加载完了之后再 ajax 发个请求，又给你加时间。你把多说和广告屏蔽掉，测试在 100ms 左右可以加载玩 js css html

[kn007]

@typcn 是的，所以我觉得意义不大。我只认为人的实际感觉是真实的。如果你觉得也打开的快的话，那么我的是在国外。

[kn007]

话说我博客也没加载什么inject.js啊。。在你图反而有，在上面楼层你给别人测的也有。

[typcn]

@kn007 那是一个扩展的注入

[kn007]

@typcn 我觉得这样说的意义不大，如果抛去外部和图片。那我们也不慢，可能比你慢在响应时间。
你追求的可能只是数字上的好看，而不是实际感受。实际速度快才是有意义的。我上你的网站，我还等待广告图片显示，还要等你加载多说。而你告诉我你只要看js、css、html。这么说来越简单网站，越离目标服务器近肯定是最快的

[ryd994]

自己写的，不minify只会更慢
外链不是不用，而是用国内的，只会比自己的CDN快
现代的新浏览器都是异步加载图片的，有什么显示什么。
忽略不缓存头又是何必？何不自己服务器调好设置？

[songz]

测试页确实快