在过去的几年里，谷歌大力推动网站管理员以一种更友好的方式开发他们的网站，将网站速度作为核心考虑因素。
我说的不仅仅是提高网站速度所带来的小小排名提升。看看谷歌输出的新资源、内容和工具的数量，以帮助开发人员更快地制作网站：
dev -关于可访问性、最佳实践和速度优化的指南
一个更好的页面速度洞察工具，利用以用户为中心的性能指标
WebP -一种图像格式，提供比传统的jpeg和PNG更小的文件大小
基于机器学习的页面预取
在developers.google.com上有详细的性能优化指南
AMP -一个有争议的移动速度优化框架
对Gzip压缩的改进
PageSpeed模块- Apache & NGINX模块由谷歌，它允许用户自动优化CSS， JavaScript，优化和延迟加载图像，以及更多。
最重要的是，像Cloudflare这样的大公司也在推动网络的发展，他们让这些类型的东西更容易在他们的边缘服务器网络上实现，而且大部分是免费的。
我们目前正处于页面速度优化的黄金时代，共享的知识比以往任何时候都多，实现也变得越来越容易。
你为什么要在意呢？
适当的页面速度优化对企业的影响是巨大的。最近的数据表明，如果你将页面加载时间从5.7秒降低到2.4秒，你的转化率可能会增加两倍以上。
对于有大量目标的大型企业来说，将网站收入提高三倍听起来有吸引力吗？当然有！
如果你想看到网站速度优化对你的网站的潜在影响，通过谷歌的这个工具运行你的主页。一旦它评估了你的网站，就会有一个方便的竞争对手分析工具和一个收入预测工具，可以估计如果速度得到改善，潜在的收入增长。
所以，如果你已经完成了网站速度优化的基础（Gzip压缩，浏览器缓存，体面的托管等），并且你正在寻找一些关于如何提高网站速度的更高级的技巧，那么你来对地方了。
我要展示的是在基础之外获得站点速度优化好处的其他一些方法，重点是改进以用户为中心的性能指标和关键的呈现路径。
什么是以用户为中心的性能指标？
我强烈推荐阅读谷歌关于以用户为中心的性能指标的文章。我们将关注的指标是在更新后的pagespeedinsights工具和谷歌的Lighthouse工具中发现的指标。
您可能会问，关键的渲染路径是什么？
关键的呈现路径是浏览器完成在网页上呈现和显示内容的步骤。
我强烈建议你看看下面的文章，如果你不知道什么是关键的渲染路径：
Varvy的指南
b谷歌的指南
在考虑网站速度优化时，它是你关注的关键渲染路径，这一点非常重要。如果你优化的是页面加载时间，而不是像Lighthouse这样的工具测量的以用户为中心的指标，那你就大错特错了！
举个例子，如果你的页面加载时间是6秒，但用户可以在1秒内看到页面并与之交互，那就不算太糟糕了。
如果你的页面加载时间是6秒，但用户直到5秒后才能看到任何内容或与页面进行交互，从用户的角度来看，这是相当糟糕的。
这是一个很明显的比较，但你明白了。通过优化关键渲染路径，您可以关注感知到的加载时间，这对用户来说才是真正重要的。
现在，关于如何提高页面加载时间的一些技巧。
文件优化
删除渲染阻塞文件
删除渲染阻塞文件必须是你可以做的最好的事情之一，以改善关键的渲染路径和重要的指标，如你的第一次内容绘制（FCP）。如果有一件事你想改进，把它放在你清单的首位！
渲染阻塞是什么意思？
渲染阻塞是指当外部链接的JS和CSS文件阻止浏览器完成HTML解析并向用户显示页面内容时。
当浏览器解析HTML并找到外部链接到的CSS和JS文件时，它将停止解析HTML，并开始请求、接收、下载，然后解析这些文件。在下载并解析这些文件之前，页面将保持空白。
这可能会导致一些相当严重的延迟，特别是当CSS或JS的下载大小较大时。
解决这个问题的三个重要步骤如下：
1. 内联临界CSS
要解决这个问题，首先要做的是在页面的中内联任何关键的CSS。正如您可能已经猜到的那样，关键CSS是向用户显示页面上方内容所需的CSS。
当这个CSS被内联到页面顶部的中时，浏览器将解析它，然后在到达渲染阻止文件之前将它应用到它找到的任何HTML中。
阅读更多web.dev
2. 延迟非关键CSS
既然已经加载了关键的CSS，我们就需要推迟渲染上面内容所不需要的任何CSS。
要做到这一点，需要使用rel=preload属性，以一种与通常略有不同的方式加载CSS文件，如下所示。
preload会导致CSS异步加载，而onload属性会导致CSS在页面加载完成后立即加载。
noscript标签是必需的，以确保CSS仍然加载不执行JavaScript的浏览器。
警告：不要这样做，除非你先内联了关键的CSS。如果你不这样做，你将得到一个FOUT（无样式内容的闪烁）
额外提示：对于那些还不支持preload属性的浏览器，你可以使用loadCSS库来进行JS填充。浏览器支持正在改进，但值得注意的是，Firefox目前还不支持它。
3. 延迟非关键JS
接下来，我们需要修复任何阻止浏览器呈现内容的JS。浏览器加载JS的默认行为如下：
通过延迟JS，浏览器的行为看起来更像这样：
这样做就像在标签中添加“defer”一样简单。