V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
typcn
V2EX  ›  分享创造

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

  •  
  •   typcn ·
    typcn · 2015-01-23 06:45:07 +08:00 · 5948 次点击
    这是一个创建于 3593 天前的主题,其中的信息可能已经有所发展或是发生改变。

    减小页面体积

    因为客户端带宽有限 你需要精简 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/

    63 条回复    2015-01-24 00:12:30 +08:00
    typcn
        1
    typcn  
    OP
       2015-01-23 06:50:48 +08:00


    效果
    aiguozhedaodan
        2
    aiguozhedaodan  
       2015-01-23 06:52:31 +08:00 via Android   ❤️ 1
    重点的那个,的重点是用不起
    blacktulip
        3
    blacktulip  
       2015-01-23 06:52:46 +08:00
    需備案的服務應抵制
    不過樓主的網站速度還可以。
    typcn
        4
    typcn  
    OP
       2015-01-23 07:04:11 +08:00   ❤️ 1
    @aiguozhedaodan 流量不大的话一个月几块钱就够了
    @blacktulip 在国内不得不备案啊
    ericls
        5
    ericls  
       2015-01-23 07:05:03 +08:00 via Android
    ngx_pagespeed
    cnZary
        6
    cnZary  
       2015-01-23 07:10:21 +08:00 via Android
    Pagespeed+1,我用Page speed,用了CDN反而慢了,因为经过处理的js css之类的不会被CDN拉过去,被CDN拉过去的都是源文件。。
    cnZary
        7
    cnZary  
       2015-01-23 07:13:50 +08:00 via Android   ❤️ 1
    typcn
        8
    typcn  
    OP
       2015-01-23 07:16:01 +08:00
    @linzianplay @ericls

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

    说用了 CDN 慢的,
    你用的 CDN 真的有那么多节点吗?你用的 CDN 真的快吗?你有我的站速度快吗?
    Akiyori
        9
    Akiyori  
       2015-01-23 07:16:30 +08:00
    One size does not fit all.


    我记得前几天还有 Fastly 的..
    typcn
        10
    typcn  
    OP
       2015-01-23 07:17:08 +08:00
    @Akiyori 智能解析有点问题,海外请访问 http://hwblog.eqoe.cn
    typcn
        11
    typcn  
    OP
       2015-01-23 07:20:28 +08:00
    @linzianplay 我的服务器上面也装有这个,之前用 WP 的时候觉得还不错,后来感觉有点累赘了
    cnZary
        12
    cnZary  
       2015-01-23 07:30:05 +08:00 via Android
    @typcn 没备案,节点再多也没用,我说的慢,是七牛和又拍云哪一类的CDN,所以用了后加载还是没加载Page speed处理后的文件,如果是cname的那种CDN就还有效,主机在日本,无论如何也不会比在大陆块吧
    typcn
        13
    typcn  
    OP
       2015-01-23 07:31:39 +08:00
    @linzianplay 好吧,如果使用这类 CDN 的话,建议你将网站上的 JS CSS 下载下来,然后用工具合并之后再上传到七牛/又拍上面,最后修改主题内的 JS/CSS URL 即可。
    ericls
        14
    ericls  
       2015-01-23 07:36:09 +08:00 via Android
    @typcn 是的。 但是为了解决修改的问题 还可以引入的时候加上 ?var=xxx
    cnZary
        15
    cnZary  
       2015-01-23 07:39:26 +08:00 via Android
    @typcn
    @ericls
    谢谢,其实只是略懒...没别的...周末我再弄弄吧😃
    yuhaaitao
        16
    yuhaaitao  
       2015-01-23 07:53:29 +08:00
    @typcn 这个具体操作?wp的
    Tink
        17
    Tink  
       2015-01-23 07:56:51 +08:00 via iPhone
    要备案的cdn都白瞎
    davidyin
        18
    davidyin  
       2015-01-23 08:16:54 +08:00
    速度不错,就是字太大了。
    582033
        19
    582033  
       2015-01-23 08:41:30 +08:00
    用varnish也不错
    kmvan
        20
    kmvan  
       2015-01-23 08:42:51 +08:00 via Android
    我的 wp 博客速度如何? http://inn-studio.com 带宽10-20kb/s,没用cdn和静态html缓存。
    typcn
        21
    typcn  
    OP
       2015-01-23 08:54:12 +08:00
    @kmvan 2 seconds 但是 WP 不抗打你懂得
    DearTanker
        22
    DearTanker  
       2015-01-23 08:55:07 +08:00
    我觉得我的站也快的一逼
    http://www.huging.com/
    soulteary
        23
    soulteary  
       2015-01-23 09:00:56 +08:00
    备案的站点的速度享受国内线路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
        24
    bobopu  
       2015-01-23 09:09:39 +08:00
    请教一下如何使google adsense快速加载?
    网站页面已经优化到秒开的程度,但网页打开后adsense需要3-4秒才能展现出来,目前adsense设置的是异步加载方式。如何能让adsense与网页一样快。
    hunterzhang86
        25
    hunterzhang86  
       2015-01-23 09:22:24 +08:00
    @bobopu 不是同步加载方式打开得更快么?
    mjever
        26
    mjever  
       2015-01-23 09:28:52 +08:00
    LZ网站确实秒开啊!
    bobopu
        27
    bobopu  
       2015-01-23 09:38:02 +08:00
    @hunterzhang86 好吧,那我就改为同步。
    ivenvd
        28
    ivenvd  
       2015-01-23 10:00:20 +08:00
    用 Firefox 性能测试工具测了一下:

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

    其中我的博客没有经过任何优化……
    typcn
        29
    typcn  
    OP
       2015-01-23 10:28:57 +08:00
    @ivenvd 我的图片是在页面加载完成后才load的,还有多说评论和谷歌统计
    全部都是异步,你不能用浏览器的工具看,而是看内容展现的时间。



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

    如果是海外用户 请使用 hwblog.eqoe.cn 进行访问
    kmvan
        30
    kmvan  
       2015-01-23 10:51:58 +08:00   ❤️ 1
    @typcn 如果是海外用户 请使用 hwblog.eqoe.cn 进行访问
    hwblog,这名字太那个了。。。 seaoutsideblog 才显得高端大气
    cst4you
        31
    cst4you  
       2015-01-23 10:52:57 +08:00
    我也不厚道的来一发
    http://www.beatstage.com

    青云香港跑逻辑, upyun做静态CDN(从香港拉源, 不存储).
    zaqxsw123nm
        32
    zaqxsw123nm  
       2015-01-23 11:08:20 +08:00
    @ivenvd 额...http://www.kissuki.com 打开花了10几秒才加载完。。。。
    ivenvd
        33
    ivenvd  
       2015-01-23 11:09:06 +08:00
    @zaqxsw123nm 没翻墙吧……
    zaqxsw123nm
        34
    zaqxsw123nm  
       2015-01-23 11:12:43 +08:00
    @ivenvd 俩个打开都没翻墙啊。。。也没说要翻墙打开。。。
    chairuosen
        35
    chairuosen  
       2015-01-23 11:14:39 +08:00
    花式晒网速 http://ruosen.io/
    bubbles
        36
    bubbles  
       2015-01-23 11:42:55 +08:00
    我现在用的七牛+SuperCache,做全局,对于我小站够用了
    ivenvd
        37
    ivenvd  
       2015-01-23 11:44:25 +08:00
    @zaqxsw123nm 呃,我默认 V2EX 上的都翻墙了……
    sangmingming
        38
    sangmingming  
       2015-01-23 12:56:45 +08:00
    http://blog.isming.me

    hexo + gitcafe + github +七牛。也挺快的。
    fook
        39
    fook  
       2015-01-23 14:47:27 +08:00
    daiv
        40
    daiv  
       2015-01-23 18:40:51 +08:00
    @sangmingming 好复杂 居然用了 4个服务,
    zgoing
        41
    zgoing  
       2015-01-23 18:44:32 +08:00
    @fook 看到helloworld也是醉了
    lovexisen
        42
    lovexisen  
       2015-01-23 19:00:10 +08:00
    http://aihonglou.com
    拉出来晒晒
    Bluek404
        43
    Bluek404  
       2015-01-23 20:05:45 +08:00
    http://bluek404.net
    什么加速方法也没用,js什么的全部都是本地
    直接静态扔在github page

    我这边打开楼主博客5秒
    我的2秒
    没用缓存
    是因为静态博客的原因?
    山东电信
    typcn
        44
    typcn  
    OP
       2015-01-23 20:07:43 +08:00
    @Bluek404 慢主要是多说拖慢了,你要看页面出现时间,你可以试试把广告和多说屏蔽掉,通常可以在 100 毫秒左右内打开我的 blog
    Bluek404
        45
    Bluek404  
       2015-01-23 20:13:59 +08:00
    @typcn 看了下统计应该是图片问题
    我博客除了多说的头像外没有任何图片
    typcn
        46
    typcn  
    OP
       2015-01-23 20:16:09 +08:00
    @Bluek404 图片是在页面其他元素加载完成后才加载,也是网宿应该没问题,估计是DNS是国外的解析错
    geekzu
        47
    geekzu  
       2015-01-23 21:59:17 +08:00 via Android
    其实影响速度很大一部分因素是主机处理动态文件的时间过长
    kn007
        48
    kn007  
       2015-01-23 22:11:50 +08:00
    一点也不快,因为你是在国内的。我朋友在国内的都非常快。需要的话,我可以给你网址,给你看看。
    我这个在国外的网站,一点不比你慢。没使用cdn。 http://kn007.net/
    typcn
        49
    typcn  
    OP
       2015-01-23 22:13:30 +08:00
    @kn007 确实很快,瞬间
    kn007
        50
    kn007  
       2015-01-23 22:14:25 +08:00
    @typcn 没想到你在,我正在换dns解析。另外方便提供下你的地区么。
    我给你另外一个网址 fatesinger.com
    kn007
        51
    kn007  
       2015-01-23 22:15:48 +08:00
    @typcn 或许你可以清空dns缓存后,访问我的网站了: kn007.net
    typcn
        52
    typcn  
    OP
       2015-01-23 22:15:57 +08:00
    @kn007


    刷了下DNS ,开了




    你的15秒 我的1秒
    kn007
        53
    kn007  
       2015-01-23 22:17:20 +08:00
    看请求和大小。给个地区吧
    另外一个地址呢。
    typcn
        54
    typcn  
    OP
       2015-01-23 22:18:48 +08:00
    @kn007 深圳电信,G口专线

    另一个地址不错,2.08 s
    kn007
        55
    kn007  
       2015-01-23 22:23:07 +08:00
    广东东莞电信,8M家庭。看图。另外我觉得chrome的这个意义不算太大。你可以自己看图。。都是隐身模式


    kn007
        56
    kn007  
       2015-01-23 22:23:25 +08:00
    @typcn 忘记at了,看楼上
    typcn
        57
    typcn  
    OP
       2015-01-23 22:26:08 +08:00
    @kn007 看 Chrome 这个load time 确实没意义。。多说都是页面加载完成后再加载,比如你加载完了之后再 ajax 发个请求,又给你加时间。你把多说和广告屏蔽掉,测试在 100ms 左右可以加载玩 js css html
    kn007
        58
    kn007  
       2015-01-23 22:30:38 +08:00
    @typcn 是的,所以我觉得意义不大。我只认为人的实际感觉是真实的。如果你觉得也打开的快的话,那么我的是在国外。
    kn007
        59
    kn007  
       2015-01-23 22:38:33 +08:00
    话说我博客也没加载什么inject.js啊。。在你图反而有,在上面楼层你给别人测的也有。
    typcn
        60
    typcn  
    OP
       2015-01-23 22:39:45 +08:00
    @kn007 那是一个扩展的注入
    kn007
        61
    kn007  
       2015-01-23 22:46:24 +08:00
    @typcn 我觉得这样说的意义不大,如果抛去外部和图片。那我们也不慢,可能比你慢在响应时间。
    你追求的可能只是数字上的好看,而不是实际感受。实际速度快才是有意义的。我上你的网站,我还等待广告图片显示,还要等你加载多说。而你告诉我你只要看js、css、html。这么说来越简单网站,越离目标服务器近肯定是最快的
    ryd994
        62
    ryd994  
       2015-01-23 22:52:44 +08:00
    自己写的,不minify只会更慢
    外链不是不用,而是用国内的,只会比自己的CDN快
    现代的新浏览器都是异步加载图片的,有什么显示什么。
    忽略不缓存头又是何必?何不自己服务器调好设置?
    songz
        63
    songz  
       2015-01-24 00:12:30 +08:00
    测试页确实快
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2250 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 01:40 · PVG 09:40 · LAX 17:40 · JFK 20:40
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.