Как оптимизировать изображения, чтобы ускорить работу вашего интернет-магазина
Опубликовано: 2019-07-04Людям нравятся быстрые сайты; поисковые системы любят быстрые сайты. Все в Интернете любят быстро загружаемые сайты.
Подумайте о том, как вы используете Интернет: если вы специально хотите что-то купить, ожидание даже 10 секунд загрузки страницы может быть безумно разочаровывающим.
Как владелец сайта электронной коммерции, как вы можете легко повысить скорость своего интернет-магазина?
Оптимизируя все ваши изображения для Интернета.
Почему это важно? С чего начать и что нужно делать? Ниже вы найдете ответы на все эти вопросы.
Почему скорость сайта имеет значение, когда речь идет о вашем интернет-магазине?
По данным Kissmetrics, 79% интернет-покупателей, у которых возникли проблемы с производительностью веб-сайта, говорят, что не вернутся на сайт, чтобы совершить покупку снова . Это большой процент.
Поисковые системы наказывают интернет-магазины за медленную загрузку, но, что более важно, пользователи тоже. Они уходят с сайта без покупки и никогда не возвращаются.
Если ваш сайт загружается не так быстро, как это возможно, вы можете терять продажи.
Насколько быстрым должен быть ваш сайт?
Как можно быстрее.
Это может показаться расплывчатым, но взгляните на эту статистику:
- 47% людей ожидают, что веб-страница загрузится за две секунды или меньше.
- 40% посетителей покинут страницу, загрузка которой занимает три секунды и более.
Нужно ли мне сказать больше?
Посетители веб-сайта не ждут целую вечность загрузки страницы, да и не должны этого делать.
Как узнать скорость своего сайта?
В Интернете есть несколько бесплатных инструментов, которые просканируют ваш сайт и дадут вам оценку скорости, а также пошаговую разбивку самых больших проблем и способов их решения.
- Page Speed Insights от Google позволяет узнать, как ваш сайт загружается как на компьютере, так и на мобильном устройстве.
- Pingdom Page Speed объясняет размер вашей страницы и время загрузки.
- GTMetrix включает полезные визуальные эффекты и уделяет первостепенное внимание проблемам скорости.
Так как же ускорить свой интернет-магазин?
Одно из лучших мест для начала — оптимизация изображений для Интернета.
Изображения занимают больше места, чем любая другая часть веб-сайта, особенно если речь идет об интернет-магазинах.
Это одни из самых «тяжелых» и сложных файлов для сервера, а их размер и качество могут как улучшить, так и снизить производительность вашей сети.
Это, в свою очередь, влияет на то, как долго люди остаются на вашем сайте и сколько из них конвертируются.
Более легкие изображения обеспечивают более быструю работу сайта, более довольных клиентов и увеличение продаж. Так с чего же начать?
Шаг 1. Сохраните изображение в правильном формате.
Двумя наиболее распространенными форматами изображений являются Portable Network Graphics (PNG) и Joint Photographic Experts Group (JPEG или JPG).
Какая разница?
Короче говоря, PNG имеют лучшее качество и допускают прозрачность, но их размер файла изображения больше. JPEG-файлы не так хороши в плане качества, но их размер файла изображения обычно намного меньше.
Кроме того, файлы PNG не содержат потерь, то есть вы можете редактировать и сохранять изображение десятки раз, и качество при этом не ухудшится. С другой стороны, JPEG-файлы содержат потери и ухудшают качество при каждом повторном сохранении.
Когда следует использовать каждый формат?
В большинстве случаев вам лучше всего подойдет формат JPEG, поскольку он является хорошим компромиссом между качеством изображения и размером файла.
Как правило, вот разбивка того, когда использовать каждый формат.
- Когда использовать PNG:
- Для изображений с прозрачным фоном
- Для изображений с непрозрачностью
- Для небольших изображений, таких как логотипы или значки
- Для изображений с текстом на них
- Для скриншотов или изображений, в которых не используется много разных цветов.
- Когда вы хотите сохранить качество детализированного изображения и размер файла не имеет значения
- Когда использовать JPEG:
- Для изображений с большим количеством разных цветов, таких как фотографии и реалистичные изображения.
- Для изображений и фонов продуктов
Шаг 2: Измените размер изображения
Когда вы загружаете изображение шириной 3000 пикселей на страницу своего продукта, вы заставляете браузер работать в два раза тяжелее.
Браузер должен сначала загрузить исходное изображение размером 3000 пикселей, а затем перезагрузить изображение, уменьшенное до размера области, в которую оно было загружено.
Например: если ширина содержимого вашего веб-сайта составляет 800 пикселей, браузеры ваших посетителей должны загрузить изображение размером 3000 пикселей плюс изображение размером 800 пикселей.
Умножьте этот процесс на количество изображений на одной веб-странице. Видите, как это может быстро превратиться в довольно чудовищную проблему?
Прежде чем загружать любое изображение на свой веб-сайт, сначала дважды проверьте размер, который вам нужен.
Например, на этом веб-сайте WooCommerce изображения продуктов отображаются с разрешением 460 x 460 пикселей.
Важно: размер файла изображения и размер изображения — это две разные вещи.
Размер изображения (460px x 460px) показан на скриншоте выше.
Размер файла изображения — это размер фактического файла (например, 92 461 КБ). Это объем места, необходимый для хранения изображения на вашем сервере. Чем больше размер файла, тем дольше загружается изображение.
Вы хотите убедиться, что большинство изображений на ваших веб-сайтах имеют размер не более 150 КБ, но предпочтительно менее 100 КБ — в зависимости от цели этого изображения.
Как узнать, какой размер изображения необходим?
Если вы используете Google Chrome, вы можете использовать инструмент Inspector, который поможет вам определить размер пространства для вашего изображения.
Перейдите на свой сайт и щелкните правой кнопкой мыши область, ширину которой вы хотите исследовать. Затем нажмите «проверить».
Внизу появится панель инструментов. Вы сможете сортировать HTML-разделы своего веб-сайта, наводить на них курсор и видеть ширину этого раздела.
Так, например, если вы хотите добавить изображение в свой пост в блоге, вам нужно знать максимальную ширину области вашего контента, чтобы вы могли загрузить изображение такого же размера или меньше.
Откройте инструмент инспектора, чтобы определить пространство для вашего изображения. В приведенном ниже примере размер области, которую будет занимать ваше изображение, составляет 1080 пикселей в ширину. Теперь вы знаете, что для того, чтобы веб-браузер не загружал два изображения разного размера (как упоминалось выше), вы должны изменить размер изображения до ширины 1080 пикселей или меньше .
Шаг 3: Сохраните изображение для Интернета
В большинстве программ для редактирования изображений есть опция «сохранить для Интернета», которая помогает настроить размер файла изображения.
Чтобы «Сохранить для Интернета» в Photoshop, выберите «Файл» > «Экспорт» > «Сохранить для Интернета» в строке меню в верхней части экрана.
Ваше программное обеспечение обычно позволяет переключать полосу качества изображения, чтобы найти золотую середину между размером файла и качеством изображения.
В Photoshop вы можете просматривать изображение на параллельном экране, где исходное изображение находится слева, а новое сохраненное изображение для предварительного просмотра — справа.
На скриншоте ниже я выделил панель переключения качества изображения. Вы захотите отрегулировать изображение до минимально возможного размера файла, следя за качеством изображения.
Стрелки на этом снимке экрана указывают на размер файла изображения. Обратите внимание, что чем ниже качество, тем меньше становится размер файла.
Имейте в виду, что вам также не нужны зернистые, пиксельные изображения. Вот почему важно просмотреть предварительный просмотр справа перед сохранением изображения.
Другие инструменты редактирования изображений, которые имеют эту опцию:
- Эскиз: https://www.sketch.com/
- Пиксель: https://pixlr.com/
Шаг 4: Запустите образ через компрессор
Компрессоры изображений очищают изображение от ненужной информации, такой как сведения о камере, метаданные, цветовые профили, встроенные эскизы и т. д.
Это уменьшит размер файла вашего изображения, не влияя на его качество.
Вы можете использовать плагин WordPress, такой как Smush Image Compression and Optimization или EWWW Image Optimizer, для массового сжатия или автоматического сжатия изображений при загрузке их на ваш веб-сайт.
Если у вас Mac, загрузите бесплатно ImageOptim — очень простое приложение с функцией перетаскивания . Вы также можете воспользоваться бесплатными онлайн-компрессорами изображений, такими как TinyPNG или Kraken.
У вас нет времени, чтобы выполнить все эти шаги?
Есть еще один вариант: использовать бесплатную сеть доставки контента Jetpack.
Jetpack поставляется с бесплатной сетью доставки контента (CDN) под названием Site Accelerator, которая автоматически изменяет размер, сжимает и предоставляет ваши изображения из высокоскоростных центров обработки данных, расположенных по всему миру.
Его легко настроить с помощью установки одним щелчком мыши, и он предоставляет дополнительные преимущества, такие как ускорение доставки ваших файлов CSS и Javascript.
Чтобы настроить это:
- Установите бесплатный плагин Jetpack, если вы его еще не используете.
- Перейдите в раздел Jetpack > Настройки > Производительность на панели инструментов.
- Прокрутите до раздела « Производительность и скорость » и установите флажок « Включить ускоритель сайта » .
Сделанный! Функции ускорения изображения применяются к существующим и новым изображениям, поэтому вы сразу же заметите увеличение скорости.
Вы также можете воспользоваться функцией отложенных изображений Jetpack. Lazy Images загружает для посетителей сайта только видимые на странице изображения, откладывая загрузку закадровых изображений до тех пор, пока пользователь не прокрутит страницу вниз. Это особенно полезно на мобильных устройствах, где важна пропускная способность. Активировать:
- Перейдите в Jetpack > Настройки > Производительность .
- Прокрутите до раздела « Производительность и скорость ».
- Включить ленивую загрузку изображений.
В заключение
Интернет-магазины должны уделять особое внимание размерам своих изображений, поскольку эти изображения имеют решающее значение для продажи их товаров.
Помните, что размер файла изображения должен быть как можно меньше без ущерба для качества. Это один из самых простых способов повысить скорость вашего магазина и помочь вам конвертировать больше трафика в продажи.