共计 2810 个字符，预计需要花费 8 分钟才能阅读完成。
Web 已成为以后世界上最重要且应用最宽泛的通信平台之一。但这一令人难以置信的技术的一个毛病是，作为开发者，咱们无法控制咱们的用户拜访咱们网站的设施的硬件规格。终端用户可能在高端或低端设施上拜访你的网站，而这些设施的网络连接有好有坏。这意味着，你必须确保你的网站尽可能地优化，以便可能满足任何用户的要求。
Web 优化能够在网站的不同组件上以多种不同形式实现。我最近写了一篇文章，介绍应用 JavaScript 进行代码优化的一些技巧。你能够在这里阅读文章。
本文将次要关注针对图像和视频等媒体内容的 Web 优化。
家喻户晓，多媒体内容能够进步用户对你的内容的参与度，但它也能够让你的网站进行页面 SEO 优化。依据 Kimbe MacMaster 的说法，如果你在网站上应用视频，你呈现在谷歌搜寻后果首页的可能性会减少 53 倍。
目前的施行有什么问题？
当初的图片和视频都很棒，它们的品质很高，而且流传得很好。但目前媒体内容的一个次要问题是大小，据 Jecelyn 统计，均匀一个网页仅图片就会耗费 5MB 的数据。这可能给用户带来沉重负担，因为在某些国家 / 地区，尤其是在挪动数据上，这可能会十分低廉。用户还将遇到站点加载工夫的问题，尤其是连贯速度较慢的问题，这可能会对你的网站产生负面影响。
传统上，应用的图像格式为 JPEG，PNG 和 GIF，对于视频，应用了 MP4，AVI 和 WMV 等格局，然而这些格局还不够好。须要一些更好的货色，一些有效载荷较小但又不影响内容品质的货色。
当我加入在斯里兰卡科伦坡举办的 2019 Angular 会议时，我第一次理解 WebP。斯里兰卡是一个了不起的国家，你毕生中应该至多参观一次。令人难以置信的会议是由 Jecelyn Yeen 实现的。
译者注：本文不仅仅是讲 WebP。Jecelyn Yeen 是马来西亚人，GDE，高性能疾速且 SEO 敌对的 SPA 网站 http://ng-my.org 创始人
WebP 的图片
WebP 是一种古代图像格式，它以较低的有效载荷大小提供有损和无损的压缩格局。这种图像格式目前由科技巨头 Google 开发。WebP 最近取得了很大的发展势头，特地是在大型科技公司的推动下，这次要是因为 WebP 的性能和 Google 的反对。WebP 与有损图像格式（例如 JPG）和无损格局（例如 PNG）间接竞争。
长处
- 与 PNG 相比，WebP 无损图像的尺寸要小 26%。
- 在等效的 SSIM 品质指数下，WebP 有损图像比同类 JPEG 图像小 25–34%。
- 无损 WebP 也反对图像透明性。
毛病
WebP 不能改良 Internet 的惟一起因是兼容性。
- 到目前为止，Safari 浏览器尚未反对。然而，有音讯表明，在不久的未来行将对 Safari 提供 WebP 反对。
- 默认状况下，内容治理站点（CMS）以后不反对 WebP。然而你能够装置插件或扩大来开始。
浏览器兼容性
向后兼容
为 WebP 图像提供向后兼容性很容易，只需 5 行代码。
<picture>
<source type="image/webp" srcset="img/awesomeImage.webp">
<source type="image/jpeg" srcset="img/awesomeImage.jpg">
<img src="img/awesomeImage.jpg">
</picture>下面的代码段确保即便是最旧的浏览器也能够显示其反对的图像，这是一篇对于 WebP 的精彩文章。
WebM 的视频
WebM 是一种免版权的视频文件格式，用于 Google 保护的 HTML5 视频标签。WebM 最后在 2010 年 Google I/ O 大会上发表，其 H.264 编解码器打算代替现有的 MP4 格局。
依据 Google 的说法，“WebM 定义了文件容器构造、视频和音频格式，文件由应用 VP8 或 VP9 视频编解码器压缩的视频流和应用 Vorbis 或 Opus 音频编解码器压缩的音频流组成。”
家喻户晓，WebM 可为有效载荷较小的视频文件提供杰出的品质，这使得它非常适合视频流。事实上，Youtube 视频在各大浏览器中都是以 WebM 的模式提供的。
长处
- 许可——这种视频格式的次要劣势之一是它是免版权的。诸如 MP4（H.264）之类的格局存在各种许可问题，然而 WebM 凭借其开源许可使事件变得简略。
- 品质——对于 VP8，VP9 与 H.264，H.265 的品质有几种意见。但他们中的大多数人都批准，品质在某种程度上是平等的。
- 大小——因为技术的作用是压缩文件，使得 WebM 的整体大小比 MP4 小得多，WebM 视频的访问量更大，文件能够疾速从网上下载。
毛病
- 与其兄弟类似，WebM 的次要毛病是浏览器兼容性。到目前为止，Safari 和 IE 尚未齐全反对 WebM。
- 较少的媒体播放器反对 WebM 视频或须要装置组件或插件。
- WebM 视频无奈在大多数便携式设施上播放。但这正在扭转。
浏览器兼容性
向后兼容
与 WebP 类似，能够通过以下代码段实现向不兼容 WebM 的浏览器的向后兼容性。
<video width="640" height="480" controls>
<source src="movie.webm" type="video/webm">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
您的浏览器不反对视频标签。</video>你的浏览器将抉择它反对的第一个起源。
进一步改良
目前，咱们曾经意识到应用 WebP 和 WebM 等媒体格式的益处。然而，当你开始施行它们时，以不同的格局保护同一文件的多个正本可能会十分麻烦。
例如，如果上传 PNG 或 JPG，并且要在反对的浏览器上应用 WebP，则必须在服务器上存储雷同文件的正本。这可能是一个累赘，因为它须要采取额定的步骤来转换上传的文件，并在保留反复文件时占用存储空间。
你能够利用诸如 Cloudinary 和 Gumlet 之类的 SaaS 应用程序的性能来解决此问题，这些服务使你可能动静地动静转换文件。你要做的就是上传原始格局的图像 / 视频，并在申请图像 / 视频时，在文件 URL 中增加一个属性以即时接管优化版本。此外，这些服务会主动缓存这些文件，这意味着从某个区域拜访后，如果其余任何人想要拜访雷同格局的雷同文件，则将交付缓存中的文件。这使事件变得更快。
译者注：国内能够应用又拍云之类的
这次要要归功于内置的 CDN，以确保你的内容能以最快的速度在多个地区传递。
如果你不想花几块钱在这些服务上，你能够在 Firebase 的帮忙下制作本人版本的应用程序。只管它不是完全免费的，但对于较小的网站，您能够应用收费配额。
总结
得益于大量有才华的开发者，网站曾经变得更加吸引人，设计也令人惊叹。但要想精益求精，必须有正确的优化策略。这对于网站的胜利至关重要。
译者注：你能够领有最丑陋的网站，然而如果用户不称心，那将是一次失败。人类很难讨好！
这是我创立的 demo 应用程序，能够在此处查看源代码。
