Лендинг одного из клиентов открывался за 4,1 секунды на мобильном интернете. После недели работы стало 1,3. Ниже — что именно дало результат, в порядке от самого весомого к второстепенному.
Изображения — первые в списке
На странице лежали двенадцать фотографий по 1,5–3 мегабайта, выгруженные прямо с фотоаппарата. Мы пересохранили их под реальные размеры отображения, перевели в современный формат и добавили отложенную загрузку всему, что ниже первого экрана. Вес страницы упал с 18 до 3,4 мегабайта — это дало примерно две трети всего ускорения.
- Ширина файла равна максимальной ширине блока на экране, а не 4000 пикселей.
- Каждому изображению прописаны width и height — иначе страница дёргается при загрузке.
- Первый экран грузится сразу, всё остальное — по мере прокрутки.
Шрифты
Было подключено четыре начертания двух семейств, из них реально использовались два. Лишние убрали, оставшиеся подключили с отображением запасного шрифта на время загрузки — текст стал появляться сразу, а не через полторы секунды пустоты.
Сторонние скрипты
| Что стояло | Решение |
|---|---|
| Виджет обратного звонка | Оставили, загрузка отложена до первой прокрутки |
| Онлайн-чат | Убрали: за три месяца ноль диалогов |
| Две системы аналитики | Оставили одну |
| Библиотека анимаций | Заменили на десять строк CSS |
Самый быстрый скрипт — тот, которого нет на странице. Прежде чем оптимизировать виджет, проверьте по статистике, пользуется ли им кто-нибудь.
Чего делать не стоит
Гнаться за сотней баллов в синтетическом тесте бессмысленно: разница между 92 и 98 не влияет ни на заявки, ни на позиции, а стоит дней работы. Ориентируйтесь на время до появления основного содержимого на реальном мобильном соединении — это единственная цифра, которую чувствует посетитель.
Порядок действий: сначала картинки, потом шрифты, потом чужие скрипты. В девяти случаях из десяти первого пункта достаточно, чтобы страница перестала тормозить.
Материал студии Veles, Самара. Вопросы по теме — на hello@veles-web.ru или по телефону +7 (846) 212-84-30.
