网站加载速度的重要性应该是任何公司 SEO 策略中的基本内容,尽管在 SEO 中经常发生的情况是,要做的事情太多,人们不知道从哪里开始。
在 SEO 中,我们总是需要一个积压工作,在其中添加要执行的任务,这就是为什么今天我们帮助您填写这8 个任务来优化加载速度:
1.- 消除不必要的下载
最快且最优化的资源是那些未发送的资源。我们可以计算每个脚本或请求的价值吗?我们能否识别那些没有持续使用的内容,并评估何时将它们放入代码中,何时不放入?您必须清点自己的资源(请求)和第三方脚本,以了解每一项资源的所有者。通过做这个练习,我们将能够识别没有人知道它们的用途的脚本以及其他可以消除的脚本,因为它们没有被使用。资源是否遵循性能最佳实践(压缩、缓存等)?如果我们想控制影响加载速度的因素,就必须注重对每个资源的单独分析。到底开头那句话是对的,不发送的话加载总是会更快!
2.- 优化资产传输的编码和大小
PageSpeed 最著名的建议之一:压缩、缩小和 gzipe!并且记住要按顺序进行
应用特定于内容的优化:CSS、JS 和 HTML 压缩器。
应用 GZIP 来压缩缩小的结果。
优化编码和活动传输大小
编码优化
3.- 图像优化
根据 HTTP Archive 的数据,为获取 WhatsApp 号码数据 网页而传输的数据中有 60% 是由 JPEG、PNG 和 GIF 文件组成的图像。
图像优化
图像优化
图像仍然是网络上文件过大的首要原因。
快速获胜
删除不必要的图像资源(EXIF)
尽可能利用 CSS3 效果,例如渐变
使用网络字体而不是在图像中编码文本
4.- 自动图像优化
图像优化层面的最佳实践在不断变化,因此,只要有可能,我们就应该自动化优化。
有一些工具可以在编译过程中自动优化,例如Imagemin、libvips或多种替代方案。
CDN 服务主要提供自动图像优化。
归根结底,在许多情况下,支付这些服务的费用比每次最佳实践发生变化时不断重做优化要便宜。
您应该优化您的图像吗?使用Lighthouse或Webpagetest等服务来了解其优化是否还有改进的空间。
网页测试
5.- 定义图像的网络性能预算
性能预算是网站不应超过的网页性能“上限”。审核您的网站,与您的开发人员交谈并定义可实现的最大值,并在优化水平和速度方面提供明显的改进。
一个例子是“任何页面上的图像都不会超过 200 KB”。
您可以使用Speedcurve或Calibreapp等工具来监控每个页面是否满足此预算。您的开发人员可能知道这些工具的一些替代方案,所以现在您知道了,就实施它吧!
6.- 启动Javascript优化
我们已经讨论并演示了有关Javascript 索引和使用 Javascript 进行网站优化的内容,但由于该技术的使用日益广泛,并且它增加了加载过程的复杂性,因此我们继续寻找优化机会。
根据 Httparchive 的数据,页面在移动设备上的平均交互时间为 9.3 秒,这意味着还有改进的空间,您不觉得吗?
移动设备上的平均互动时间
根据 HTTPArchive,移动设备上的交互时间
通过从页面中删除非必要的 JavaScript 代码,您可以减少数据传输时间、CPU 密集型解析和编译操作以及潜在的内存开销。这也有助于使 广您喜欢的内容和产品的同时建 您的页面交互速度更快。受我们使用的 JavaScript 数量影响的两个因素对加载速度影响很大: CPU 和我们连接的网络。
为了得分,您可以鼓励开发人员使用PRPL编程模式,这是 Google 开发的实验模式,重点关注网站启动和交付性能。
7.- 加载第三方JS
在没有意识到的情况下,我们已经在我们的网站中添加了第三方 Javascript,例如:
分享按钮
分享按钮
分享、打印、点赞……无论如何!
我们无法消除其中的许多脚本,因此我们必须了解如何优化共存,🙂但正如我们在第一点中已经提到的,我们必须对每个脚本或发出的请求进行单独分析。当我们的网站加载时。例如,我们多次发现 A/B 测试每月仅在一次冲刺中进行,但执行这些测试的代码始终在网络上。我们应该避免这些类型的做法!
同样,这些第三方脚本会产生大量的网络负载,这会影响我们在移动设备上的体验并增加 Javascript 的启动时间。
如何优化第三方脚本的加载?
脚本可以删除吗?很基本,但我们肯定可以在不止一种情况下应用它。
我们可以托管脚本来提高其性能吗?这并不容易,但它可以发挥作用。
使用async或defer属性来防止脚本阻止页面加载。
<link rel=preconnect> o <link rel=dns-prefetch>尽可能使用以减少延迟。
8.- 客户提示:了解我们可以提供哪些内容
作为最后一项任务,我们提出了我们认为非常有用的一项任务。
我们有多少次听说您必须将图像更改为更现代的格式,以减轻它们的重量,然后发现没有浏览器支持它们?这对你来说听起来很真实
为此,我们有客户端提示、标头,为我们提供有关用户使用的设备和网络的数据。它们是一种协商内容的方法,使我们根据浏览器的响应来调整内容。
Accept-header使我们能够知道浏览器理解 AQB 目录 和接受哪些类型的内容,以便我们只提供这些内容。例如,在本例中能够使用著名的WebP图像格式
Save-Data 标头允许您应用优化来减少渲染所需的数据。
而这还不是全部朋友,如果您愿意,您可以详细了解我们是如何WPO以及如何优化您网站的加载速度或者您可以订阅我们的博客。
您认为我们错过了任何重要提示吗?你想让我们讨论一下吗?