如何减少网页首屏加载压力和时间

首屏时间是指浏览器窗口上部区域被充满所需时间，它是衡量一个网站用户体验好与坏的指标。一般情况下，时间越短，用户体验越好。通常一个网站，如果首屏时间在5秒以内是比较优秀的，10秒以内是可以接受的，10秒以上就不可容忍了。用户会选择刷新页面或立刻离开。

工具/原料

 

• chrome浏览器
• 网页编辑器

网页加载原理

 

1. 1

   加载HTML，HTML的各种DOM会并行加载，但若碰到CSS和JS外链文件会阻断HTML加载，单线程加载。

2. 2

   从图片和CSS来说，HTML的IMG>内嵌CSS图片>内联CSS图片>外联CSS图片>JS加载图片。所以建议将与卖点相关的图片以IMG形式插入，按照渲染顺序，此类图片是最先显示加载的，这样有利于用户第一时间看到最关键的信息点。

   END

减少加载时间方法

 

1.  

   延迟加载，通过js将第二屏出现的图片设置问延迟加载，优先加载第一屏的图片。可以使用lazyload，地址是http://www.appelsiini.net/projects/lazyload

   
2.  

   尽可能压缩图片大小，可以利用在线图片压缩工具tinypng。地址是http://www.tinypng.com/

   
3.  

   将JS放到HTML最后的地方，能最后加载，优先保证基础信息阅读。可以参考雅虎优化原则