性能主题

优化网站性能要点

  1. 网站快慢决定排名
    谷歌认为:速度更快的网站不只是改善用户体验,最近的数据表明,提高网站的速度也降低了运营成本。谷歌已经采取参考网站的速度决定搜索排名。


  2. 几个在线测试性能网站
     Pagespeed Insights: 谷歌对一个网页的内容进行分析,然后生成让该网页变得更快的建议。


    Pingdom Website Speed Test :一个最可靠的网站速度测试仪,可以测试你的页面的加载时间,分析它,并发现瓶颈。


    Yslow :Yahoo的测试网站性能的统计信息。

    GTmetrix  针对你的网站提出必要的改善(推荐),如果是A级表示优级网页。
    gtmetrix

    Weboptimization:分析并给出了具体的建议,现场改善,以及你的网页速度报告。


  3. 图片大小压缩
    使用Photoshop保存图片时,选择Save as for Web and Devices。采取不同格式:
    JPG, 60 quality – 32K
    PNG-8, 256 colors – 37K
    GIF, 256 colors – 42K
    PNG-24 – 146K

    Yahoo Smush.It:在线优化你的图片大小。

     Image optimizer:另外一个压缩图片工具


  4. 压缩HTML, CSS and JavaScript
    HTMLCompressor :是一个小型的Java库,通过删除HTML和XML中不必要的字符和空格,并基本改变你的代码。

    JSCompress:将你的javascript拷贝进去,缩小30%

    Prettydiff : 在线简单美丽在线压缩, W3.org 采取。

    MinifyCSS :它可以帮助你清理和压缩代码,无需操作或安装其他应用程序。复制粘贴,并在线提交你的代码,然后马上得到同样的结果。


  5. 性能的最佳实践
    (1) .Javascript脚本:脚本的位置 - 总是把你的JavaScript放在HTML文档的末尾,通常在结束</ body>标记之前。让重要的页面内容(如图像,文本等)脚本首先加载,这使得你的页面加载速度更快。

    (2) .使用外部CSS而不是内部CSS

    (3) .CSS规则合并:
    h1 { color: blue; }  p { color: blue; }
    合并为h1, p { color: blue; }

    (4) .使用W3.Org Validator校正你的代码。

    (5) .使用CDN, 国内有加速乐等。配合dnspod的根据不同网络设置不同域名的IP。

    (6).使用HTML5标记开头:<!DOCTYPE html>而不是:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    能给你一个更快的页面性能和集成度的解决方案,参考淘宝网首页,可实现预先加载等功能。



Html5专题

Javascript专题

使用Nginx实现负载平衡和反向代理

使用Varnish加速Web性能