文章是系列第三部分，分析了2021年F1车队的网站加载性能，特别关注了红牛车队网站的表现。作者通过对比不同团队构建的网站，探讨了各自的性能问题，旨在为网站优化提供参考。

标题：2021年F1网站速度大比拼：第三部分

主要内容：

本文是F1网站加载性能系列评测的第三部分，重点分析了红牛车队官网的性能表现。尽管红牛网站在视觉上非常丰富且吸引人，且相比2019年版本有了显著的速度提升，但仍存在一些优化空间。

主要问题及改进建议：

1. 内容渲染延迟3秒：由于不必要的内联CSS导致。建议减少内联代码，仅保留页面渲染所需的部分，其余资源通过外部加载。
2. 主图片加载延迟10秒：由于JavaScript实现的响应式图片加载方式导致。建议使用真正的响应式图片技术。
3. 主图片额外延迟2秒：由于图片资源位于不同服务器导致。建议将图片移至与页面相同的服务器。
4. 主图片优化不佳导致额外延迟2秒：建议进一步优化图片质量。
5. 关键图片加载延迟40秒：由于通过JavaScript加载导致。建议使用<img>标签并启用响应式图片。
6. 关键图片优化不佳导致额外延迟30秒：建议优化图片格式和压缩设置。
7. 字体加载延迟2秒：由于字体资源位于不同服务器导致。建议将字体移至与页面相同的服务器。
8. 内容阻塞的Cookie弹窗延迟40秒以上：由于多种因素导致，建议优化弹窗加载逻辑。

具体问题分析：

• 不必要的内联代码：页面内联了大量未使用的CSS代码，导致加载时间增加。通过优化内联代码，可以减少约3秒的内容渲染时间。
• 大尺寸主图片：虽然使用了WebP格式，但质量设置过高，导致图片体积过大。建议降低质量设置以优化加载速度。
• 大尺寸覆盖图片：覆盖在主页轮播图上的图片虽然设计出色，但WebP格式的优化不佳。建议使用AVIF格式，以更好地处理频繁变化的Alpha通道。
• 通过JavaScript加载的覆盖图片：该图片在用户访问网站50秒后才开始加载，建议使用<img>标签并启用响应式图片，以提前触发下载。
• 内联的模糊图片：虽然使用模糊效果掩盖了图片加载问题，但内联图片体积较大。建议优化图片尺寸和格式，减少内联数据量。

优化后的效果：

通过减少内联代码和优化图片，红牛网站的加载速度可以进一步提升。虽然优化后的提升幅度不如之前的网站明显，但仍然值得实施。

排行榜：

在当前的评测中，红牛网站以8.6秒的加载时间位居榜首，相比2019年版本提升了7.2秒。Alpha Tauri和Alfa Romeo分别以22.1秒和23.4秒的加载时间位列其后。

后续内容：

下一部分将评测威廉姆斯车队的网站性能，敬请期待。

系列文章链接： 1. 第一部分：方法论 & Alpha Tauri 2. 第二部分：Alfa Romeo 3. ➡️ 第三部分：红牛 4. 第四部分：Williams 5. 第五部分：Aston Martin 6. 第六部分：Ferrari 7. 第七部分：Haas 8. 第八部分：McLaren 9. Bonus: Google I/O 10. …更多内容即将发布…

评论内容总结：

1. 关于网站速度与用户体验的讨论

   • 评论1（cjbarber）认为，F1的核心是速度，因此网站也应体现这一特点，并建议将速度作为衡量标准应用于各个方面，如票务、食品供应商等。
     • 引用1: "F1 is largely about speed. So of course your website should be about speed!"
     • 引用2: "This could then apply to everything: ticket turnstiles that measure themselves on time per guest scanned, food vendors that do the same thing, websites that measure and rank on speed."

2. 关于图像格式的讨论

   • 评论2（GaggiX）批评了WebP格式不支持子采样的问题，并提到AVIF作为替代方案。
     • 引用1: "This is something that I truly hate about WebP, thankfully AVIF exists and it's supported by all major browsers."
   • 评论5（firefoxd）分享了一个关于图像格式的小游戏，旨在帮助前端团队更好地理解不同格式的适用场景，并提到WebP和SVG容易被滥用。
     • 引用1: "Devs often argue that the format is 'sharper'."
     • 引用2: "I talk about those last, because they can easily abused: i.e an SVG with an embedded png."

3. 关于反馈的后续影响

   • 评论3（hhmc）质疑是否有网站采纳了四年前的反馈。
     • 引用1: "Given this is 4 years old; did any sites take on the feedback?"

4. 关于当前状态的展示

   • 评论4（defly）提供了一个链接，展示了当前的状态。
     • 引用1: "Visualization of current state: https://lightest.app/c/Rm995qYNIL"

5. 关于F1赛事的期待

   • 评论6（goshx）在观看比利时冲刺赛时发现了这篇文章，并期待2025年的版本。
     • 引用1: "Watching the Belgium Sprint Qualifying right now and found this post here. Now I need to see the 2025 version!"