5 шагов к ускорению вашего веб-сайта, наполненного изображениями

5 шагов к ускорению вашего веб-сайта, наполненного изображениями

Ссылка на оригинал статьи https://codeburst.io/5-steps-to-speed-up-your-image-heavy-website-65c874a86966

Изображения являются ключевыми компонентами любого веб-сайта. Согласно сайту HTTP Archive изображения занимаются более, чем 60% данных, загружаемых вместе с веб-страницами. Являясь критически важным компонентом для почти что всех веб-сайтов, будь то интернет-магазины, новостные сайты, сайты модных брендов, блоги или порталы для путешественников, оптимизация изображения важна, и возможно, что это является наиболее доступным способом ускорить загрузку вашего веб-сайта.

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

Итак, давайте начнем и посмотрим на некоторые простые техники, которые вы можете реализовать прямо сейчас для достижения значительного прогресса в оптимизации вашего веб-сайта.

1. Изменяйте размеры ваших изображений

Это то, что должно быть (must have). Измените размеры изображений до таких значений, которые требуются для вашего сайта. И нет, я не говорю сейчас об изменении размеров с использованием CSS или HTML. Я говорю об изменении изображения на сервере и затем отправки его браузеру.

Например, у вас есть изображение с размерами 4000х3000 пикселей для вашего товара, который вы хотите разместить в вашем интернет-магазине. На вашем сайте вам необходимо отобразить гораздо меньшее по размеру изображение этого товара. Это может быть 200х300 пикселей на странице списка товаров и 800х1000 пикселей на странице конкретного товара. Убедитесь, что вы уменьшили оригинальное изображение до этих размеров, прежде чем отправлять их браузеру. Измененные изображения являются гораздо меньшими по размеру, чем оригинальное изображение, и поэтому будут загружаться гораздо быстрее оригинального.

По моему мнению, некорректное изменение размеров изображений является не паханным полем для оптимизации большинства веб-сайтов. И часто мы, разработчики, не обращаем на это должного внимания. Представьте себе следующий сценарий: вы начинаете использовать великолепно оптимизированное изображение для вашего нового веб-сайта. Через несколько месяцев вы меняете разметку вашего сайта и, таким образом, требования к размерам изображений. Однако, вместо того, чтобы создавать новые изображения для новых требований к размерам, что само по себе может занять много времени, вы следуете похожей альтернативе. Например, вы используете изображение с размерами 300х200 пикселей, когда изображение с размерами 200х200 пикселей будет также применимо. Я предполагаю, что такое может случиться с каждым веб-разработчиком.

На примере выше показано, что разница может быть небольшой для одного изображения в Килобайтах. Но все же это целых 21%. Это небольшое различие,но если его экстраполировать на множество изображений, оно имеет потенциал ускорения загрузки вашего веб-сайта и уменьшения потребления трафика на 21%.

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

Существует множество open source реализаций и реализаций на стороне сервера, которые вы можете использовать по своему усмотрению. ImageKit это один из сторонних сервисов, который в отличие от всех других, предоставляет услугу изменения размеров изображения в реальном времени на основе URL. И вы можете использовать его для всех ваших изображений всего-лишь после короткой установки (буквально за пару минут).

2. Оптимизируйте ваши изображения

Следующим шагом в ускорении вашего сайта будет выбор правильного формата и качества для каждого изображения на вашем сайте.

JPG, PNG и GIF являются форматами изображений, которые используются в настоящее время на веб-сайтах и каждый предназначен для различных вариантов использования. Есть также другой сравнительно новый формат изображений, называемый WebP, который объединяет в себе все лучшее, что есть в других форматах. Изображения в этом формате меньше по размеру на 30% и он поддерживается почти 75% современных браузеров.

Данное сравнение показывает важность выбора правильного формата для ваших изображений. Хотя эти изображения выглядят одинаковыми, они очень сильно различаются по размерам.

Поскольку это дает огромные преимущества в производительности, вам следует отправлять браузеру изображения в формате WebP всегда, когда это возможно. На других браузерах (которые не поддерживают WebP), вы можете продолжать доставку изображений в оригинальном формате.

