Медленная загрузка изображений из amazon s3 и cloudFront - PullRequest
0 голосов
/ 12 июня 2018

Я использую сервисы amazon s3 для размещения изображений.У меня есть много изображений на моем сайте.Я также использую CloudFront Distribution в качестве CDN.URL-адреса изображений в порядке.

Но мои изображения по-прежнему загружаются медленно по сравнению с другими топ-сайтами и сайтами конкурентов.

Есть ли способ загрузить изображения быстрее?

Спасибо

Ответы [ 2 ]

0 голосов
/ 13 июня 2018

Использование CDN, такого как Cloudfront, - первый шаг к ускорению изображений.Он решает проблемы, связанные с глобальным распространением (ваш веб-сайт размещен в Европе, но у вас есть посетители из Австралии => изображения будут загружаться с узла Cloudfront в Австралии и, очевидно, будут быстрее, чем путешествие из Европы).Кроме того, он помогает поглощать пики трафика, например, во время распродаж, Рождества, ...

Чтобы продолжить ускорение изображения , вам нужно поработать над самими изображениями и сосредоточиться на двух вещах.:

  1. изменить размер изображения до целевого размера (миниатюра, предварительный просмотр, полный размер, ...) и иметь разные размеры для разных размеров экрана.

  2. Используйте алгоритмы сжатия изображений, чтобы «сжать» ваши изображения.Вы можете использовать сжатие JPEG или альтернативные форматы изображений, такие как WebP, JPEG 2000, JPEG XR, ... Эти форматы обычно лучше (сжимают) JPEG, но имеют большое ограничение: они поддерживаются только определенным браузером.Обратитесь к caniuse.com за информацией о поддержке браузера: https://caniuse.com/#feat=webp

В итоге вам понадобится 15-20 версий одного и того же изображения , чтобы получить максимальную оптимизацию для всехбраузеры, размеры экрана устройства, варианты использования, ...

Есть несколько способов автоматизировать это, например, с помощью ImageMagick .Это отличная библиотека, но она требует кодирования и сопровождения, так как развивается довольно динамично.

Другой вариант - использовать облачную службу ускорения и доставки изображений.Эти сервисы обычно объединяют в себе изменение размера образов и доставку CDN и, вероятно, дают вам лучшие цены на CDN, поскольку они заключают крупные контракты с несколькими поставщиками CDN.

Мы используем https://cloudimage.io,, но есть и другие замечательные инструменты.Google - ваш лучший друг:).

Удачи в ускорении вашей страницы, быстрые изображения определенно окажут большое влияние.

0 голосов
/ 13 июня 2018

Могут быть и другие проблемы с изображениями:

  • Загрузка слишком большого количества изображений на странице.Убедитесь, что у вас отложенная загрузка изображений, которые не видны при первоначальном рендеринге.
  • Использование изображений неправильного размера.Это можно исправить, изменив размер изображения до правильного размера.Также не стоит забывать и об отзывчивых изображениях.Вы можете прочитать больше о них здесь
  • Используя форматы следующего поколения.Например, посмотрите на использование WEBP для браузера Chrome и JPEG2000 для Safari.

Вы можете использовать инструмент Lighthouse , чтобы протестировать вашсайт по всем перечисленным выше проблемам.

Также, возможно, стоит подумать об использовании специализированных CDN для таких изображений, как pixboost.com .

...