Изображения: 3 совета для ускорения загрузки сайта

Karina | 23.07.2016

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

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

1. Слишком большой вес файлов

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

В Сети встречаются сайты, на которых размещены изображения весом от 2 до 5 Мбайт — такое часто попадается на блогах и страницах с контентом. Подобный вес картинок является чересчур большим для веб. Загрузка «тяжелых» графических файлов на сайт (без очень уважительной причины) считается ошибкой, которая приводит к падению скорости загрузки страницы.

Если изображение весит больше чем 500 Кбайт, его обязательно необходимо сжать. Прежде чем приступать к загрузке картинок на сайт, последуйте этим советам:

Перед тем как загрузить любое изображение, дважды проверьте вес файла (кликните правой кнопкой мыши на изображение и выберите «Свойства»).
Следите за тем, чтобы вес файла был не более 500 Кбайт (и, в идеале, ниже 100 Кбайт, если это возможно).
Существует масса удобных онлайн-сервисов, с помощью которых можно быстро уменьшить вес изображения с минимальными потерями качества. Среди них Compressor.io, CompressJPG и TinyPNG.
Если вы пользуетесь Adobe Photoshop для подготовки изображений, следите за разрешением и убедитесь, что значение DPI установлено на 72 точки на дюйм (Изображение > Размер изображения). При сохранении не забудьте выбрать пункт «Сохранить для Web и устройств», чтобы проконтролировать конечный размер выводимого файла.
Конвертируйте изображения в правильный формат. В большинстве случаев используется формат JPG. Однако, если в вашей картинке предусмотрена прозрачность, (например, изображение с прозрачным фоном), вам понадобится формат PNG. Иногда хорошо использовать GIF, но если у вас есть сомнения по поводу выбора формата, используйте JPG.

Конкретный пример: На фирменном сайте одного из эксклюзивных обувных брендов используется много больших по весу баннеров и фотографий изделий. Как следствие, это привело к снижению оценки скорости загрузки до 20 баллов из 100 согласно сервису Google PageSpeed. После того, как были приняты меры по уменьшению веса картинок, показатель PageSpeed повысился до 58 баллов.

2. Автоматическое масштабирование картинок

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

Например, большой баннер-картинка, размещенный на одной из страниц, также может быть использован в качестве миниатюры в другом месте на сайте. Разработчик, вместо того чтобы сделать несколько версий изображения (например, 1000×425 пикселей для баннера и 64×64 для сайдбара), использует код для автоматического масштабирования того же полноразмерного баннера для отображения в виде небольшого эскиза. Из-за этого большое изображение загружается в сайдбаре без необходимости. Это сокращает время разработки, но негативно влияет на скорость загрузки сайта (особенно если учесть, что таких масштабированных миниатюр в сайдбаре намного больше, чем одна). Не говоря уже о том, что при масштабировании картинки могут искажаться. Так, если картинка масштабируется с 1000×425 до 64×64 пикселей, она, конечно же, будет выглядеть сплюснуто.

Обращайте внимание, когда одно и то же изображение используется на сайте несколько раз. Если вам нужно 12 вариантов размеров одной картинки для различных разделов на сайте (что-то вроде 25×25, 45×45, 250×250, 670×670, 50×50, 64×64, 90×90, 150×160, 110×110, 175×175 и 185×185), то вы, вероятно, можете захотеть сэкономить время на масштабировании, ограничившись всего несколькими размерами. Этого лучше не делать. Для оптимизации загрузки страниц гораздо лучше создать отдельные изображения под каждый необходимый размер. Поверьте, ваш труд окупится.

Сравнение веса картинки при разных размерах

3. Отсутствие кэширования изображений

Даже если вы честно следуете двум предыдущим правилам, страница, которая перегружена картинками, все еще может недостаточно быстро загружаться. Поскольку изображения — это статический контент, отличным способом улучшить скорость загрузки сайта является кэширование (CDN).

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

CDN (сеть доставки контента) представляет собой сеть серверов, которая передает кэшированное содержимое (например, изображения) с веб-сайтов пользователю, основываясь на его географическом местоположении. Например, если вы находитесь в Нью-Йорке и просматриваете индийский веб-сайт, вы можете загрузить изображения с сервера, расположенного в Нью-Йорке, вместо того чтобы качать их с другого конца света.

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

Кроме того, CDN помогает обслуживать большее количество посетителей одновременно. Если ваш сайт привлек внезапный всплеск трафика, CDN поможет ресурсу поддерживать продуктивную работу.

Average Rating: