在总结了影响网页加载速度的服务器端因素与页面内容因素后,达闻今天要分享的就是网站外部资源文件对网页加载速度的影响。
针对外部资源文件的分析将主要围绕CSS,JS,和图片进行展开。
1,指定图片的大小
当浏览器加载页面的HTML代码时,有时需要在图片下载完成前就对页面布局进行定位。如果HTML里的图片没有指定尺寸(宽和高),或者代码描述的尺寸与实际图片的尺寸不符时,浏览器则要在图片下载完成后再“回溯”该图片并重新显示(消耗额外时间)。所以在优化网站加载速度时建议为每个图片都指定大小。
2,图片的优化
图片作为多媒体文件的一种主要形式,在网站上使用频率较高,因此对网站(尤其是电商类)图片的优化也是必不可少的。
首先建议在不损失视觉效果的前提下尽量缩减图片体积,从而加快整个网页的加载速度。
在尺寸不变的前提下,可以通过以下方式优化图片的体积:
- 降低颜色深度,如把32位色彩变为24位;
- 转换图片的格式,如把.bmp格式转换为.gif,或者如果确定网页是白背景,图片的白色底色可以弄为透明的。
3,把CSS文件放置在头部,JS文件放置在底部
据统计,把CSS放在头部可以加快网页渲染的速度,避免最后加载CSS引起的浏览器白屏。JS文件一般来说较大,而浏览器同时下载元素的数目是有限制的,大的JS文件会妨碍其它重要元素的加载。(JS文件中含有document.write等代码,不能放在网页最后)。
注:如果JS放在开头而又不想浏览器先加载的话可以用deferred属性,可以起到跟放在网页结尾一样的效果。
4,合并外部CSS和JS文件
过多的JS和CSS文件会导致过度的HTTP开销,合并外部的JS和CSS文件,能够有效减少往返时间及在下载其他资源时减少延迟。
5,压缩CSS和JS文件
压缩JS和CSS的方案跟压缩HTML本质上是一样的,减小代码体积,提高加载速度。常用的压缩方式如:
- 压缩多余的空格和换行符
- 删除注释
- 把较长的变量名称和过程名称统一替换为更短的名称。
- 也可以使用压缩工具进行压缩。