Качество изображения, говоря по-простому, это мера того, как изображения выглядят визуально. Существует прямая зависимость между качеством изображения и его размером. Более высокое качество отражается в виде большего размера изображения и в результате приводит к замедлению сайта.

Различные методы сжатия изображений дают преимущество за счет эксплуатации физических ограничений человеческого глаза в распознавании мельчайших изменений, например, в цвете. Считается, что «стандартное» качество на уровне 80-90 (при максимальном значении 100) является хорошим компромиссом между размером изображения и его качеством.

Сравнение одного и того же изображения с различными уровнями качества. Эти изображения почти идентичны визуально, но они имеют различные размеры.

Сравнение одного и того же изображения с различными уровнями качества. Эти изображения почти идентичны визуально, но они имеют различные размеры.

Простым путем для применения оптимизации формата и качества является использование ImageKit для доставки ваших изображений. Он автоматически конвертирует изображение в WebP, когда это возможно, и также оптимизирует качество изображения в режиме реального времени.

3. Создавайте мобильную версию сайта

В сегодняшнем мире, если вы серьезно настроены на запуск собственного веб-сайта, игнорирование мобильных браузеров является грехом. Данные говорят о том, что почти 60% глобального трафика приходится на мобильные устройства. И да, пока мобильные телефоны становятся все более мощными и мобильные сети более качественными, данные также говорят о том, что скорости передачи данных в мобильных сетях все еще очень низкие по сравнению с широкополосным доступом. Существуют страны и территории, где передача данных по мобильным сетям до сих пор нестабильна. Так что, важно проявлять повышенное внимание, когда вы разрабатываете версии сайта для мобильных пользователей.

Если у вас отзывчивый сайт для ПК и мобильных устройств, вы можете переключаться между версиями вашего сайта, используя отзывчивые изображения. Используя теги для отзывчивых изображений, например, тег img с атрибутами «srcset» и «sizes», вы можете предоставить браузеру список вариантов для единичного изображения и определение соответствующих размеров изображения на различных экранах. Браузер затем выбирает лучший размер изображений для загрузки на конкретном устройстве из доступного списка, основываясь на размерах экрана устройства и той разметке, которую вы указываете.

Атрибут «sizes» дает информацию о разметке изображения, «srcset» атрибут дает список изображений с актуальной шириной, указанной напротив каждого URL.

Другим фактором, который является значимым для мобильных устройств является отношение сторон пикселя устройства (Device Pixel Ratio) или значение DPR. Современные мобильные телефоны имеют экраны с высоким разрешением, при котором большее количество пикселей упаковано на один дюйм.

Image Source: Specctr

Изображение, которое выглядит хорошо на обычных устройствах, может выглядеть достаточно смазанным на экранах с высоким разрешением. Решением данной проблемы будет загрузка изображения с двукратным увеличением размеров на экраны с DPR 2, с трехкратным увеличением размеров на экраны с DPR 3 и изображений с обычными размерами на другие устройства. Это также может быть применено с использованием отзывчивого тега изображения как показано ниже.

Современная спецификация по названием Client Hints делает простым запуск отзывчивых изображений и создание кода, который выглядит более чистым по сравнению с использованием атрибутов «srcset» и «sizes». То, как работает Client Hints это сама по себе огромная тема для изучения, которая выходит на рамки данного поста и описывается более детально здесь.

ImageKit предоставляет вам параметры DPR на основе URL вместе с параметрами изменения размера и обрезки изображения, и также поддерживает Client Hints, что делает более легким использование отзывчивых изображений и доставку изображений устройствам.

4. Загружайте меньше ресурсов

Даже после того, как вы оптимизировали все ваши изображения, загрузка большого количества таких изображения приведет к замедлению вашего сайта и негативно повлияет на отношение пользователей к вашему сайту. Я не выступаю за то, чтобы мы всегда использовали меньшие по размеру изображения. Но есть случаи, когда мы можем избежать использования изображений или избежать их загрузки.

Например, вместо того, чтобы загружать изображения, вы можете создавать кнопки, градиенты и другие продвинутые элементы, используя CSS.

