发布时间：2018 年 8 月 17 日
本指南将从背景信息的角度审视 PageSpeed Insights 规则：优化关键呈现路径时需要注意什么，以及原因。
移除阻塞渲染的 JavaScript 和 CSS
为了尽快呈现首个网页内容，请尽可能减少网页上的关键资源数量，并尽可能消除关键资源，尽可能减少下载的关键字节数量，并优化关键路径长度。
优化 JavaScript 使用
JavaScript 资源默认处于解析器屏蔽状态，除非被标记为 async 或使用特殊的 JavaScript 代码段添加。解析器阻塞 JavaScript 会强制浏览器等待 CSSOM 并暂停 DOM 的构建，这反过来可能会大大延长首次渲染的时间。
优先使用异步 JavaScript 资源
异步资源会取消阻塞文档解析器，并允许浏览器在执行脚本之前避免阻塞 CSSOM。通常，如果脚本可以使用 async 属性，则也意味着它对首次渲染而言不是必不可少的。请考虑在初始渲染后异步加载脚本。
避免同步服务器调用
使用 navigator.sendBeacon() 方法可在 unload 处理脚本中限制 XMLHttpRequest 发送的数据。由于许多浏览器要求此类请求是同步的，因此它们可能会导致页面转换速度变慢，有时会明显变慢。以下代码展示了如何在 pagehide 处理程序（而非 unload 处理程序）中使用 navigator.sendBeacon() 向服务器发送数据。
<script>
function() {
window.addEventListener('pagehide', logData, false);
function logData() {
navigator.sendBeacon(
'https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop',
'Sent by a beacon!');
}
}();
</script>
fetch() 方法提供了一种更好的异步请求数据方式。fetch() 使用 Promise 而非多个事件处理脚本来处理响应。与 XMLHttpRequest 的响应不同，fetch() 响应是流对象。这意味着调用 json() 也会返回一个 Promise。
<script>
fetch('./api/some.json')
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' + response.status);
return;
}
// Examine the text in the response
response.json().then(function(data) {
console.log(data);
});
}
)
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
</script>
fetch() 方法也可以处理 POST 请求。
<script>
fetch(url, {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: 'foo=bar&lorem=ipsum'
}).then(function() { // Additional code });
</script>
延迟解析 JavaScript
为了尽可能减少浏览器在渲染网页时必须执行的工作量，请推迟任何对构建初始渲染的可见内容不至关重要的非必需脚本。
避免长时间运行 JavaScript
长时间运行的 JavaScript 会阻止浏览器构建 DOM、CSSOM 和渲染网页，因此请将对首次渲染不重要的任何初始化逻辑推迟到稍后执行。如果需要运行一个很长的初始化序列，请考虑将其拆分为多个阶段，以便浏览器在其间处理其他事件。
优化 CSS 使用
构建渲染树需要使用 CSS，并且在网页的初始构建期间，JavaScript 通常会阻塞在 CSS 上。确保将所有非必需的 CSS 标记为非关键 CSS（例如，打印和其他媒体查询），并尽可能减少关键 CSS 的数量和传送时间。
将 CSS 放在文档标头处
尽早在 HTML 文档中指定所有 CSS 资源，以便浏览器能够尽快发现 <link> 标记并发送 CSS 请求。
避免 CSS 导入
借助 CSS 导入 (@import) 指令，一个样式表可以从另一个样式表文件导入规则。不过，请避免使用这些指令，因为它们会在关键路径中引入额外的往返：只有在收到并解析包含 @import 规则本身的 CSS 样式表后，系统才会发现导入的 CSS 资源。
内嵌阻止呈现的 CSS
为获得最佳性能，您可能需要考虑直接将关键 CSS 内嵌到 HTML 文档中。这可以消除关键路径中的额外往返，如果正确执行，可以实现“一次往返”的关键路径长度，其中只有 HTML 是阻塞资源。