如何优化 Web 性能和底线

耐心不是网站访问者和在线购物者的美德。 在您的网站上保留或失去访问者时，每一分之一秒都很重要。

根据 Kissmetrics 的说法，加载时间是导致页面放弃的主要因素。 因为一般的网络访问者对加载时间过长的页面没有耐心，所以放弃率随着加载时间的每一秒而增加。 该博客指出，近 40% 的用户会在 10 秒后放弃一个页面。 移动互联网用户可能对这个问题感到最沮丧——73% 的人表示他们遇到了一个加载速度太慢的网站。

页面加载问题直接影响网站访问者的购物行为。 Kissmetrics 还指出，对网站性能不满意的购物者中有 79% 不太可能再次从同一网站购买。 近一半的消费者希望页面在 2 秒或更短的时间内加载，而 1 秒的延迟将使客户满意度降低 16%。

这些延误的后果转化为真金白银。 电子商务巨头亚马逊透露，仅 1 秒的页面加载放缓将使其销售收入损失 16 亿美元。 同样，谷歌指出，其搜索结果仅下降十分之四秒就会导致每天损失 800 万次搜索，这意味着在线广告减少了数百万次。

触及问题的核心

影响加载时间的最大因素是图像、视频和图形。 今天的网站包含更多的视觉效果和更少的文字来吸引访问者。 根据 HTTP Archive 的数据，一个网站近 64% 的平均权重是图片，而视频则占另外 8%。

由于这些类型的媒体占网站大小的近四分之三，因此更有效地管理网站上的图像和视频以提高性能和转化率非常重要。 让我们看看您可以采取哪些措施来减少图像和视频对您网站性能的影响。

使用更高效的现代图像格式

谷歌已经在 Chrome 浏览器中增加了对其 WebP 图像格式的支持，微软也在其大多数 Internet Explorer 和 Edge 浏览器中为 JPEG-XR 做了同样的事情。 但是许多开发人员仍然没有接受这些变化，坚持使用相同的 JPG 和 PNG 格式，而不是利用现代格式如何优化他们的网站。

理想情况下，您应该在适当的时候将图像转换为 WebP 和 JPEG-XR，并调整压缩质量以平衡两种格式。 检测访问每个图像的特定浏览器并为相应浏览器提供优化的图像版本也很重要。 这样做将使您能够确保用户在视觉质量和文件大小优化方面获得尽可能好的图像，而不会降低您的网站速度。

消除浪费的浏览器端调整大小

开发人员经常使用浏览器端图像大小调整作为快捷方式，而不是在服务器端调整图像大小。 虽然最终结果在现代浏览器上看起来完全一样，但对带宽的影响却大不相同。 通过浏览器端调整大小，网站访问者会浪费宝贵的时间下载不必要的大图像，并且浪费带宽将其传送给他们。

对于较旧的浏览器，问题更加明显，因为它们的大小调整算法通常低于标准。 您需要确保您的图像完全符合其所需的网站尺寸。 为同一图像创建不同的缩略图而不是提供大图像并依靠浏览器调整大小是非常值得的。 有一些可用的工具可以帮助解决这个问题，例如像 ImageMagick 这样的开源图像调整器或像 Cloudinary 这样的基于云的解决方案。

使用正确的图像文件类型

JPEG、PNG 和 GIF 是当今网站上最常用的文件格式，但每一种都有非常不同的作用。 使用错误的格式会浪费访问者的时间和自己的金钱。 一个常见的错误是使用 PNG 来传递照片。 有一个普遍的误解，即 PNG 作为无损格式，会为照片产生尽可能高的复制效果。

虽然这通常是正确的，但这也是一种非常不必要的优化。 重要的是要记住应该为显示的内容使用什么图像格式。 PNG 应该用于计算机生成的图像（图表、徽标等）或当您需要图像透明时（图像叠加）； 显示拍摄的照片时为 JPEG； 和需要动画时的 GIF（Ajax 加载动画等）。

不要在所有交付媒体中使用单一图像尺寸

您的网站正在许多不同的设备上查看，尤其是智能手机、平板电脑和智能手表已成为消费者的首选。 开发人员通常会在所有设备分辨率上提供相同的图像，并使用客户端调整图像大小。 这些图像可能看起来很棒，但访问者会浪费时间将不必要的大图像加载到他们的设备上，并且您需要为多余的带宽使用付费。

这对 3G 用户和漫游用户特别不公平，他们需要支付大量额外费用来下载无用的超高分辨率图像。 为避免这些问题，您应该使用他们的用户代理识别访问者的移动设备和解决方案。 使用正确的分辨率，从您的服务器中检索最合适的图像。 这要求您为每个原始图像提供一组缩略图。 有一些优秀的 Javascript 包可以自动执行这个过程。

利用响应式设计

访问者用来访问您网站的每台设备都有不同的分辨率。 网站的标记必须适应自身，使其在所有不同的设备上以及在各种分辨率、像素密度和移动设备方向上看起来都很完美。 管理、操作和交付图像是 Web 开发人员面临的响应式设计的主要挑战之一。

由于这些挑战，许多网站都使用可能需要的最高分辨率图像构建，并根据断点简单地缩小客户端。 此过程效率低下并且会损害性能。 但也有一些选项，例如开源工具 Responsive Breakpoints，它可以帮助您生成所需的所有图像大小，以及适当的 HTML 代码。

利用内容交付网络 (CDN)

CDNS 通常在全球范围内战略性地部署服务器，以缩短内容往返时间。 CDN 允许更快地向用户提供图像并降低崩溃的可能性，增强 SEO 性能并改善用户体验。 在选择 CDN 时，您需要考虑其全球覆盖水平、缓存率、在边缘运行逻辑操作的能力、平均响应时间和其他指标，例如平均失效时间。

变化的影响

通过采用这些最佳实践，您可以真正改变用户体验，鼓励访问者停留更长时间、浏览更多、参与和购买。 考虑这些公司的结果：

Apartment List 是一种帮助个人搜索出租房屋的在线资源，它发现自己处理各种不同的图像格式和分辨率，因为它从其网站上的各个公寓社区获取图像数据馈送。 通过将所有这些图像转换为在各种尺寸的移动设备和台式机上呈现的最佳图像，以及利用响应式设计技术，该公司的转化率提高了近 20%。

KartRocket 是一个基于 SaaS 的电子商务平台，提供透明且完整的电子商务生态系统，可帮助中小企业快速轻松地创建在线商店，需要找到一种方法来确保图像质量，同时不影响其加载时间或网站性能客户。 它利用工具来动态控制图像，以便针对小缩略图、大横幅图像和主要产品图像进行优化。 这种方法使 KartRocket 的图像加载响应时间提高了 100 倍。

底线

当时间就是金钱时，网站所有者不能不采取所有必要措施来改善访问者的体验。 就消费者而言，即使是加载页面的几分之一秒延迟也可能转化为收入和信心的损失。

考虑到图像和视频是大多数网站上最大的带宽占用者，您需要认真检查您的网页设计和图像格式，然后采取必要措施确保媒体得到优化，以便您的网站 - 更不用说您的收入和客户的看法——不要因此而受苦。