提高网站性能:专业网页设计师的实用技巧
从减少 HTTP 请求、压缩资源、图像优化、启用缓存到使用 CDN,十个提升网站性能的实用技巧。
是什么让网站让访问者保持更长时间的参与并支持高转化率?这是网站的性能。随着移动市场的兴起,网站的速度对于赢得大量客户份额至关重要。
巨头们经历了什么?
根据亚马逊 2007 年的统计数据,加载时间每增加 100 毫秒,他们的销售额就会下降 1%。谷歌在 2006 年谷歌地图推出时曾分析,页面大小从 100KB 减少到 80KB 后,第一周的流量增加了 10%,后三周增加了 25%。很明显,必须关注网站的性能,这应该纳入主要的网页设计过程。
实用的提速技巧
- HTTP 请求保持在最低限度:应尽量减少浏览器到服务器的往返次数,将 CSS 文件包含在单个样式表中,JavaScript 和图像也应该这样做。
- 结合并压缩 HTML、CSS、JavaScript:通过删除注释、空格和换行等不必要的字符来缩小文件,减少浏览器下载的数据量。
- 图像优化:在某些情况下 CSS 图形比图像好得多,比如按钮;如果使用图像很重要,应在不损失质量的情况下进行格式化和压缩。
- 使用 Sprite:通过将多个图像组合在一起,可以减少与图像相关的 HTTP 请求,网上有许多可用的 Sprite 工具。
- 数据 URI:将字体和图像编码到数据字符串中并集成到样式表和标记,减少发送到服务器的 HTTP 请求。
- 缩放图像:以合适的尺寸提供图像,调整大小有助于节省数据字节。
- 启用缓存:Web 服务器和浏览器允许缓存先前请求过的网页、图像、CSS/JavaScript 等,减少带宽以提高性能。
- JavaScript 放在底部:JavaScript 需要更多时间加载,放在底部不会影响页面其余部分的加载。
- 避免错误请求:链接损坏或导致 404/410 错误的请求应完全避免。
- 选择内容交付网络(CDN):CDN 在世界不同地区的服务器保存网站副本,最大限度地减少加载时间。
如果您想最大限度地利用网站,就必须引起访问者的注意。快速的网站使访问者在网页上停留的时间更长,因此转化的机会也更多。