页面秒打开，留住用户快人一步：这是如何做到的？

如何实现页面秒打开，留住用户？

在互联网时代，用户对于网站页面的打开速度要求越来越高，首屏的加载时间过长会加速用户的流失。因此，如何实现页面秒打开，留住用户成为了网站优化的重要目标。以下是几种常见的方法：

1. 优化页面关键子资源

清除不必要的资源及阻塞渲染的JS/CSS：页面中往往会包含一些冗余资源，影响性能的同时还无法给用户带来价值，因此需要定期检查并清除页面上不必要的资源，避免资源下载带来性能上的消耗。同时，需要最大限度地减少页面上关键JS/CSS子资源的数量，并尽可能清除这些资源，最大限度地减少下载量
通过代码拆分减少JS负载：开发者可以根据不同的业务需求，将JS中首屏的关键代码拆分出来，以便于提前加载首屏中必要的少量JS代码，从而缩短页面的加载时间。其余的JS代码可以按需加载或者置后加载，并建议将JS优先放在首屏渲染完成之后,body闭标签之前
优化阻塞渲染的JS及JS的使用方式：JS允许我们修改页面的同时也会阻止DOM构建，阻塞页面渲染。因此，开发者可以优先考虑使用defer的方式，其次是async方式让页面的JS进行异步执行，并去除关键渲染路径中任何不必要的JS。在默认情况下，JS资源会阻塞解析，强制等待CSSOM并暂停DOM的构建从而大大增加首屏渲染的时间
优化阻塞渲染的CSS及CSS的使用方式：默认情况下，关键CSS子资源会阻塞内核的渲染，建议开发者精简页面中的CSS资源，尽快将CSS完成下载，并把关键CSS子资源优先放在“标签内，以便缩短首屏渲染的时间。CSS是构建渲染树的必备元素，首次构建页面时，开发者应确保将任何非必需的CSS资源都标记为非关键资源（比如print），并尽可能减少关键CSS子资源的数量

2. 控制图片大小

针对本地图片：本地图片过大会导致小程序包体积过大，加载时间变长，因此开发者需尽可能地压缩图片大小。对于不需要透明格式的图片，推荐采用JPEG格式来代替PNG格式。安卓端建议使用WebP的图片格式。WebP格式在有损压缩的情况下，肉眼不易察觉出压缩前后的变化，但是图片体积却会大大减小（注意：iOS百度App版本11.22时不支持WebP格式）
针对网络图片：在智能小程序中，对于部署到CDN上的网络图片，也需要进行压缩。可以通过CDN静态资源服务器获取图片资源，并添加图片压缩规则。使用图片压缩工具对图片进行压缩后，再上传至CDN
开启图片懒加载：智能小程序的“组件提供了lazy-load属性，开发者可以开启图片的懒加载功能进行优化
使用渐进式JPEG来优化用户体验：打开渐进式JPEG时页面会先展示整个图片的模糊轮廓，随着扫描次数的增加，图片变得越来越清晰

3. 利用CDN加速

减少网络请求数：可以通过将许多小图片都合并为一张背景透明的大图的方法来减少网络请求数。这种做法被称为CSS Sprite。就这样，引用同一张大图上的，不同位置的二个小图片。background:url(‘../img/xx.png’)no-repeat0-22px; background:url(‘../img/xx.png’)no-repeat0-42px; 有一点要注意的是，压缩与打包并不是无限制的，每个文件的体积在25k左右时速度最佳，然后同一时期内的压缩资源最好在5个以内
使用内容分发网络：可以在网站里设置cache-control和expires属性，可以设计缓存的日期。这样可以减少延迟，加快响应了；同时也能节省网站的带宽流量

4. 提升用户体验设计

网站设计和功能要符合用户的需求：用户打开网页第一个接触到的并不是网页、img、js等，而是网站的带宽！假设,你给你的网站放的是1000M光纤,那么我访问你的网站,自然是速度飞快! 如果你给你的网站的带宽是adsl小水管,那么我相信,无论前端再怎么优化,用户访问你的网站也是龟速。所以第一步就是CND加速,这个是硬件方面的,是要花钱的!当然了,许多老板一听花钱,脸就拉长了。然后才是, 减少网络请求数,比较常见的方法,就是把许多小图片都合并为一张背景透明的大图,这种作法被称为CssSpirite。就这样,引用同一张大图上的,不同位置的二个小图片,。 background:url(‘../img/xx.png’)no-repeat0-22px; background:url(‘../img/xx.png’)no-repeat0-42px; 有一点要注意的是,压缩与打包并不是无限制的,每个文件的体积在25k左右时速度最佳,然后同一时期内的压缩资源最好在5个以内。否则的话,你把整个网站打成一个大包算了,只有一个dns请求了。缓存嘛,简单的讲,就是你访问某个网站,它会保存一些资源在你的电脑里,例如图片、js、css之类的,然后你下次再来的时候,他会判断如果你的访问是相同的地址,那么直接你访问的网页就直接调用你电脑里的文件了,这样速度就会很快。一、是减少延迟,加快响应了; 二、就是节省了网站的带宽,毕竟网站的带宽流量也是要花钱的。可以在你的网站里设置cache-control和expires属性,可以设计缓存的日期
无论你使用什么框架,在操作dom的时候要尽量的减少它的查找和重绘
使用预取引擎技术：这是一种自动分析并自动加载你要打开下一个链接部分内容的技术，目的是让你打开网卡能有秒开的效果

综上所述，通过上述方法可以有效地提升页面加载速度，从而留住更多的用户。

原创文章，作者：Ur47000，如若转载，请注明出处：https://wyc.retuba.cn/2627.html