Профилактика сайта или как я уменьшил вес картинок

Каждый год требования поисковых систем растут, приходится «подтягивать животы» и держать сайт в форме. На сегодня используется большое количество факторов ранжирования сайта в поисковых системах, он некоторых я писал – перенос сайта с HTTP на HTTPS, грамотная перелинковка внутренних страниц, подбор ключевых слов в статье, адаптивная или мобильная версия сайта, скорость загрузки страниц и тд.

Сегодня поговорим о последнем, а точнее об одном из факторов скорости загрузки сайта. Наверное, многие вебмастера и просто владельцы сайтов сжимают картинки перед загрузкой на свой ресурс. Это разумно, ведь используя сжатие изображения можно уменьшить вес в среднем на 75%, то есть картинка весом 100 кб на выходе будет около 25 кб (соответственно 1мб~250кб). А теперь представьте, у вас на странице 5-10 фото общим весом 0,5-1 мб, та же страница с оптимизированным изображением будет иметь общий объем 125-250 кб, а значит и загружать картинки она будет в 4 раза быстрее, что несомненно является вкладом в оптимизацию скорости загрузки сайта. Особенно актуально для ускорения открытия страницы через мобильный интернет.

Суть я думаю уловили и скорее всего, не меньше половины пользователей так и поступаю. Я обычно после сжатия изображения, заливаю его на сайт через FTP, в этом случае не создаются дубликаты различных размеров под шаблон сайта. Однако, я обратил внимание, когда я загружаю обработанную картинку на сайт через форму написания статьи – «Добавить медиафайл» или «Установить изображение записи», то у меня создаются миниатюры под шаблон сайта с бОльшим весом, но с мЕньшим разрешением, что не нормально.

Сжатие изображений на сайте

Данные миниатюры отображаются в превью статьи в различных блоках шаблона с разными размерами. Пример ниже

Сжатие изображений на сайте

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

Сжатие изображений на сайте или Сжатие изображений на сайте

Одни разрешения выставлены в WordPress по умолчанию (в моем случае это 100×75, 150×150, 346×188) и создаются автоматически, другие может создавать шаблон темы (как у меня 130×90, 390×205, 392×272). Если ваш шаблон сам создает необходимые разрешения, то создание стандартных стоит отключить, для этого входим в административную панель вордпресс, открываем Настройки – Медиафайлы, выставляем во всех строках цифру 0, сохраняем.

Сжатие изображений на сайте

После этих манипуляций движок не будет генерировать миниатюры. Перед дальнейшими действиями рекомендую создать резервную копию сайта, на случай, если удалите нужные картинки. Теперь удаляем через FTP все неиспользуемые разрешения, в моем случае это 100×75, 150×150, 346×188. Если картинки не используются в различных превью или в форме рекомендуемых статей, то можно удалить все, кроме главного. Оставляем только нужные

Сжатие изображений на сайте

Скачиваем картинки по FTP, можно прям папкой, заливаем их на сайт tinypng.com для сжатия, пошаговая инструкция здесь, затем скачиваем уже оптимизированные изображения и заливаем обратно в туже папку на сервер, подтверждая замену файлов. Вот и все, таким образом я прогнал все изображения.

Перед началом данных процедур я зашел на хостинг и посмотрел использующийся объем моего домена, он составлял 163 Мб (это все файлы, ни только изображения), после окончания работ объем уменьшился до 132 Мб, то есть 31 Мб памяти было освобождено. Но главное ни это, а то, что страница прогружается чуточку быстрее, хоть и незаметно для глаз. Вся работа заняла у меня 3 часа.

Для того чтобы картинки на сайте грузились не сразу, а после загрузки основных компонентов ресурса, я использую плагин a3 Lazy Load, после установки не требует дополнительных настроек. Замерил скорость загрузки сайта через сервис гугла PageSpeed Insights до и после установки плагина, результат положительный, однако колоссальной разницы вы не увидите, ведь на скорость загрузки влияют многие факторы PHP, CSS, JavaScript и тд, и требуется комплексный подход.

Лучшее "Спасибо" - ваш репост

Подпишись на новые полезные статьи. Обещаю не спамить :)

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *