/ #教程 

学会这五招,让您的网页、小程序、App加载,快人一筹

移动互联网时代,耐心是美德这句话,只是一种奢望。

哪怕页面加载只是有1秒的延迟,您的用户转换率和满意度就会就会降低、您的竞争对手就能从你这里抢走用户。

您的页面的速度,也会影响自然搜索结果。百度、bing和google的算法里,都包括了加载速度因子,当然是越快越好。

那么哪些因素影响你的产品的加载速度呢? 答案是内容的大小。有人说我不差钱,可以加大带宽、使用CDN。如果您这样想,恭喜,您离关门已经不远了。

不论是浏览器、小程序、App,都需要时间,加载内容,包括HTML页面代码,CSS,脚本、图片和视频。

现在的用户,期望值都极其之高,希望您的网页、小程序和App设计精美、夺人眼球。通常这意味着您的网页、小程序和app包含更多的图片、视频、脚本和CSS,也就是要加载的内容的体积更大、加载时间更长。

那么怎么确保您的网页、小程序和app加载速度呢?

使用以下简单的5招,为您的页面加载加速。

优化图片

除视频外,图片是网站、小程序和App的最大带宽消耗。和视频不同,通常用户可以根据自己的网络情况,决定是否播放视频,图片绝大多数自动加载,所以图片加载速度,直接影响了用户的第一观感。

优化图片的第一个方法,就是对图片进行适当的缩放。

很多网站喜欢使用巨大的图片,然后使用CSS在用户端缩小。 这是一个基本也很致命的错误,因为浏览器需要下载整张图片,哪怕实际显示的尺寸只是原图的三分之一。

举个例子,如果一张图片的大小是1000 X 1000, 前端只需要显示100 X 100, 猜猜下载体积浪费了多少倍? 10倍?错了, 是 10 X 10, 100倍。提高的不仅是下载速度,节省的是直接成本。

第二个方法,是对图片进行优化和压缩。

未经优化的图片里往往带有冗余信息,例如元数据,编码往往也可以经过专业优化,从而进一步压缩大小。小七图片助手(https://qibot.cn)的图片智能压缩助手,采用智能压缩技术,能够对图片进行深度优化,在不改变图片尺寸和视觉效果前提下,将图片大幅压缩,10% - 80%甚至更多。

浏览器缓存

为什么让网站访问者每次都重复下载一样的内容?

配置好您的Web服务器,可以让浏览器在用户的电脑上临时存放已经加载的数据,这样当用户下次访问您的网站时,就不需要再次加载重复的内容了。

浏览器上存放多久的数据,取决于浏览器的配置和服务器的缓存配置设置。

流行的三大网页服务器,都支持缓存配置:

Apache Caching

IIS Caching

Nginx Caching

传输压缩

打开服务器传输压缩功能,类似与把您的网站,放到zip文件里,进行传输。

压缩能能够大幅的降低页面大小,从而加快加载速度。据统计,传输压缩可以把HTML文件和CSS文件的大小,降低50% 到 70%。

传输压缩是一项服务器端的设置,流行的三大网页服务器,也都支持传输压缩:

Apache

IIS

Nginx

优化CSS

通常CSS需要首先加载完成,用户才能看到您的网站内容。 加载CSS花的时间越长,用户等待的时间也越长。

优化CSS文件意味着下载速度加快,让您的用户可以更快看到您的页面。

CSS优化从一个简单的问题开始: 我需要用到我CSS的所有内容吗? 如果不是,清除掉CSS里多余的代码。 这里一点多余的数据、那里一点多余的代码,叠加起来,可能会对您的网站的速度带来致命的影响。

下一步,您应该最小化您的CSS文件。哪怕多余的空格也会增加CSS文件的大小。

那么怎么最小化CSS文件呢?

有很多在线的CSS优化工具,可以最小化您的CSS文件。只需要上传CSS文件,按照工具指南,完成优化。

您可以尝试 CSSMinifier

最后加载脚本

Javascript文件可以在页面加载完以后,最后加载,也可以在页面加载前,加载。很多网页也是这样设计和配置的,这就是说用户需要等到所有脚本加载完以后,才能看到您的页面。

最简单的解决方法,是把脚本放到页面的最后,body标签结束前。这样网页就能在脚步加载前加载完成。

另一个方法是使用defer或者 async属性,更加主动的控制对脚本文件的加载。

两种方法都很有用,但是在使用前,需要理解两者的区别和限制:

async标签让脚步和页面同时加载,这意味着加载顺序可能不确定。基本的原则是,小的文件加载比较快。如果脚本文件之间有明确的依赖关系,有时会导致难以预料的后果。

defer标签在内容加载完成后加载脚本,也会保证脚本执行的顺序,但是加载的速度,就不如async。

使用这两种方法,很简单,就是在 <script> tag上添加加载属性。.

例如,对脚本:

    <script type=”text/javascript” src=”/path/filename.js”></script>

您可以添加加载方法属性 defer 或者 async

    <script type=”text/javascript” src=”/path/filename.js” defer></script>
    <script type=”text/javascript” src=”/path/filename.js” async></script>

不管采用哪种标签,务必充分测试脚步,保证您添加的标签不会破坏您的网站。

结论

随着用户要求越来越丰富、生动的内容,网页、小程序、App大小会持续增加。更铉酷的效果、CSS的小技巧、第三方分析脚本,都会增加您的网站的大小。我们不能让这些影响我们网站的加载速度,影响用户体验。

多用点心思对网站、小程序和App进行优化,会可能会带来重大改进。记住了,一秒的延迟,可能导致用户流失。