Улучшение скорости загрузки сайта. Часть 1. Изображения

Скорость загрузки сайта напрямую влияет на поведенческие факторы ваших пользователей - они не любят долго ждать. На основе аналитики поисковых сервисов, при ожидании более 4 секунд только половина потенциальных посетителей останется на Вашем сайте, более 8 секунд - только четверть. Более того поисковые системы учитывают скорость загрузки сайта при распределении мест в топе. Выходит, что чем быстрее загрузится Ваш сайт тем больше пользователей зайдет на сайт и тем больше пользователей совершат на нем целевое действие - оставят заявку, купят товар, воспользуются вашей услугой. Таким образом скорость загрузки сайта напрямую влияет на его конверсию.

Стоит отметить, что есть очень хороший сервис от компании Google, который позволяет оценить скорость загрузки Вашего сайта для компьютеров и мобильных устройств и дать Вам различные подсказки, Lighthouse. Вы можете воспользоваться Lighthouse онлайн через Page Speed Insights или через браузер Google Chrome в инспекторе во вкладке Audits. Если Вы когда-нибудь пробовали оценить свой сайт через этот сервис, то вероятно могли заметить, что изображения оказывают один из самых больших эффектов на скорость загрузки сайта. Довертись этому сервису!

Многие разработчики игнорируют важность и необходимость улучшения скорости загрузки сайта, бросают эту идею в черный ящик и никогда больше его не открывают. Потому что нет никакой уверенности, что их усилия принесут какой-нибудь результат. Сегодня я расскажу Вам о некоторых вещах по улучшению производительности, которые любой (разработчик) может реализовать прямо сейчас!

Итак, что же является первым и самым главным пунктом? Это изображения. Размер изображений может иметь наибольшее влияние на скорость загрузки вашего сайта. На некоторых сайтах изображения могут занимать до несколько мегабайт если их должным образом не оптимизировать для веб страницы! Даже если вы видите, что изображения весят по 200-300 килобайт, попытайтесь их оптимизировать. Только представьте, эти картинки можно вполне уменьшить до 50 килобайт или даже меньше!

Первое, когда Вы сохраняете изображение из Photoshop (если Вы используете его) выберите сохранить для Web. Не сохраняйте изображения вслепую, а всегда обращайте внимание на его размер. При выборе качества не оставляйте всегда 100%, вы можете выбрать от 60 до 80 процентов, разницы в качестве не будет сильно заметно, зато будет заметна разница в размере изображения. Как показывает практика в большинстве случаях вполне хватает 60%, а иногда изображения могут быть настолько большими, что и при выборе даже 10% Вы получите довольно качественную картинку. Здесь Вам нужно будет поэкспериментировать. Далее Вы можете использовать различные сервисы для дальнейшей оптимизации картинок, которые могут еще больше сократить их размер.

Второе, не всегда формат, в котором сохранено изображение, является оптимальным с точки зрения его размера. Есть два популярных формата изображений — это JPG и PNG. Как узнать какой формат лучше использовать для той или иной картинки? Одно из основных преимуществ PNG — это поддержка прозрачности. Но этому есть своя цена - сжатое PNG изображение по сравнению со сжатым JPG будет весить намного больше. В это сложно поверить, но оптимизированное изображение JPG может весить до 10 раз меньше аналогичного изображения в формате PNG! И, соответственно, из этого следует простое правило: если изображение не нуждается в поддержке прозрачности лучше использовать JPG (по крайней мере для WEB). Но GIF, JPG и PNG не являются единственными форматами изображений, которые вы можете использовать на веб страницах.

Существует еще один формат изображений - WebP. WebP — это современный формат изображений, который обеспечивает превосходное сжатие для изображений в Интернете. Изображения в формате WebP весят намного меньше аналогичных изображений в форматах PNG и JPG без потери качества. Почему бы не использовать WebP для каждой картинки в интернете спросите Вы? Проблема в том, что WebP, являясь современным форматом изображений, к сожалению, не поддерживается некоторыми, даже самыми современными браузерами (в основном браузерами от компании Apple). И поэтому, когда пользователь заходит на Ваш сайт, ему нужно показывать изображения в том формате, в котором поддерживает его браузер. Примерно 70% ваших пользователей смогут увидеть изображения в современном формате, соответственно в этом есть смысл. Вы можете определить поддержку WebP браузером, используя JavaScript библиотеку Modernizr.

Также имеет смысл уменьшать размер/качество изображений на определенных страницах вашего сайта, там, где не требуется высокого качества изображений. Представим интернет-магазин и изображение товара (одно из многих). Только представьте сколько вариантов этого изображения Вам нужно хранить:

1. Миниатюру на странице показа всех товаров и в списке изображений одного товара на странице этого товара в довольно низком качестве

2. Основное изображение в довольно хорошем качестве

3. Изображение в оригинальном качестве в том случае если на странице товара есть функция увеличения изображения

Эти изображения желательно хранить в двух форматах, если Вы хотите, чтобы больше половины Ваших пользователей могли получить изображение в формате WebP. Получается, что одно изображение будет хранится в 6 вариантах. А теперь представьте, что для пользователей мобильных телефонов размер изображений должен быть максимально низким, чтобы поддерживать хорошую скорость загрузки изображений и на мобильных телефонах тоже.

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

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

Вот неполный список таких сервисов:

· Imgix

· ImageBoss

· LibPixel

Далее не все изображения, которые у Вас есть на странице нужно загружать сразу, потому что это не очень хорошо влияет на скорость загрузки страницы. Подумайте, пока не загрузятся все изображения, даже те, которые находятся в самом низу страницы, и которые пользователь может никогда и не увидеть, сайт не будет полностью загружен. Поэтому, лучше загружать только те изображения, которые находятся в области видимости экрана на момент загрузки страницы, а остальные не загружать вовсе или подставлять вместо них плейсхолдеры – изображения очень низкого качества (10-20 пикселей в ширину) с эффектом размытия. И потом, загружать изображения по мере необходимости, когда они будут находиться в области видимости. Такой подход называется «ленивая загрузка» (lazy loading). Раньше, определение видимости элемента было довольно сложной задачей и решения были ненадежными, но сегодня вы можете использовать Intersection Observer API у JavaScript’а. На его основе уже есть готовые реализации ленивой загрузки изображений, такие как Lozad. Комбинация только оптимизации изображений и их ленивой загрузки может дать Вашему сайту существенный прирост в скорости загрузки.