什么是页面加载速度？
页面加载速度是网页加载所需的时间。页面的加载速度由几个不同的因素决定，包括站点的服务器、页面文件大小和图像压缩。
“页面速度”并不像听起来那么简单。
这是因为有很多不同的方法来衡量页面速度。以下是三种最常见的：
完全加载页面：这是页面上100%的资源加载所需的时间。这是确定页面加载速度的最直接方法。
首字节加载时间（TTFB）：这度量页面开始加载过程所需的时间。
如果你曾经访问一个页面，盯着白色屏幕几秒钟，那就是TTFB.
第一次页面渲染/第一次上下文绘制：页面加载足够的资源以使用户能够阅读该页面上的内容所需的时间。
例如，假设您有一篇需要10秒才能完全加载的博客文章。
这是一个很长的时间…如果你只看加载整个页面需要多长时间。
另一方面，关注第一次页面渲染有时更能代表用户在加载页面时与页面的实际交互方式。
例如，让我们再次查看加载页面所有资源需要10秒的页面。
尽管加载整个页面需要一段时间，但当用户第一次登录页面时，他们会在1.5秒后获得“第一次页面渲染的部分”
这意味着他们可以立即开始与您的页面交互。所以对用户来说，你的页面很快。
有很多不同的方法来测量页面速度。没有一个大一统的页面渲染速度指标。他们都有利弊。
相反，专注于提高您找到的所有指标的页面加载速度。
为什么页面速度对SEO很重要？
自2010年以来，谷歌一直将页面速度作为排名因素。
2018年，谷歌在站长平台更新提升了页面速度的重要性。
简而言之：
一个加载缓慢的网站会损害你的谷歌排名。
问题是：谷歌如何决定你的网站的加载速度？他们是否关注端到端的页面加载需要多长时间？还是TTFB(首字节请求耗时)？
他们没有就此发表任何官方声明。但考虑到他们在PageSpeed Insights工具中报告了所有这些指标，我认为他们可能使用了不同的页面速度测量值的组合：
有了这些，下面是如何提高网站的加载速度的具体方法。
页面加载速度最佳实践
压缩图像
我把这放在首位，因为这通常是最大的因素。
毕竟，图像通常占页面大小的50-90%。
例如，从我的网站上的页面查看此页面速度报告：
如您所见，86.2%的页面大小来自图像：
因此，您可以压缩的图像越多，页面加载的速度就越快。
如果你的网站运行在WordPress上，那么我强烈推荐一个名为WP Smush的插件：
它会自动压缩您上传到WordPress媒体库的任何图像。根据插件的创建者，这可以将图像文件大小减少14.2%。
如果没有用WordPress，还有很多图像压缩选项，比如Caesium和Mass image Compressor。
与过去不同，现在大多数压缩工具要么使用无损压缩，要么只将图像质量降低到几乎不引人注意的程度。
例如，我们的所有图像都是压缩的。它们看起来仍然很漂亮，很锋利：
清理和压缩代码
也就是缩小页面上的资源。这包括：
- HTML格式
- CSS格式
- JavaScript以及在您的页面上找到的任何其他代码
第一步应该是清理页面上的任何臃肿代码。这些额外的代码可能来自您的网站上不再具有的功能。或者来自劣质的开发者工作。
无论哪种方式：代码越干净，加载的速度就越快。
然后，使用GZip这样的程序压缩代码。
升级宿主主机
您可以整天清理代码和压缩图像。但如果你每月花4.99美元在托管主机上，你的网站不会很快加载。
这是因为你正在其他网站共享一个服务器。
因此，如果你真的想提高网站的加载速度，那么可能需要升级到高级主机或专有服务器了。
激活浏览器缓存
这允许用户将页面的一部分存储在其浏览器缓存中。
所以下次他们访问你的网站时，加载速度会快很多。
不幸的是，对于初次访问的用户，这不会帮助您更快地加载页面。但对于以前访问过您网站的人来说，这对于提高您的加载速度非常有用。
您可以在.htaccess文件中设置浏览器缓存。或者使用WordPress插件。
使用CDN
CDN是提高网站加载速度的最简单方法之一。
CDN的工作原理是确定访问者的物理位置……然后从其附近的服务器上获取站点资源。
使用网页速度测试工具进行测试
现在您已经实施了这些步骤，现在是时候看看您的表现了。
我建议使用两种不同的工具测试页面速度。
第一个是Google PageSpeed Insights。
谷歌的工具会扫描你的页面代码以查找问题…
以及修复建议
他们最近添加了一个功能，可以报告网站加载到用户浏览器所需的时间（使用谷歌Chrome浏览器数据）。
这是超级有用的。
警告：你有时会发现该工具的建议对你的网站没有意义。
例如，谷歌的工具建议我“Serve images in next-gen formats”。
然而，大多数浏览器（包括Safari和Firefox）都不支持这些“下一代”格式。因此，如果你切换到这些下一代格式，你的网站的用户体验将会下降。
也就是说：这个工具有很多有用的见解。我建议尽可能多地实施。
接下来，我们有WebPageTest.org。
WebPageTest的有用之处在于它在实际浏览器中加载页面。它还可以让您了解页面中需要很长时间才能加载的特定部分。
