什么是页面速度?
页面速度是指网页加载所需的时间。一个页面的加载速度是由几个不同的因素决定的,包括网站的服务器、页面文件大小和图片压缩。
也就是说,"页面速度 "并不像 "网页速度 "那么重要。
"页面速度 "并不像听起来那么简单。
这是因为有很多不同的方法来衡量页面速度。这里有三种最常见的方法:
完全加载页面。这是指页面上100%的资源加载所需的时间。这是最直接的判断页面加载速度的方法。
Time to First Byte: 这是衡量一个页面开始加载过程所需的时间。
如果你曾经登陆过一个页面,盯着白屏几秒钟,那就是TTFB在工作。
第一次有意义的刷屏/第一次上下文刷屏。这是加载足够多的资源来实际阅读你页面上的内容所需要的时间。
例如,假设你有一篇博文,完全加载需要10秒的时间。
这是一个很长的时间...... 如果你只看整个页面加载所需的时间,那是一个很长的时间。
另一方面,关注 "第一次有意义的绘画 "有时更能代表用户在加载时如何与你的页面实际互动。
例如,让我们再来看看这个页面,加载页面的所有资源需要10秒的时间。
尽管整个页面加载需要一段时间,但当用户第一次登陆页面时,在1.5秒后,他们会得到一个 "第一次有意义的油漆"。
这意味着他们几乎可以立即开始与你的页面进行互动。所以对用户来说,你的页面是快速的。
有很多不同的方法来衡量页面速度。没有一个 "正确的 "衡量标准可以胜过其他所有的方法。它们都有其优点和缺点。
相反,你应该专注于提高你的页面加载速度。
为什么页面速度对SEO很重要?
自2010年以来,谷歌已经将页面速度作为一个排名因素。
而在2018年,谷歌通过 "速度 "更新,提升了页面速度的重要性。
简而言之。
一个加载速度慢的网站会伤害你的Google排名。
问题是:Google是如何判断你的网站加载速度的?他们看的是100%的页面加载所需的时间?还是看TTFB?
他们并没有对此做出任何官方的声明。但是考虑到他们在他们的PageSpeed Insights工具中报告了所有这些指标,这告诉我他们可能使用了不同的页面速度测量的组合。
有了这些,下面是如何提高网站的加载速度。
最佳实践
压缩图像
我把这个放在第一位,因为这通常是最大的赢家。
毕竟,图片通常会占据一个页面的50-90%的大小。
(和加载速度)
可以看到,86.2%的页面大小是由图片引起的。
所以,你能压缩的图片越多,你的页面加载速度就越快。
怎么做呢?
如果你的网站运行在WordPress上,那么我强烈推荐一个叫WP Smush的插件。
它可以自动压缩你上传到WordPress媒体库中的任何图片。至少根据该插件的创建者的说法,这可以减少14.2%的图片文件大小。
不使用WordPress?外面还有很多图片压缩选项,比如Caesium和Mass Image Compressor。
与过去不同的是,现在大多数的压缩工具要么使用无损压缩,要么只把图片质量降低到几乎看不出来的程度。
例如,我们在Backlinko这里100%地压缩了图像。而它们看起来仍然很好、很清晰。
清洁和压缩你的代码
换句话说,就是:将你的页面上的资源进行精简。
这包括:
HTML
CSS
JavaScript
和其他任何在你的页面上发现的代码
你的第一步应该是清理你的页面上任何臃肿的代码。这些额外的代码可能是来自于你的网站上没有的功能。或者是来自偷工减料的开发人员的工作。
无论哪种方式:你的代码越干净,加载的东西就越快。
然后,使用GZip等程序压缩你的代码。
升级主机
这是我没有看到足够多的人谈论的一个小技巧。
你可以整天清理你的代码和压缩图片。但是,如果你花4.99美元/月的主机费,你的网站是不会快速加载的。
这是因为你和一百万个其他网站共享一台服务器。
有一百万个虚拟主机在那里。因此,我不能特别推荐一个。
但我可以说,作为一个一般的规则:当涉及到托管,你得到你所付出的东西。
因此,如果你想提高网站的加载速度,可能是时候升级到高级主机或专用服务器了。
激活浏览器缓存
这允许用户在浏览器的缓存中存储部分页面。
所以当他们下次访问你的网站时,加载速度会更快。
不幸的是,这不会帮助你的页面加载速度更快,对于第一次访问的人来说,这不会帮助你的页面加载速度。但对于以前访问过你的网站的人来说,这对于提高你的加载速度是非常好的。
你可以在你的.htaccess文件中设置浏览器缓存。或者使用WordPress插件。
实施一个CDN
内容传输网络(CDN)是提高网站加载速度的最简单方法之一。
CDN的工作原理是找出访客的实际位置.....然后从离他们很近的服务器上提供你的网站资源。
使用多个页面速度测试工具进行测试
现在你已经实施了这些步骤,是时候看看你的表现了。
而我建议使用两个不同的工具来测试你的页面速度。
第一个是Google PageSpeed Insights工具。
谷歌的工具会扫描你的页面代码是否有问题.....
....和优化机会。
最近他们还增加了一个功能,可以向实际用户报告你的网站加载所需的时间(使用谷歌Chrome浏览器的数据)。
这是一个超级有用的工具。
有一个警告的词:你会发现,有时工具的建议对你的网站没有意义。
例如,谷歌的工具建议我 "以下一代格式提供图片"。
然而,这些 "下一代 "格式并不被大多数浏览器(包括Safari和Firefox)所支持。因此,如果你切换到这些次世代格式,你的网站的用户体验就会大打折扣。
话虽如此:这个工具中有很多有用的见解。我建议你尽可能多地实施这些工具。
接下来,我们有WebPageTest.org。
WebPageTest最酷的地方在于它能在实际的浏览器中加载你的页面。而且它可以让你知道你的页面的特定部分需要很长时间才能加载。