Самый тяжелый контент на сайте — это изображения (графика в дизайне и картинки/фотографии в материалах) и видео. И, если, большинство видео грузится только при нажатии кнопки Play, то картинки у большинства посетителей загружаются сразу же вместе с открываемой страницей. Хотя у большей части ваших посетителей нет проблем со скоростью интернета, но точно есть какая-то часть потенциальных клиентов, посещающая ваш сайт через медленные соединения (мобильные сети, например). Для того, что бы эти пользователи чувствовали себя комфортно на вашем сайте, нужно постараться уменьшить как общий вес страниц сайта, так и вес изображений.
Проверить, как долго грузится страница вашего сайта и какой объем имеют отдельные её элементы можно с помощью специальных онлайн сервисов. Найти их можно, задав в поисковой системе запрос вида: «проверить скорость загрузки онлайн». Сегодня мы будем рассматривать сайт с помощью сервиса Pingdom Website Speed Test:
Вводим в поле адрес проверяемой страницы, жмем кнопку «Test now», ждем несколько секунд, выбираем «Sort by file size» (самые «тяжелые» элементы страницы отобразятся вверху списка) и смотрим результаты:
Общий вес страницы — 930.5kB — почти мегабайт — многовато. Смотрим, какие же элементы проверяемой страницы весят больше всего. Как видно из скриншота выше, это скрипт вывода Яндекс карты и несколько картинок. Отображение карты — схемы проезда у нас выводится на всех страницах сайта — это повод задуматься — а нужна ли карта на каждой странице? Может, достаточно схемы проезда на странице контактов, а на всех остальных страницах оставить только текстовый адрес? Но этот пост об изображениях, поэтому переходим к ним.
Возвращаясь к последнему скриншоту, видим после скрипта карт по объему лидируют три картинки, их оптимизацией мы и займемся. Для оптимизации размера изображений можно использовать графический редактор или онлайн сервис. Здесь мы рассмотрим второй вариант.
Уменьшение объема (веса) изображения с помощью онлайн сервисов
Онлайн сервисов, позволяющих уменьшить объем изображений без заметной потери качества существует много. Найти их можно, в любом поисковике вбив запрос «оптимизация изображений онлайн». Для оптимизации изображений в PNG формате я использую сервис TtinyPNG (есть как в виде онлайн сервиса, так и в виде плагина для Photosop), загружаем туда файл audit.png и получаем следующий результат:
Файл стал меньше на 76% или 88kB! Но что же с качеством? Смотрим:
Файл до оптимизации (586*400 px, 113 kB):
Файл после оптимизации (586*400 px, 27 kB):
.png)
Как видим, на взгляд разницы не заметно, зато файл уменьшился в несколько раз.
Аналогичную операцию проделываем с другими громоздкими файлами с нашего сайта, отключаем отображение карты в подвале сайта на всех страницах, и запускаем заново тест скорости загрузки:
Как видим, проделав простые операции, описанные выше, мы сократили общий вес страницы более, чем в два раза, и увеличили скорость загрузки почти в два раза. На всё про всё было потрачено довольно мало времени, а для пользователей вашего сайта, использующих медленный интернет, ваш сайт стал в два раза быстрее! А улучшение удобства использования сайта повлечет за собой рост звонков/заказов/покупок.
Хороших вам конверсий!
Понравилась статься? Подпишитесь на обновления:
Оставить комментарий