网站页面性能优化指南

为了更好地提升用户的浏览体验,《移动落地页体验白皮书5.0》中规定:页面的首屏内容应在1秒内加载完成。

百度搜索对用户行为的研究表明,页面首屏的加载时间在1秒以内的页面,会带给用户流畅快捷的极速体验。近期我们发现有部分站点移动端页面首屏打开速度多于1秒,为了方便开发者对页面进行优化,技术特地总结了问题的主要原因以及优化方法给大家进行参考。

慢速主要原因:
1、关键子资源耗时较严重;
2、页面存在额外跳转;
3、主文档耗时较为严重


慢速原因一:关键子资源耗时较严重

页面打开速度优化建议:

1、清除不必要的资源,避免进行不必要的下载

站点应当定期审核网页上的资源是否是必需的,并评估该资源的价值与性能影响。网页中往往会包含一些冗余资源,影响网页性能的同时还无法给网页带来价值,可以考虑清除不必要的资源,避免不必要的资源下载带来性能上的消耗。

清除阻塞渲染的JS和CSS

如果要以最快速度完成首屏渲染,需要最大限度地减少网页上关键JS/CSS子资源的数量,并尽可能清除这些资源,最大限度地减少下载量。

2、使用代码拆分减少JS负载

有的网站可能将所有的JS组合成一个大型的组合包,以这种方式加载的话页面性能会受到影响。长时间运行的JS可能会阻塞主线程,这时可以考虑使用requestAnimationFrame() 或 requestIdleCallback() 来进行优化。

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

3、优化阻塞渲染的JS

JS允许我们修改网页的同时也会阻止DOM构建,阻塞网页渲染。默认情况下,JS的执行会阻塞内核渲染:无论我们使用外链还是内嵌JS,当遇到文档中的JS脚本时,它将暂停 DOM 构建,将控制权移交给 JS,脚本执行完毕后再继续构建 DOM,处理剩余的HTML文档。如果是外链JS文件,浏览内核需停下来,等待从磁盘、缓存或远程服务器中获取JS脚本,这就可能给关键渲染路径增加数十到数百毫秒的延迟。

为了实现最佳性能,可以让页面的JS进行异步执行,建议优先考虑使用defer的方式,其次是async方式,并去除关键渲染路径中任何不必要的JS。

优化JS的使用方式,优先使用异步JS资源

默认情况下,JS资源会阻塞解析,强制等待CSSOM并暂停DOM的构建,继而大大延迟首屏渲染的时间。异步JS资源则不会阻塞文档解析器,如果脚本可以使用defer/async 属性,也就意味着它并非是首屏渲染所必需的,可以考虑在首屏渲染后异步加载脚本。

延迟解析加载JS

为了最大限度减少内核渲染网页的工作量,建议开发者延迟所有非必需的、对构建首屏渲染无关紧要的JS脚本,将JS优先放在body闭标签处。

避免长时间运行的JS

运行时间长的JS会阻塞构建 DOM、CSSOM以及网页的渲染,所以任何对首屏渲染无关紧要的初始化逻辑和功能都应延后执行。如果需要运行较长的初始化序列,请考虑将它们拆分为若干个阶段,以便浏览内核可以间隔处理其它的渲染任务。

4、优化阻塞渲染的CSS

默认情况下,关键CSS子资源是会阻塞内核渲染的,请务必精简网页的CSS资源,同时需要将CSS尽快地完成下载,关键CSS子资源优先放在head标签内,以便缩短首屏渲染的时间。

优化CSS的使用方式

CSS是构建渲染树的必备元素,首次构建网页时,确保将任何非必需的CSS资源都标记为非关键资源(比如print),并应确保尽可能减少关键CSS子资源的数量。

将关键CSS放在文档head标签内

尽早在HTML文档内指定所有必需的关键CSS资源,以便浏览内核尽早发现link标记并发出CSS请求下载。

避免使用CSS import指令

一个样式表可以使用CSS import指令从另一个样式表文件导入规则。不过应避免使用这些指令,因为它们会在关键路径中增加往返次数从而影响首屏渲染性能。

慢速原因二:主文档耗时

页面打开速度优化建议:

