百度搜索引擎优化指南下载(最蜘蛛池原文链接：网站页面加载速度的优化指南)

　　百度搜索引擎优化指南下载(最蜘蛛池原文链接：网站页面加载速度的优化指南)

　　原创来源：最蜘蛛池

　　原文链接：网站 页面加载速度优化指南-最蜘蛛池

　　前段时间，百度为了更好地提升用户的浏览体验，《移动登陆页面体验白皮书4.0》规定页面首屏内容应在1.5内加载秒，最多蜘蛛池的编辑整理发布。

　　百度搜索对用户行为的研究表明，首屏加载时间小于1.5秒的页面会给用户带来流畅、快速的体验。近日，我们发现部分网站手机页面首屏打开速度快于1.5秒。为了方便开发者优化页面，百度后台技术特地总结了问题的主要原因和优化方法，供大家参考。

　　速度慢的主要原因：

　　1、关键子资源耗时；

　　2、 页面多了一个跳转；

　　3、主文档耗时

　　慢原因一：关键子资源耗时

　　页面打开速度优化建议：

　　1、清除不必要的资源，避免不必要的下载

　　站点应定期审查网页上的资源是否必要，并评估资源的价值和性能影响。网页往往收录一些冗余资源，影响网页的性能，无法为网页带来价值。您可以考虑移除不必要的资源，以避免导致性能消耗的不必要的资源下载。

　　清除阻塞渲染的 JS 和 CSS：如果想尽快完成首屏渲染，需要尽量减少网页上关键 JS/CSS 子资源的数量，并尽可能地清除这些资源尽量减少下载。

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

　　一些网站可能会将所有的JS组合成一个大包。如果这样加载，页面性能会受到影响。长时间运行的 JS 可能会阻塞主线程，此时可以考虑使用 requestAnimationFrame() 或 requestIdleCallback() 进行优化。

　　开发者可以根据不同的业务需求，在JS中拆分首屏关键代码，让首屏所需的少量JS代码提前加载执行，从而缩短页面加载时间，其余的可以加载或按需放置加载后，建议开发者优先在第一屏渲染完成之后，并且在关闭的body标签之前使用JS。

　　3、优化阻塞渲染的JS

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

　　为了达到最佳性能，页面的JS可以异步执行。建议先用 defer 方法，再用 async 方法，把关键渲染路径中不需要的 JS 去掉。

　　(1）优化JS使用，优先使用异步JS资源

　　默认情况下，JS 资源会阻塞解析，强制等待 CSSOM 并暂停 DOM 的构建，这将大大延迟首屏渲染的时间。异步 JS 资源不会阻塞文档解析器。如果脚本可以使用 defer/async 属性，则说明首屏渲染不需要。可以考虑在首屏渲染后异步加载脚本。

　　(2）延迟解析加载JS

　　为了尽量减少内核渲染网页的工作量，建议开发者延迟所有不必要的 JS 脚本，这些脚本对于构建首屏渲染不是必需的，并在 body 结束标签中优先考虑 JS。

　　(3）避免长时间运行 JS

　　长时间运行的 JS 会阻塞 DOM 的构建、CSSOM 以及网页的渲染，因此任何对首屏渲染不重要的初始化逻辑和函数都应该延迟。如果需要运行很长的初始化序列，请考虑将它们拆分为几个阶段，以便浏览内核可以间隔处理其他渲染任务。

　　4、优化阻止渲染的 CSS

　　默认情况下，关键 CSS 子资源将阻止内核渲染。请务必精简网页的CSS资源。同时，您需要尽快下载CSS。关键CSS子资源优先在head标签中，缩短首屏渲染时间。.

　　(1）优化CSS的使用

　　CSS 是构建渲染树的基本元素。首次构建网页时，确保将任何非必要的 CSS 资源标记为非关键资源（例如打印），并确保尽可能减少关键 CSS 子资源的数量。

　　(2）把关键的CSS放在文档的head标签中

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

　　(3）避免使用 CSS 导入指令

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

　　慢原因二：主文档耗时

　　页面打开速度优化建议：优化压缩资源，减少总下载文件大小

　　优化和压缩资源以最小化总下载大小并提高网页加载速度。开发者可以考虑简化编码以优化主文档的大小。同时可以使用chunk编码，服务器可以输出chunk，主要文档资源可以通过GZIP进行压缩。

　　慢原因三：页面有多余的跳转

　　页面打开速度优化建议：去除多余的页面跳转

　　从用户的点击到页面的打开，一些网站在最终页面显示给用户之前可能会经历额外的跳转。根据研究数据，单次额外跳转会使性能下降约600毫秒，这可能会给关键渲染路径增加600毫秒的延迟体验，因此建议开发人员移除额外跳转。