性能主题
优化网站性能要点
- 网站快慢决定排名
谷歌认为:速度更快的网站不只是改善用户体验,最近的数据表明,提高网站的速度也降低了运营成本。谷歌已经采取参考网站的速度决定搜索排名。
- 几个在线测试性能网站
Pagespeed Insights: 谷歌对一个网页的内容进行分析,然后生成让该网页变得更快的建议。
Pingdom Website Speed Test :一个最可靠的网站速度测试仪,可以测试你的页面的加载时间,分析它,并发现瓶颈。
Yslow :Yahoo的测试网站性能的统计信息。
GTmetrix 针对你的网站提出必要的改善(推荐),如果是A级表示优级网页。
Weboptimization:分析并给出了具体的建议,现场改善,以及你的网页速度报告。
- 图片大小压缩
使用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:另外一个压缩图片工具
- 压缩HTML, CSS and JavaScript
HTMLCompressor :是一个小型的Java库,通过删除HTML和XML中不必要的字符和空格,并基本改变你的代码。
JSCompress:将你的javascript拷贝进去,缩小30%
Prettydiff : 在线简单美丽在线压缩, W3.org 采取。
MinifyCSS :它可以帮助你清理和压缩代码,无需操作或安装其他应用程序。复制粘贴,并在线提交你的代码,然后马上得到同样的结果。
- 性能的最佳实践
(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">
能给你一个更快的页面性能和集成度的解决方案,参考淘宝网首页,可实现预先加载等功能。