前端的性能对于一个Web应用来说非常重要,如果一个Web应用的页面加载速度非常快、对于用户的操作可以及时响应,那么产品的用户体验将会极大地提升。下图显示了页面加载速度对于用户体验的影响。
你的Web页面的速度是否已经足够快了?其实可能还有很多可以提升的地方。Google和雅虎也提出了一些Web应用的前端优化建议,并发布了一些工具,你可以逐一检验你的Web应用,以便达到更高的性能。
这些优化不仅仅可以给用户提供更好的体验,从开发者角度来说,进行优化还可以减少页面的请求数、降低请求所占的带宽、减少资源的浪费。
下面来看看Google和雅虎提供的Web页面优化最佳实践。
一、Google的Web优化最佳实践1. 避免坏请求
有时页面中的HTML或CSS会向服务器请求一个不存在的资源,比如图片或HTML文件,这会造成浏览器与服务器之间过多的往返请求,类似于:
浏览器:“我需要这个图像。”
服务器:“我没有这个图像。”
浏览器:“你确定吗?这个文档说你有。”
服务器:“真的没有。”
如此一来,会降低页面的加载速度。因此,检查页面中的坏链接非常有必要,你可以通过 Google的PageSpeed工具 来检测,找到问题后,补充相应的资源文件或者修改资源的链接地址即可。
2. 避免CSS @import
使用 @import方法引用CSS文件可以能会带来一些影响页面加载速度的问题,比如导致文件按顺序加载(一个加载完后才会加载另一个),而无法并行加载。
你可以使用 CSS delivery工具 来检测页面代码中是否存在@import方法。比如,如果检测结果中存在
@import url("style.css")