首页>>老刘专栏
百度搜索对用户行为的研究表明,页面首屏的加载时间在1秒以内的页面,会带给用户流畅快捷的极速体验。
近期小编发现有部分站点移动端页面首屏打开速度多于1秒。为了方便开发者对页面进行优化,技术特地总结了问题的主要原因以及优化方法给大家进行参考。
慢速原因一:关键子资源耗时较严重
页面打开速度优化建议:
1 ►清除不必要的资源,避免进行不必要的下载
站点应当定期审核网页上的资源是否是必需的,并评估该资源的价值与性能影响。
清除阻塞渲染的JS和CSS
如果要以最快速度完成首屏渲染,需要最大限度地减少网页上关键JS/CSS子资源的数量,并尽可能清除这些资源,最大限度地减少下载量。
2 ►使用代码拆分减少JS负载
长时间运行的JS可能会阻塞主线程,这时可以考虑使用requestAnimationFrame() 或 requestIdleCallback() 来进行优化。
根据不同的业务需求,开发者可以将JS中首屏的关键代码拆分出来,这样可以提前加载执行首屏中必需的少量JS代码,从而缩短页面的加载时间。
其余的JS可以按需加载或者置后加载。同时建议开发者将JS优先放在首屏渲染完成之后,放在body闭标签前面。
3 ►优化阻塞渲染的JS
为了实现最佳性能,可以让页面的JS进行异步执行,建议优先考虑使用defer的方式,其次是async方式,并去除关键渲染路径中任何不必要的JS。
1、优化JS的使用方式,优先使用异步JS资源
默认情况下,JS资源会阻塞解析,强制等待CSSOM并暂停DOM的构建,继而大大延迟首屏渲染的时间。
异步JS资源则不会阻塞文档解析器,如果脚本可以使用defer/async 属性,也就意味着它并非是首屏渲染所必需的,可以考虑在首屏渲染后异步加载脚本。
2、延迟解析加载JS
为了最大限度减少内核渲染网页的工作量,建议开发者延迟所有非必需的、对构建首屏渲染无关紧要的JS脚本,将JS优先放在body闭标签处。
3、避免长时间运行的JS
运行时间长的JS会阻塞构建 DOM、CSSOM以及网页的渲染,所以任何对首屏渲染无关紧要的初始化逻辑和功能都应延后执行。
如果需要运行较长的初始化序列,请考虑将它们拆分为若干个阶段,以便浏览内核可以间隔处理其它的渲染任务。
4 ►优化阻塞渲染的CSS
默认情况下,关键CSS子资源是会阻塞内核渲染的,请务必精简网页的CSS资源,同时需要将CSS尽快地完成下载,关键CSS子资源优先放在head标签内,以便缩短首屏渲染的时间。
1、优化CSS的使用方式
CSS是构建渲染树的必备元素,首次构建网页时,确保将任何非必需的CSS资源都标记为非关键资源(比如print),并应确保尽可能减少关键CSS子资源的数量。
2、将关键CSS放在文档head标签内
尽早在HTML文档内指定所有必需的关键CSS资源,以便浏览内核尽早发现link标记并发出CSS请求下载。
3、避免使用CSS import指令
一个样式表可以使用CSS import指令从另一个样式表文件导入规则。
不过应避免使用这些指令,因为它们会在关键路径中增加往返次数从而影响首屏渲染性能。
慢速原因二:主文档耗时
页面打开速度优化建议:
优化和压缩资源,减小总下载文件大小
优化和压缩资源来最大限度地减小总下载大小,来提高网页加载速度。
开发者可以考虑通过简化编码来优化主文档大小,同时可以采用chunk编码,服务器分chunk输出,以及通过GZIP来压缩主文档资源。
慢速原因三:页面存在额外跳转
页面打开速度优化建议:
从用户点击到打开页面的过程中,有些网站内可能经过额外跳转才会将最终的页面展现给用户,所以建议开发者去除额外的跳转。
猜你喜欢
- 2024-02-23 提高小红书运营效率的6个工具
- 2022-11-10 【官方文档】百度搜索网站被黑防范指南
- 2022-11-03 【干货必备】百度搜索优质内容指南
- 2022-08-01 百度隐藏“快照”功能:原因未知-百度快照没了?
- 2022-06-20 浅析“百度搜索基础信息设置规范”!
- 2022-06-15 SEO尴尬,有排名,没流量,没咨询,怎么办?
- 搜索
-
- 2024-04-07 小红书+抖音+直播常见违禁词及替换方法
- 2024-03-14 刷量成风,广告主损失惨重?该被重视了!
- 2024-03-06 代理投的好,还需要招自己的优化师吗?
- 2024-02-23 提高小红书运营效率的6个工具
- 2024-02-23 千川投放百宝书:2万字详解,一篇全掌握!
- 2024-02-20 年后求职15个关键面试问题,助优化师脱颖···
- 2024-01-31 不行就去做销售吧!
- 2024-01-09 合格的优化师,需具备这6项思维能力!
- 2023-12-28 25个金句文案句式,直接套!
- 2023-12-05 做私域必备的10个朋友圈黄金模板
- 2023-12-05 15个爆款短视频文案技巧,看完立马用!
- 2023-11-27 浅析:《百度搜索优质内容解读》,当下百度···
- 2019-11-01 Origin DNS error:使用百···
- 2020-06-20 “401 - 未授权: 由于凭据无效,访···
- 2020-12-01 一级域名好还是二级域名好?
- 2020-10-13 百度抓取诊断工具一直抓取失败怎么办?
- 2019-12-09 域名解析后,网站返回状态码511应对方法
- 2020-04-10 百度下拉框怎么刷?刷百度下拉框软件原理及···
- 2019-08-12 网站出现“403,服务器上文件或目录拒绝···
- 2021-04-13 html/txt文件中文用浏览器打开有乱···
- 2021-01-06 百度移动端的搜索结果上线“踩顶”功能,对···
- 2020-09-03 element.style样式的修改
- 2019-11-06 正确打开.db数据库文件的两种方式,避免···
- 2020-10-20 UC神马搜索怎么做快速排名优化
- 2019-04-08 网站日志咋分析?
- 2020-01-10 知名站长工具服务商:爱站网突然关站
- 2021-09-08 百度竞价“非企”“渠道户”KA客户“竞价···
- 2019-05-22 杜绝翻页诱导行为,百度搜索信风算法即将上···
- 2022-10-24 中小企业打广告去哪个平台?一般选择哪种推···
- 2019-05-16 什么是蜘蛛池?深入解析蜘蛛池原理
- 2022-09-24 因为padding和border宽度导致···
- 2019-02-20 phpcms怎么把标题后缀改为站点名称?
- 2019-12-27 事实告诉你,网站点击率对于排名的影响因素
- 2019-12-31 网站设计7大seo要点清单,搜索优化事半···
- 2019-08-27 带www和不带www主域名,如果是两个完···
- 2019-07-16 网页点击热力图有什么用,对SEO有何影响···
- 热门标签
-
- 401错误
- 401未授权
- 语义效应
- 话术技巧
- 百度
- 谷歌
- pagerank算法
- 算法原理
- tab切换
- 选项卡滑动切换
- 达克效应
- 认知局限
- 交流分享
- webp转GIF
- webp格式转GIF动图
- webp to gif
- 锚定效应
- 百度快排
- 快速排名
- SEO快排
- 万词霸屏
- SEO优化
- 按天计费系统
- 搜索推广模式对比
- SEO快速排名
- SEO优化师
- seo工资
- 合肥seo
- seo公司
- 合肥优化公司
- 选择seo公司
- 互联网黑话
- 2019it黑话
- 网站被k
- 收录消失
- 百度熊掌号
- 网页劫持
- 灰色样式
- 百度公告
- seo外包
- 外包公司
- seo职业发展
- seo计费系统
- FTP
- ftp隐藏文件
- seo改版
- 网站改版周期
- 301重定向
- 首选域名
- 301跳转
- spider爬虫
- 在家办公
- 伪静态
- 纯静态
- seo友好度
- seo前景
- seo发展
- 2019冬至
- 冬至
- 企业主
- seo内容
- 优质内容
- 中文搜索
- 头条搜索
- 中文搜索引擎起源和发展
- 网站改版
- seo部署
- 头条权重
- 私域流量
- seo高手
- seo套路
- seo误区
- 百度算法
- 算法更新
- 网站排名波动
- 网站惩罚
- 百度小程序
- 小程序
- seo策略
- seo平衡
- seo和可访问性
- 友情链接
- 被惩罚链接
- 黑帽SEO
- 刷快排
- seoer
- 提升seo价值
- 屏蔽右键
- 禁止右键
- 禁止查看源代码
- 重复内容
- 重复页面
- 内啡肽
- seo习惯
- seo专家
- seo思维塑造
- 跳出率
- 用户体验
- 转化率