谷歌优化实战篇:如何提高页面访问速度
启用压缩
使用Gzip(一个用于文件压缩的软件应用程序)来减小大于150字节的CSS、HTML和JavaScript文件的大小。
不要对图像文件使用gzip。你需要在类似Photoshop这样的程序中压缩它们,这样你就可以保持对图像质量的控制。请参阅下面的“图像优化”。
缩小CSS、JavaScript和HTML
通过优化代码(包括删除空格、逗号和其他不必要的字符),可以显著提高页面速度。同时删除代码注释、格式和未使用的代码。谷歌建议使用CSSNano和UglifyJS。
减少重定向
每次一个页面重定向到另一个页面时,访问者将面临等待HTTP请求响应周期完成的额外时间。例如,如果你的移动重定向模式是这样的:“example.com->www.example.com->m.example.com->m.example.com/home”,那么这两个额外的重定向都会使你的页面加载速度变慢。
移除阻塞JavaScript
浏览器在呈现页面之前,必须通过解析HTML来构建DOM树。如果浏览器在此过程中遇到脚本,则必须先停止并执行脚本,然后才能继续
Google建议避免并尽量减少阻塞JavaScript的使用。
浏览器缓存
浏览器会缓存大量信息(样式表、图像、JavaScript文件等),这样当访问者返回到您的站点时,浏览器就不必重新加载整个页面。使用类似YSlow的工具查看是否已经为缓存设置了过期日期。然后将“expires”标题设置为要缓存该信息的时间。通常一年是一个合理的时间段,除非您的网站设计经常更改。谷歌在这里有更多关于利用缓存的信息。
提高服务器响应时间
服务器响应时间受您接收的通信量、每页使用的资源、服务器使用的软件和您使用的解决方案的影响。若要提高服务器响应时间,请检查影响性能的重要环节,如数据库查询速度慢、路由速度慢或内存不足,然后进行修复。最佳服务器响应时间不超过200毫秒。
使用内容分发网络
内容分发网络(cdn)也称为内容交付网络,是用于分发交付内容的负载的服务器网络。实际上,站点的副本存储在多个地理位置不同的数据中心,这样用户可以更快、更可靠地访问站点。
图片优化
请确保您的图像不大于正常大小,它们采用正确的文件格式(PNG通常适用于16色以下的图形,而JPEG通常适用于照片),并且这些图片是经过web压缩过的。
使用CSS精灵为网站上经常使用的图像(如按钮和图标)创建模板。CSS精灵将您的图像组合成一个大图像,一次加载所有内容(这意味着更少的HTTP请求),然后只显示您想要显示的部分。这意味着您不需要让用户等待加载多个图像,从而节省了加载时间。