文本内容主要包含:HTML,CSS,JavaScript。
在web页面里,每个字符都是要从服务器获取的,本文档主要讲述如何提升文本内容的加载速度。
分离开发和线上环境
如果你为了减小资源大小采取了一些措施,而影响到可读性,一定要记住当你直接修改线上代码的时候,之后可能无法理解当初为什么这么改。
所以经常性,我们会把开发和线上两个环境分离,开发环境是可读性良好的代码,线上则是采取了优化措施之后的可读性差的代码。
缩小代码体积
一个简单有效的方法就是移出多余的空格和不必要的字符,虽然我们读起来会吃力,但浏览器能看懂就行。
HTML,CSS,JavaScript都可以应用这种方式。
常见的工具
- Minifier: 在线压缩JavaScript和CSS,通过复制和黏贴的方式
- HTML Minifier: 同上
- Node module for Grunt
- Node module for Gulp
- Node module for HTML Minifier
压缩文本资源
常用的是gzip的压缩,浏览器广泛支持,可以节省近70%的体积。
即使是已经压缩过的文件,gzip也能够进一步压缩。常见的做法是,先用工具压缩代码,再由服务器提供gzip压缩。
减少不必要的库依赖
为了使用某个功能,而引入一整个库,例如:想使用jQuery的toggleClass,可以直接引入单个方法,而不必要引入整个jQuery
总结
虽然一些大体积的资源,如图片,字体等是我们最关心的优化项,但也不能忽略了文本内容,毕竟文本内容才是网页的主体。
参考
https://developers.google.com/web/fundamentals/performance/get-started/textcontent-3