如何提升网页性能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脚本，在body闭标签处优先使用JS。

三、避免长时间运行的JS

长时间运行的JS会阻塞DOM、CSSOM的构造和网页的渲染，所以任何对首屏渲染不重要的初始化逻辑和函数都要延迟。如果你需要运行一个很长的初始化序列，可以考虑把它们分成几个阶段，这样浏览内核就可以每隔一段时间处理其他渲染任务。

四、优化阻塞渲染的CSS

默认情况下，关键的CSS子资源会阻止内核渲染。要精简网页的CSS资源，尽快下载CSS。关键的CSS子资源要先放在head标签里，这样可以缩短第一页的渲染时间。

五、优化CSS的使用

CSS是构建渲染树的基本元素。第一次构建网页时，一定要将任何不必要的CSS资源标记为非关键资源(如print)，一定要尽量减少关键CSS子资源的数量。

六、将键CSS放在文档head标签中

尽早在HTML文档中指定所有需要的关键CSS资源，让浏览内核尽早找到链接标签，发出CSS请求下载。

七、避免使用CSS import指令

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

八、有额外的页面跳转，删除页面上多余的跳转

在用户点击到打开页面的过程中，有些网站可能会经过额外的跳转，将最终页面展现给用户。根据调查数据，单个额外的跳转将使性能下降约600毫秒，这可能会给关键的渲染路径增加600毫秒的延迟体验，因此建议开发者移除额外的跳转。

九、主文档耗时

优化和压缩资源并且减少了总的下载文件大小，并对资源进行优化压缩，使总下载量最小，从而提高网页加载速度。开发者可以考虑通过简化编码来优化主文档的大小，同时可以采用组块编码，将服务器分成组块输出，通过GZIP压缩主文档资源。