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应用程序，能够在此处查看源代码。