Сегодня мы поделимся с вами историей о том, как дружная командная работа, системность и упорный труд позволили нам ощутимо ускорить сайт Заказчика.
Ускорение работы сайта сейчас актуально как никогда. Согласно исследованиям, 40% пользователей попросту не дожидаются загрузки сайта, если она занимает больше 3 секунд. А если и дожидаются, возникает раздражение, негатив, который переносится на компанию в целом. Кроме того, быстродействие важно с точки зрения поискового продвижения. Поэтому владельцы книжного магазина booknets.ru попросили нас ускорить загрузку их веб-ресурса. Рассказываем, как мы выполнили этот заказ.
Провели аудит
В первую очередь мы досконально изучили текущую ситуацию. Она действительно оказалась плачевной. Особенно сайт тормозил на мобильных устройствах — оценка скорости загрузки сервисом Google PageSpeed Insights составляла всего 50 из 100. Для книжного бутика, претендующего на элитарность, это было недопустимо. Поэтому мы с энтузиазмом принялись за работу.
В процессе аудита мы использовали два сервиса:
1) Google PageSpeed Insights — это классика, инструмент, предоставленный крупнейшим поисковиком мира. В зависимости от скорости загрузки сайта он относит его к красной, оранжевой или зеленой зоне.
Большинство разделов веб-ресурса Заказчика оказались в красной или оранжевой зоне, что означает «плохо» и «посредственно».
2) GTMetrix — это уже сугубо профессиональный, менее известный инструмент. У нас подключен платный тариф, подразумевающий расширенный функционал — более подробные отчеты, запись видео с загрузкой и т. д. Оценки скорости загрузки booknets.ru здесь пестрили красным и оранжевым не меньше.
Вообще, мы рекомендуем всегда использовать два инструмента для повышения точности оценки. Они компенсируют недостатки друг друга, позволяют более адекватно оценить ситуацию. Однобокость подхода и фанатичная преданность одному единственному сервису — удел дилетантов.
Внесли изменения
Далее мы опишем конкретные действия, которые мы предприняли для ускорения booknets.ru. Итак, поехали!
Использовали современные форматы изображений
Согласно исследованиям, 28% объема веб-страниц занимают изображения. Поэтому мы всегда уделяем этому вопросу особое внимание. В JPG хорошо сохранять полноцветные изображения, а в PNG схематичные простые рисунки. О возможности использования более современного WebP также не стоит забывать. На сайте Заказчика эти принципы было проигнорированы, что мы и исправили.
Устранили ресурсы, блокирующие отображение
Мы обнаружили ненужные ресурсы CSS и JavaScript. Получалось так, что они задерживали загрузку изображений. Браузер не отображал страницу до тех пор, пока не обрабатывался ненужный код. Следует отметить, что это весьма распространенная проблема. Мы выполняем эту задачу каждый раз, когда нужно повысить быстродействие.
Задали явным образом атрибуты width и height
Некоторые изображения на сайте Заказчика «прыгали», меняя свое расположение в процессе загрузки веб-ресурса. Это было связано с тем, что системе нужно вычислить параметры места, необходимого для отображения изображения. Именно поэтому следует использовать атрибуты width и height — они позволяют избежать этого. На самом деле, этому уделяют внимание не все. Но мы ярые сторонники максимальной веб-производительности и считаем этом важным. Ведь «прыгающие» картинки и корректирующееся в процессе загрузки форматирование неприемлемы с точки зрения юзабилити.
Настроили показ всего текста во время загрузки веб-шрифтов
Многие пользователи ознакомляются с контентом очень бегло. Важно, чтобы тексты показывались посетителю сразу. А на сайте Заказчика часть текстов не показывалась до тех пор, пока не загружались непосредственно шрифты.
Уменьшили влияние стороннего кода
Сторонний код это то, что не имеет отношения непосредственно к структуре сайта. Сюда входят кнопки социальных сетей, переходы, трекеры, реклама, аналитика и т. д. Как выяснилось при аудите, разработчики достаточно легкомысленно отнеслись к этому вопросу.
Вообще, такая проблема нередко возникает, когда администратор самостоятельно пытается сделать веб-ресурс эффективнее и добавляет необходимые коды, не умея это делать правильно.
Задали правила эффективного использования кеша для статических объектов
Мы тщательно настроили файл .htaccess, чтобы статичные элементы сохранялись в кеш на устройстве пользователя. Таким образом часть данных сайта при последующих посещениях уже будет не скачиваться с нашего сервиса, а загрузится непосредственно с устройства. Разумеется, это обеспечивает дополнительное ускорение.
Предотвратили чрезмерную нагрузку на сеть
Для этого мы провели сложный комплекс работ, включающий в себя глубокую оптимизацию изображений, стилей, скриптов. Следует отметить, что фактор чрезмерной нагрузки на сеть сохраняет свое значение даже в эпоху суперскоростного и повсеместно распространенного интернета. По крайней мере, поисковики по-прежнему его учитывают.
Уменьшили нагрузку на основной поток
Основной поток подразумевает загрузку и отображение страницы, а также взаимодействие с пользователем. Это значит, что пока страница не загрузится, пользователь не сможет с ней полноценно взаимодействовать. Для того, чтобы снизить нагрузку на основной поток, мы также оптимизировали CSS и JavaScript. Именно они обычно являются основными потребителями, создающими нагрузку. Без их оптимизации ощутимое ускорение часто невозможно.
Уделили внимание ряду других работ
Мы настроили эффективную кодировку изображений, обеспечив ускорение их обработки. А еще стали использовать пассивные прослушиватели событий для улучшения производительности при прокрутке — это обеспечило ускорение взаимодействия пользователя с сайтом посредством мыши.
Техническая оптимизация загрузки была произведена. Теперь пришло время оценить, к какому результату привели наши действия.
Добились ускорения
Почти в 2 раза ускорилась загрузка главной страницы на мобильных устройствах. Было 50 по шкале Google PageSpeed Insights. Стало 94:
Более чем в 2 раза ускорилась загрузка страницы «Каталог» на мобильных устройствах (было 44, стало 92):
Та же страница стала гораздо быстрее и на ПК (100 вместо 74):
Также ощутимого рывка вперед удалось добиться с загрузкой карточек конкретных товаров на мобильных устройствах. Как мы уже писали, это было слабое место сайта Заказчика. Вот какие показатели были у страницы до нашей оптимизации, согласно сервису GTmetrix:
Скорость загрузки первого экрана: 4.9 сек, полное время загрузки: 10.7 сек. То есть, совсем медленно:
А такими показатели стали после проведенных нами работ:
Cкорость выведения первого экрана сократилось до 515 мс, а полное время загрузки до 7.6 сек. Показатель же Total Blocking Time (время между отрисовкой первых элементов до возможности взаимодействия с сайтом) сократился в 81 раз, до мизерной 1 мс!
Результаты работы: сайт выведен в зеленую зону Google, показатели большинства страниц превысили отметку в 90. Сервис GTmetrix также показывает ускорение работы по всем разделам. В целом, теперь веб-ресурс Заказчика загружается почти в 2 раза быстрее. Исходя из статистических данных, благодаря этому сайт будет покидать до 40% меньше потенциальных клиентов. Вероятность попадания страниц в ТОП поисковых систем ощутимо возросла, поскольку сайт стал гораздо удобнее для пользователя.
Ускорение загрузки веб-ресурса — задача, которая не терпит отлагательств. У вас могут быть самые качественные товары, великолепный рекламный дизайн, виртуозный копирайтинг, но... Все это потеряет смысл, если сайт банально тормозит. Пользователь всего этого не оценит, поскольку просто перейдет на веб-ресурсы более проворных конкурентов.
Мы многократно в этом убеждались, занимаясь сайтостроением на протяжении 9 лет. А еще наше твердое убеждение заключается в том, что увеличением скорости загрузки следует озаботиться еще на стадии создания веб-ресурса.
Проявите дальновидность и прагматизм, ускоряйтесь онлайн! Мы же с радостью вам в этом поможем, разработав изначально быстродейственный сайт.
Комментарии