Как сжатие изображений влияет на время загрузки вашего сайта
Привет, друзья!
Сегодня я хочу поговорить о том, как сжатие изображений влияет на время загрузки вашего сайта. Про сжатие мало кто вообще думает и как выясняется зря!
Изображения часто могут повысить качество вашего веб-сайта и они являются ключом к реализации визуальной маркетинговой стратегии. Тем не менее, чем больше медиафайлов на вашем сайте, тем больше происходит влияния на время загрузки. Если ваш сайт загружается слишком долго, неважно, как он выглядит потрясающе — это отпугнет посетителей.
Ответ: нужно использовать сжатие и оптимизацию изображений, так они станут меньше без потери качества. В этой статье я расскажу больше о сжатии изображений, о том, как оно может помочь вам и используем данные, чтобы продемонстрировать, насколько сильно оно может повлиять на время загрузки. Давайте приступим к этому!
Что такое сжатие изображения (и как оно может помочь вам)
Сжатие изображений — отличный способ оптимизировать время загрузки вашего сайта.
В двух словах, сжатие изображений включает в себя уменьшение размера файла, поэтому они занимают меньше места и есть два метода: «с потерями» и «без потерь». Первый из них значительно оптимизирует ваши изображения, потенциально снижая качество изображения, а второй сжимает ваши файлы, насколько это возможно, не влияя на то, как они выглядят.
Как правило, вы хотите пойти на оптимизацию без потерь. Однако разница с методами «с потерями» не обязательно очевидна невооруженным глазом. Давайте рассмотрим пример с исходным изображением слева и оптимизированной версией справа:
Вы должны быть в состоянии обнаружить некоторые различия, если приблизить достаточно близко. Однако, поскольку я не показываю ни одно из изображений в полном разрешении, различия трудно разглядеть. Учитывая ограниченность пространства, которую имеют многие веб-сайты, нет причин загружать высококачественное изображение по 5 Мб, когда сжатая версия 500 КБ может быть столь же подходящей.
В любом случае, главное преимущество оптимизации изображения легко понять. Чем меньше места занимает ваша графика, тем легче будут ваши страницы. Это означает, что пользователи смогут загружать ваш сайт быстрее, что должно иметь прямое влияние на его удобство использования и «липкость». Имея это в виду, давайте выясним, насколько сильно сжатие изображений влияет на производительность среднего веб-сайта.
Как сжатие изображений влияет на время загрузки Вашего сайта (в цифрах)
Два разных веб-сайта не будут иметь одинаковое время загрузки, так как все они уникальны. Короче говоря, цель этого теста — определить (в среднем), насколько оптимизация изображения влияет на время загрузки. С этой целью я создал веб-сайт с тремя отдельными страницами, построенный с использованием Premium темы. На первой странице представлен макет портфолио домашней страницы, который я настроил для включения десяти изображений:
Ни одно из этих изображений не оптимизировано и в общей сложности страница весит 1,7 МБ. У нас нет никаких плагинов, активных на этом тестовом сайте, чтобы избежать каких-либо элементов, которые могут повлиять на наши результаты. После настройки я проверил, как долго эта страница загружалась с помощью Pingdom Tools San Jose, California server:
Позже, я покажe вам результаты нашего теста в цифрах. На данный момент мы собираемся создать одну дополнительную тестовую страницу, поэтому у нас есть больше данных для резервного копирования наших результатов. Для нашей второй записи мы выбрали макет блога Masonry, так как он предлагает нам возможность красиво продемонстрировать несколько показанных изображений (в данном случае семь):
Эта страница весила 1,3 МБ, показывая тот же набор неоптимизированных изображений, что и наш предыдущий пример — просто используя другую компоновку:
Теперь мы создадим копии обеих страниц и заменим их изображения оптимизированными версиями. С этой целью мы будем использовать два разных плагина оптимизации изображений по отдельности – Compress JPEG and PNG Images и WP Smush. Оба плагина были в нашем предыдущем сравнении плагинов для оптимизации изображений, поэтому они должны дать нам четкое представление о том, чего ожидать. Вот результаты с обеих страниц, используя каждый плагин отдельно:
| Начальный размер страницы | Оптимизированный размер страницы | Начальное время загрузки | Compress JPEG and PNG Images Results | WP Smush Results | |
|---|---|---|---|---|---|
| Главная Портфолио | 1.3MB | 1MB (-23.07%) | 2.84 sec. | 2.15 sec. (-24.29%) | 2.45 sec. (-13.73%) |
| Блог Masonry | 1.7MB | 1.3MB (-23.52%) | 1.69 sec. | 1.49 se. (-11.83%) | 1.52 sec. (-10.05%) |
Здесь много информации, так что давайте поговорим о том, что означают эти цифры.
О чем говорят нам результаты
По нашим результатам, оптимизация изображений оказывает существенное влияние на время загрузки сайта. Чтобы быть более конкретным, наши тесты обнаружили, что в среднем вы можете ожидать улучшения по крайней мере на 10% от времени загрузки, если вы оптимизируете каждое изображение на своем сайте.
Некоторые из вас могут подумать, что 10% недостаточно, чтобы оправдать хлопоты сжатия каждого изображения на вашем сайте. Тем не менее, есть много способов автоматизировать процесс в WordPress. Если вы этого не сделаете, вы, по сути, говорите «нет», чтобы улучшить производительность.
Что еще более важно, оптимизация изображения является лишь одним из многих настроек, которые вы должны реализовать на своем сайте, чтобы улучшить время загрузки. Например, кэширование, сжатие GZIP, использование хорошо оптимизированной темы и многие другие аспекты могут быть приняты во внимание. Если вы реализуете их все, ваш сайт должен быть невероятно быстрым!
Наконец, стоит отметить, что 10% находится в нижней части наших результатов оценки. Ваши выгоды будут зависеть от того, сколько изображений ваши страницы включают в среднем и какие инструменты сжатия вы используете. По всей вероятности, ваше время загрузки, вероятно, улучшится. Однако вы не узнаете, пока не попробуете это для себя.
Вывод
Оптимизация изображений — это один из многих способов сократить время загрузки вашего сайта. Тем не менее, часто трудно представить, насколько это может повлиять на общую производительность. В любом случае, WordPress предлагает множество инструментов, которые вы можете использовать для оптимизации ваших изображений. Вы даже можете автоматизировать процесс, если хотите, поэтому нет причин избегать его.
Во время нашего тестирования, мы обнаружили, что сжатие изображения улучшило время загрузки около 10% в большинстве случаев. Однако это в нижней части нашей шкалы. Во время тестирования мы увидели еще лучшие результаты, вплоть до увеличения производительности на 24.29%. Ваши собственные результаты будут во многом зависеть от того, сколько изображений ваши страницы включают в среднем и инструменты оптимизации, которые вы используете.
У вас есть какие-либо вопросы о том, какой плагин оптимизации изображений вы должны использовать для WordPress? Давайте поговорим о них в разделе комментариев ниже!
Открою вам свой небольшой секрет: я не пользуюсь плагинами для сжатия изображений в своих статьях, так как я сторонник версии «чем меньше плагинов — тем лучше». Для сжатия я пользуюсь сервисом iloveimg. Так что все изображения, которые вы видите на моем сайте, пожаты этим сервисом. В общем: рекомендую!
На этом все — буду заканчивать. До скорых встреч!