如何实现 100% 谷歌页面速度2022|林子超博客

 没有什么比糟糕的加载体验更能破坏一个伟大的网站了。事实上，谷歌表示，加载时间为 7 秒的访问者跳出页面的可能性要高出 113%。

页面速度对用户体验非常重要，以至于谷歌在 2018 年开始将其作为排名因素之一。现在，即使你正在努力制定 SEO 策略，低页面速度也可能允许另一个网站——甚至可能是其中一个您的竞争对手——在重要的搜索引擎结果页面上领先于您。

→ 免费下载：构建和维护高性能网站的 5 个关键步骤

对于那些想要了解加载时间的人，Google 提供了一个免费的 PageSpeeds Insights 工具，它可以在 0 到 100 的范围内对您的页面进行评分。以下是 PageSpeed Insights 在您搜索“google.com”后呈现的报告的快速示例”：

Google.com 在 Google PageSpeed Insights 上的得分为 99%。

报告看起来简洁明了。但是，如果您不是最精通技术的人，则可能有点难以理解报告中的某些建议的实际含义。

这是一个包含一长串行话评论的报告示例：

Google PageSpeed Insights 上的机会建议

虽然上面的行话可能看起来令人生畏，但 PageSpeed Insights 的许多建议实际上可能很容易接受——即使您不是网络开发人员。

为了帮助您提升用户体验并解决加载时间缓慢的问题，这里有一个八步指南，可实现 100% 的速度得分。对于每个步骤，我们将解释其重要性，让您深入了解如何执行此操作，并让您知道是否需要技术专家参与。

如何实现 100% 谷歌页面速度

确定您是否以及在哪里落后。

压缩您的图像。

缩小或缩小 HTML、CSS 和 JavaScript 代码。

消除渲染阻塞元素。

加快您的移动速度。

避免或最小化页面重定向。

提高服务器响应时间。

使用CDN

1. 确定你是否以及在哪里滞后。

许多内容管理系统有内置的工具或插件选项，可以帮助你弄清楚为什么你的整个网站或某个特定页面的加载时间慢。在你采取任何行动修复你的网站的加载时间之前，你应该使用这些工具之一，以获得一个基线了解你目前的状况。这将帮助你缩小你需要采取的实际步骤，以改善你的网站的加载时间。

这里有五个免费的工具，你可以试试。

谷歌的PageSpeed Insights

网站评级器

GTM Metrix

KeyCDN网站速度测试

Pingdom

谷歌的PageSpeed Insights，我们在上面强调过，可能是你最好的指南之一--特别是如果你的目标是具体实现谷歌页面速度高分的话。

列出的其他一些工具也很有帮助，因为它们可以给你一个与你的网站速度有关的其他细节的快速概述。

例如，KeyCDN将允许你看到你的页面在不同国家的加载速度。为了对你目前所处的位置有一个扎实的了解，可以尝试使用一些不同的工具并比较结果。

2. 压缩你的图片。

大图片是导致页面速度缓慢的最常见原因之一。关于什么是最佳文件大小，有许多不同的意见。一些主机商说你应该把文件放在200KB以下，而Shopify的博客建议把文件放在70KB以下。谷歌的开发人员建议，在失去清晰度之前，你应该尽可能的小。

为了在不完全破坏质量的情况下缩小你的图片，我们建议用免费的在线软件如Squoosh.app或Compress.io来压缩文件。你也可以使用Photoshop。

在你上传图片之前，使用Photoshop或其他编辑软件，将图片裁剪或大小调整到网站上显示的确切分辨率。

你的显示尺寸与你的文件尺寸不一样。显示尺寸只是图像在你的网站上看起来的尺寸。

你的文件大小是你上传的实际图像的大小。如果你有一个大的文件和一个小的显示尺寸，大文件仍然需要相同的时间来加载，如果它有一个巨大的显示尺寸。相反，如果你上传一个小文件，并以一个小的显示尺寸呈现，它将快速加载。

一个好的经验法则是将图片裁剪成它将在你的页面上显示的确切尺寸，然后压缩图片文件，使其占用更少的存储空间。