优化和压缩资源,减小总下载文件大小

优化和压缩资源来最大限度地减小总下载大小,来提高网页加载速度。开发者可以考虑通过简化编码来优化主文档大小,同时可以采用chunk编码,服务器分chunk输出,以及通过GZIP来压缩主文档资源。

慢速原因三:页面存在额外跳转

页面打开速度优化建议:

去除页面的额外跳转

从用户点击到打开页面的过程中,有些网站内可能经过额外跳转才会将最终的页面展现给用户。根据调研数据,单次额外跳转会使性能退化约600毫秒,这就可能给关键渲染路径增加600毫秒的延迟体验,所以建议开发者去除额外的跳转。

本文作者:站长派,如若转载,请注明出处:https://zhanzhangpai.com/?p=118

免责声明:本站部分内容来源互联网整理,如有侵权请联系站长留言处理。

(0)
上一篇 2021年11月5日 下午5:31
下一篇 2021年11月11日 下午4:21

相关推荐

  • 如何分析竞争对手网站?

    现在越来越多的企业开始做起了电商,那么在搜索引擎之中,竞争越来越大,竞争对手也越来越多,有人说,竞争对手多了SEO肯定越来越难做,但是笔者却想告诉大家,换个角度去做SEO、去思考,…

    2022年3月15日
  • 香港服务器可以用来做什么?

    香港服务器可以用来做什么? 安全是相对的,但是不是绝对的。如今,越来越多的企业开始重视互联网安全的问题,而不是企业因为上云成本低而选择香港云服务器,有的业务利用香港云服务器的资源灵…

    2022年4月6日
  • 网站地图对seo优化有什么作用?

    网站地图对seo优化有什么作用? 网站地图是网站推广优化中重要的一环,做过SEO的朋友都应该知道网站地图在SEO中的重要性。那么网站地图对seo优化有什么作用呢?网站地图对seo优…

    2022年5月13日
  • 【运营知识】直播间爆品定价策略

    直播间爆品定价策略 非常推荐锚点定价策略,让消费者有一个可以对比的价格感知,从而引导消费者下单。 因为划算、便宜、品质好等等的信息,都是对比出来的,帮用户建立对比,从而强化用户的消…

    2022年3月30日
  • 如何选择网站服务器?选择服务器注意事项有哪些?

    做网站有非常重要的一环,就是服务器的选择,那服务器选择中,究竟有哪些注意事项,今天学堂给大家带来图片分享,请站长重点关注以下三点:

    2022年1月25日
  • 百度搜索引擎抓取系统概述(一)

    编者按:站长朋友们,今后定期都将在这里跟大家分享一些有关搜索引擎工作原理及网站运营相关的内容,今天先简单介绍一下关于搜索引擎抓取系统中有关抓取系统基本框架、抓取中涉及的网络协议、抓…

    2022年2月2日
  • 蓝天算法详情

    算法名称:蓝天算法算法内容:严厉打击新闻类站点售卖目录发布时间:2016-11-21原文详情: 百度持续打击新闻类站点售卖软文、目录行为,近日百度反作弊团队发现部分新闻类站点售卖目…

    2021年11月5日
  • 如何给网站部署关键词?关键词部署原则是什么?关键词部署方法是什么?

    在关键词的挖掘、选择、分组一系列的工作完成后,就到了关键词在网站中部署的环节也是关键词研究的最后一个步骤。关键词的部署在一定程度上也是对网站的栏目设置、专题制作方向、内容创作方向的…

    2022年3月9日
  • 谷歌SEO-博文应该写多长?关于内容篇幅的“真相”

    大多数博客文章应该不少于 300 词。如果篇幅短于此,你就应该怀疑自己是否真的有什么重要的话要说了。 从 300 词开始,你就不应该以达成某个特定的字数(统计)为目标了。你的目标应…

    2022年2月4日
  • 域名预定怎么做?域名预定有什么规则?

    域名预定怎么做?域名预定有什么规则? 众所周知,现如今的很多精品域名已经被他人注册了,想要获得精品域名就需要大家去购买。其实还有一种域名购买途径就是域名预定。那么你知道域名预定怎么…

    2022年4月14日