从 amazon s3 和 cloudFront 加载图像缓慢答案

【问题标题】：Slow loading of images from amazon s3 and cloudFront从 amazon s3 和 cloudFront 加载图像缓慢
【发布时间】：2018-06-13 15:57:35
【问题描述】：

我正在使用 amazon s3 服务来托管图像。我的网站上有很多图片。我还使用 CloudFront Distributions 作为 CDN。图片网址很好。

但与其他一些顶级和竞争对手网站相比，我的图片加载速度仍然很慢。

有什么方法可以更快地加载图片？

谢谢

【问题讨论】：

你在哪里？你的桶在哪里？您是否使用浏览器中的网络控制台来准确测量时间？您是否通过不同的网络和不同的浏览器尝试过？随时编辑您的问题，以提供有关您如何测量速度的更多详细信息。
您能否提供指向相关网站的链接？您是否在 CloudFront 分配上启用了 http/2？

【解决方案1】：

图像可能还有许多其他问题：

您可以使用Lighthouse 工具来测试您的网站上列出的所有问题。

此外，可能值得考虑为 pixboost.com 之类的图像使用专门的 CDN。

【讨论】：

【解决方案2】：

使用像 Cloudfront 这样的 CDN 是加速图像的第一步。它解决了全球分销的挑战（您的网站托管在欧洲，但您有来自澳大利亚的访问者 => 图像将从 Cloudfront 在澳大利亚的节点加载，并且显然比从欧洲旅行要快）。此外，它还有助于吸收流量高峰，例如在销售、圣诞节、...

要进一步使用图像加速，您需要处理图像本身并专注于两件事：

将图像大小调整为目标尺寸（缩略图、预览、全尺寸，...），并为不同的屏幕尺寸提供不同的尺寸。
使用图像压缩算法来“缩小”您的图像。您可以使用 JPEG 压缩或 WebP、JPEG 2000、JPEG XR 等替代图像格式……这些格式通常执行（缩小）更好的 JPEG，但是它们有一个很大的限制：它们仅受特定浏览器支持。查看 caniuse.com 以获取浏览器支持信息：https://caniuse.com/#feat=webp

归根结底，您最终将需要 15-20 个版本的同一图像才能在所有浏览器、设备屏幕尺寸、用例等方面获得最大优化...

有多种方法可以自动执行此操作，例如使用ImageMagick。这是一个很棒的库，但它需要编码和维护，因为它非常动态地发展。

另一种选择是使用基于云的图像加速和交付服务。这些服务通常将图像调整大小和 CDN 交付捆绑在一起，并且在与多家 CDN 供应商谈判大合同时，可能会为您提供更好的 CDN 定价。

我们使用https://cloudimage.io，但还有其他很棒的工具。 Google 是你最好的朋友 :)。

祝你的页面加速好运，更快的图像肯定会产生很大的影响。

【讨论】：