例如，如果你的CMS会自动裁剪或调整图片的大小为500px x 300px，你还是应该在上传之前手动裁剪到同样的精确尺寸。即使你在页面上没有看到一个巨大的图像，你上传的大图像文件仍然可能导致一个重大的速度下降。

3. 缩小，或者说最小化，你的代码HTML、CSS和JavaScript代码。

CSS、HTML和JavaScript可能包含很多额外的、多余的、或完全无用的代码。与图像类似，这些数据会拖慢你的页面。

为了避免这种情况，谷歌开发人员建议对你的代码进行 "最小化"。最小化通过删除无用的语言、注释和空格来缩小你的代码，这些都是在创建或更新页面时可能留下的。

4. 4.消除阻挡渲染的元素。

有时，一个页面会被编码为在主要内容之前加载不太重要的元素，如侧边栏或横幅。你要优先考虑你的代码，使你的主要内容首先出现在折叠上方。

一旦你知道这些元素在哪里，你可以使用这个快速指南来学习如何消除它们。

5. 加快你的移动速度。

2018年，60%的谷歌搜索是在移动设备上完成的。除了在其搜索结果排名中奖励移动优化的网站外，如果你的移动网站加载速度快，谷歌也会给你一个更高的页面速度分数--可能还有更高的排名。

PageSpeed Insights可以显示你的移动网站的得分情况。在你搜索你的URL并看到报告后，你可以在桌面和移动标签之间切换，以查看每种格式的单独得分。

谷歌PageSpeed Insights的移动和桌面标签

如果你落后了，试着精简访客在移动网站上看到的内容。隐藏或尽量减少桌面网站的元素，如照片或额外的文本框，这些元素在小屏幕上可能看起来很笨重或没有必要。

像AMP（加速移动页面的缩写）这样的服务可以指导你创建简化的网页，快速加载并自动调整以适应不同的浏览器尺寸或设备。

6. 避免或尽量减少页面重定向。

重定向是指访问者在点击或输入一个链接后，在进入他们想要的网页之前被自动引导到一个或多个不同的地方。因为这可能会占用你的页面速度的宝贵时间，你应该只在绝对必要时使用重定向。

这方面的一个例子可能是在公司或网站重塑期间。在这种情况下，这篇文章涉及到如何创建SEO友好的301重定向。

7. 提高你的服务器响应时间。

谷歌建议服务器的响应时间低于200毫秒。一个缓慢的服务器可能是由许多不同的事情造成的，包括你的网站主机。

解决一个滞后的服务器可能会比过去的几个步骤更有技术含量。这份对抗502网关错误的指南有一些关于诊断和解决服务器相关问题的有用提示。

如果你的网站使用的是主机公司的服务器，如GoDaddy，联系一个知识渊博的代表也可能帮助你确定和解决这个问题。

8. 使用内容交付网络。

内容交付网络（CDN）是一组全球分布的服务器，可以存储你的网站的浏览器缓存，并为世界各地的访问者快速加载。当来自遥远地域的人访问你的网站时，网页将从靠近访问者的附近CDN服务器加载，而不是你自己的服务器。

为什么你会使用这个？因为离你的服务器很远的访问者可能会产生更长的页面加载时间。例如，如果你的服务器在加利福尼亚，一个德国的网络访客看到的网站速度会比附近的人（如西雅图）慢。

由于CDN服务器的全球位置，可以防止这个问题，并将提高国际访问者的网站速度。

如果你用CMS建立你的网站，如HubSpot，它可能已经在CDN上运行。GoDaddy和Squarespace是其他提供CDN服务的内容管理软件的例子。WordPress用户也可以设置一些免费插件，如CDN Enabler。

如果你认为你没有CDN，一些CDN供应商包括亚马逊CloudFront、Cloudflare和AT&T内容交付网络。

下次你看你的Google PageSpeed Insights报告时，把这个步骤清单放在手边。这些提示将指导你如何快速减少和精简你的页面，因为你的目标是100%的完美分数。

Cloudfare和Akamai很有名，但是价格也比较高。我推荐G-Core Labs的CDN，性价比很高，在国外CDN的效果非常好。他们在中国现在不太有名，但是在欧洲好多著名的公司，特别是网上游戏公司，用他们的CDN和服务器托管。