SEO页面性能优化

前言

正常情况下我们打开某个浏览页面时，页面加载的速度越快那么给我们的体验感就越好，如果打开某个目标网页需要的时间比较长会产生较差的使用体验。为了方便开发者在开发过程中对页面进行优化，总结以下几点

关键子资源耗时较严重

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

2.使用代码拆分减少JS负载
部分网站可能将所有的JS组合成一个大型的组合包，以这种方式加载的话页面性能会受影响。长时间运行的JS可能会阻塞主线程，根据不同的业务需求开发者可以将JS中首页关键代码拆分出来，这样可以提前加载执行首页中必须的少量JS代码，从而缩短页面的加载时间，其余的可以按需加载或者后置加载，同时开发者将JS优先放在首页渲染完成之后，放在body闭标签前面

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

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

延迟解析加载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指令从另一个样式表文件导入规则。不过应避免使用这些指令，因为它们会在关键路径中增加往返次数从而影响首屏渲染性能。

页面存在额外跳转

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

主文档耗时

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