我们将创意变成现实
为产品和体验带来生命

Work hard in the direction of creating value

当前位置:首页 > 观点 > 建站知识 > 网站如何快速加载,留住用户快人一步!

网站如何快速加载,留住用户快人一步!

发布者:中工互联  发布时间:2022-04-29
互联网时代,百度搜索对用户行为的研究表明,用户对于页面的打开速度要求越来越高,首屏的加载时间过长会加速用户的流失通过调研,小编发现部分站点和智能小程序页面加载速度慢的主要原因分别是页面关键子资源耗时严重和图片体积过大。为了方便开发者进行优化,深圳网站建设公司小编特地邀请技术同学总结了优化方法给大家参考。


清除不必要的资源及阻塞渲染的JS/CSS
页面中往往会包含一些冗余资源,影响性能的同时还无法给用户带来价值,所以站点应当定期检查并清除页面上不必要的资源,避免资源下载带来性能上的消耗。
如果要以最快的速度完成首屏的渲染,开发者还需要最大限度地减少页面上关键JS/CSS子资源的数量,并尽可能清除这些资源,最大限度地减少下载量。

通过代码拆分减少JS负载
开发者可以根据不同的业务需求,将JS中首屏的关键代码拆分出来,以便于提前加载首屏中必要的少量JS代码,从而缩短页面的加载时间。其余的JS代码可以按需加载或者置后加载,同时建议开发者将JS优先放在首屏渲染完成之后,body闭标签之前。

优化阻塞渲染的JS及JS的使用方式
JS允许我们修改页面的同时也会阻止DOM构建,阻塞页面渲染。开发者可以优先考虑使用defer的方式,其次是async方式让页面的JS进行异步执行,并去除关键渲染路径中任何不必要的JS,在默认情况下,JS资源会阻塞解析,强制等待CSSOM并暂停DOM的构建从而大大增加首屏渲染的时间。异步JS资源则不会阻塞文档解析器,开发者可以考虑在首屏渲染后异步加载脚本。

优化阻塞渲染的CSS及CSS的使用方式
默认情况下,关键CSS子资源会阻塞内核的渲染,建议开发者精简页面中的CSS资源,尽快将CSS完成下载,并把关键CSS子资源优先放在head标签内,以便缩短首屏渲染的时间。CSS是构建渲染树的必备元素,首次构建页面时,开发者应确保将任何非必需的CSS资源都标记为非关键资源(比如print),并尽可能减少关键CSS子资源的数量


控制图片大小
(1)针对本地图片
本地图片过大会导致小程序包体积过大,加载时间变长,因此开发者需尽可能地压缩图片大小:
● 对于不需要透明格式的图片,推荐采用 jpeg 格式来代替 png 格式
● 安卓端建议使用webp的图片格式。webp格式在有损压缩的情况下,肉眼不易察觉出压缩前后的变化,但是图片体积却会大大减小(注意:iOS 百度 App 版本 < 11.22 时不支持webp格式)
● 确保小程序包内没有冗余和无用的图片资源
● 延迟加载不重要的图片,并在关键图片渲染完成后再加载后续内容
● 使用工具对图片进行压缩


(2)针对网络图片

在智能小程序中,对于部署到 CDN 上的网络图片,也需要进行压缩:
● 通过CDN 静态资源服务器获取图片资源,并添加图片压缩规则
● 使用图片压缩工具对图片进行压缩后,再上传至 CDN

开启图片懒加载
智能小程序的image组件提供了lazy-load属性,开发者可以开启图片的懒加载功能进行优化:

谨慎使用耗费性能的属性
image组件mode属性提供了 13 种模式,widthFix模式是其中一种。由于widthFix模式需要动态计算图片的宽度,导致页面重绘,因此应谨慎使用mode属性的widthFix模式。

使用渐进式 JPEG 来优化用户体验

打开渐进式 JPEG 时页面会先展示整个图片的模糊轮廓,随着扫描次数的增加,图片变得越来越清晰。这种格式的主要优点是在网络较慢的情况下,可以预览到图片的轮廓,一定程度上可以提升用户体验。



更多高端网站建设、专业网站设计、网站制作、网站开发等相关,欢迎您咨询深圳中工互联!

标签: 网站开发
数字化建站营销落地服务商首页服务案例观点关于联系

联系我们

135-3085-1084
185-6577-9115

深圳市中工互联网络开发有限公司
地址:深圳市南山区沙河西路3151号健兴科技大厦A座7楼.

我们的优势

我们为满足不同客户的独特需求,并对独特需求做彻底理解,更注重用户体验,以用户体验为核心,创意、视觉、交互、营销,四大维度助力商业价值提升,为客户量身订造,竭尽我们的专业所能,不遗余力, 我们专业、敬业,富有激情和创意,尊重并深入理解每一位客户的理念,并致力于运用我们的设计能力将其充分实现,9年来,凭借对设计的深刻理解,对互联网营销趋势的敏锐洞察,我们不断修正服务导向,完善创作品格,始终注重专业探索,为所有合作企业机构全力以赴,确保网站的视觉体验与营销转化能力。

我们以专业的设计,创新的理念,精湛的技术服务于众多知名企业,创造出了综合集团企业、时尚零售、互联网电商、智能科技、金融投资、教育培训、餐饮食品、制造生产等多行业、多平台的优秀网络作品。包括:拓邦股份、茂硕电源、洲明科技、鱼跃医疗、大族激光、华为、百丽、华大基因、深圳地铁、捷顺科技、腾讯、迈瑞、华侨城、上海三思、立达信、三雄极光、兆驰股份、安吉尔、欧瑞博、中广核、创维、融创、生迪、中国建设银行、科瑞技术、长园、崧盛股份、奋达、小米、倍思等在内的近两千多家客户。

专业团队为您提供深圳网站建设、深圳网站制作、深圳营销型网站建设、外贸网站建设等服务,深圳建网站就找中工互联 | 网站建设地图

深圳市中工互联网络开发有限公司 备案号:粤ICP备17083864号 Copyright 2014版权所有

客服微信 ×

立即扫描,添加客服微信