Другой более важной техникой, которую вы можете использовать, является ленивая загрузка ваших изображений. Ленивая загрузка, в основном, означает, что вы откладываете загрузку изображений, которые не нужны на странице немедленно. Часто это бывает любое изображение, которое невидимо для пользователя на его экране, может быть загружено гораздо позже.

Сравните со случаем, когда у вас есть 100 товаров на вашей веб-странице. Если вы отправляете запрос на получение изображений всех 100 товаров одновременно в самом начале загрузки страницы, это приведет к значительному увеличению времени загрузки данной страницы. Изображения будут соревноваться за доступ к пропускной способности сети и ресурсам процессора вместе с другими критическими для производительности вещами, вроде CSS и JS.

С ленивой загрузкой, мы можем загружать, скажем, 30 изображений, которые будут видимы пользователю с самого начала. Затем, когда пользователь начинает прокручивать страницу ниже, мы будем загружать больше изображений. Это поможет нам улучшить время начальной загрузки страницы и восприятие пользователем страницы. В случае же, если пользователь не прокручивает страницу до конца, то некоторые изображения вообще не загружаются. Таким образом, вы также может снизить нагрузку на сеть при доставке изображений.

Начать использовать ленивую загрузку очень просто с такими библиотеками, как jQuery Lazy. Вы также можете использовать IntersectionObserver API, который является гораздо более производительным, нежели JS-библиотеки, доступные для ленивой загрузки.

5. Используйте хороший CDN для доставки изображений

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

Сети доставки контента (Content Delivery Networks или CDNs) являются набором глобально распределенных кеширующих/прокси серверов.

Скажем, сервер вашего сайта расположен в США. Сеть доставки контента кеширует ваши изображения в своей глобально распределенной сети серверов (все гораздо сложнее, на самом деле, но с целью упрощения данной схемы, давайте представим, что это так). Затем, если пользователь из Бразилии отправляет запрос на получение изображения с вашего сайта, то вместо того, чтобы передать пользовательскому браузеру это изображение с вашего сервера в США, CDN доставляет его из узла, ближе всего расположенного к данному пользователю из Бразилии. Это снижает время передачи запроса/ответа, необходимого для загрузки изображения. Некоторые из наиболее известных CDN описаны на этой странице в Википедии.

Когда вы выбираете CDN, убедитесь в том, что данный CDN поддерживает HTTP/2. HTTP/2 это новый протокол для доставки контента в вебе, который может помочь значительно уменьшить время доставки. Он использует техники вроде мультиплексирования, сжатия заголовков и серверные пуши (server pushes) для уменьшения времени загрузки страницы. HTTP/2 теперь поддерживается следующими CDN. Данная демонстрационная страница визуально объясняет разницу в производительности между HTTP/2 и более старым протоколом HTTP/1.1.

ImageKit предоставляет вам сервис CDN с доступным протоколом HTTP/2 в «одном флаконе». Без особых затрат, вы можете получить лучшую в своем классе систему доставки ваших изображений ( и даже других статических файлов) с использованием ImageKit.

Как я могу протестировать мой сайт на проблемы, связанные с изображениями?

Существует несколько инструментов, которые вы можете использовать для того, чтобы протестировать сайт на проблемы, связанные с изображениями. Одним из способом является использование этого анализатора веб-сайтов от ImageKit. Стоит вам только-лишь вбить URL этой страницы, как через несколько секунд вы получите предложения по изменению размеров изображений, лучшего форматирования, ленивой загрузке и использованию HTTP/2. Google также разработал open-source инструмент под названием Lighthouse. Этот инструмент интегрирован с последними версиями браузера Chrome и может производить анализ не только изображений на вашем сайте, но также других проблем, которые могут повлиять на производительность. Google PageSpeed insights также указывает вам, если вы используете на своем сайте неоптимизированные изображения, помимо других рекомендаций.

Заключение

Мы рассмотрели все основные техники, связанные с оптимизацией изображений и улучшением производительности веб-сайтов. Владея данной информацией, вы сможете решить 90% проблем, связанных с вашими изображениями, если не больше, которые помогут вам ускорить время загрузки страниц и улучшить ваши позиции в результатах поисковых запросов. Всегда помните, что изображения на вашем сайте должны загружаться легче, быстрее и быть меньше по размеру.

Добавить комментарий