如何优化SEO|站的页面性能?
2021-08-12 来源Q?a href='http://www.yangxuankeji.com/news/264.html'>http://www.yangxuankeji.com/news/264.html
如何优化SEO|站的页面性能?Z更好地提升用L览体验,《移动落地页体验白皮?.0》中规定:面的首屏内容应?.5U内加蝲完成.癑ֺ搜烦对用戯为的研究表明,面首屏的加载时间在1.5U以内的面,会带l用h畅快L极速体?q期我们发现有部分站点移动端面首屏打开速度多于1.5U?Z方便开发者对面q行优化,技术特地ȝ了问题的主要原因以及优化Ҏl大家进行参?
1、清除不必要的资?避免q行不必要的下蝲
站点应当定期审核|页上的资源是否是必需?q评估该资源的hg性能影响.|页中往往会包含一些冗余资?影响|页性能的同时还无法l网带来h?可以考虑清除不必要的资源,避免不必要的资源下蝲带来性能上的消?
清除d渲染的JS和CSS
如果要以较快速度完成首屏渲染,需要较大限度地减少|页上关键JS/CSS子资源的数量,q尽可能清除q些资源,较大限度地减下载量.
2、用代码拆分减JS负蝲
有的|站可能所有的JSl合成一个大型的l合?以这U方式加载的话页面性能会受到媄?长时间运行的JS可能会阻塞主U程,q时可以考虑使用requestAnimationFrame() ?requestIdleCallback() 来进行优?
Ҏ不同的业务需?开发者可以将JS中首屏的关键代码拆分出来,q样可以提前加蝲执行首屏中必需的少量JS代码,从而羃短页面的加蝲旉,其余的可以按需加蝲或者置后加?同时开发者将JS优先攑֜首屏渲染完成之后,攑֜body闭标{։?
3、优化阻塞渲染的JS
JS允许我们修改|页的同时也会阻止DOM构徏,d|页渲染.默认情况?JS的执行会d内核渲染:无论我们使用外链q是内嵌JS,当遇到文中的JS脚本?它将暂停 DOM 构徏,控制权UMl?JS,脚本执行完毕后再l箋构徏 DOM,处理剩余的HTML文.如果是外链JS文g,览内核需停下?{待从磁盘、缓存或q程服务器中获取JS脚本,q就可能l关键渲染\径增加数十到数百毫秒的gq?
Z实现较佳性能,可以让页面的JSq行异步执行,优先考虑使用defer的方?其次是async方式,q去除关键渲染\径中M不必要的JS.
(1)优化JS的用方?优先使用异步JS资源
默认情况?JS资源会阻塞解?强制{待CSSOMq暂停DOM的构?l而大大gq首屏渲染的旉.异步JS资源则不会阻塞文解析器,如果脚本可以使用defer/async 属?也就意味着它ƈ非是首屏渲染所必需?可以考虑在首屏渲染后异步加蝲脚本.
(2)延迟解析加蝲JS
Z较大限度减少内核渲染|页的工作量,开发者gq所有非必需的、对构徏首屏渲染无关紧要的JS脚本,JS优先攑֜body闭标{֤.
(3)避免长时间运行的JS
q行旉长的JS会阻塞构?DOM、CSSOM以及|页的渲?所以Q何对首屏渲染无关紧要的初始化逻辑和功能都应g后执?如果需要运行较长的初始化序?误虑它们拆分ؓ若干个阶D?以便览内核可以间隔处理其它的渲染Q?
4、优化阻塞渲染的CSS
默认情况?关键CSS子资源是会阻塞内核渲染的,请务必精|页的CSS资源,同时需要将CSS快地完成下?关键CSS子资源优先放在head标签?以便~短首屏渲染的时?
(1)优化CSS的用方?br />
CSS是构建渲染树的必备元?首次构徏|页?保Q何非必需的CSS资源都标Cؓ非关键资?比如print),q应保可能减关键CSS子资源的数量.
(2)关键CSS攑֜文head标签?br />
早在HTML文内指定所有必需的关键CSS资源,以便览内核早发现link标记q发出CSSh下蝲.
(3)避免使用CSS import指o
一个样式表可以使用CSS import指o从另一个样式表文g导入规则.不过应避免用这些指?因ؓ它们会在关键路径中增加往q次C而媄响首屏渲染性能.
以上是《如何优化SEO|站的页面性能?》的全部内容,仅供站长朋友们互动交学?SEO优化是一个需要坚持的q程,希望大家一起共同进?