Ускорение мобильного сайта

Сайт открывается на телефоне, но вместо страницы клиент видит пустой экран и крутящийся кружок. Пять секунд, десять, пятнадцать. Человек закрывает вкладку и уходит к конкуренту. Звучит знакомо? Проблема не в самом сайте и не в телефоне клиента. Проблема в том, что страница слишком тяжёлая для мобильного интернета и слабого процессора смартфона.

Яндекс давно учитывает скорость загрузки при ранжировании мобильных страниц. Медленный сайт теряет позиции, даже если тексты написаны идеально, а ссылки куплены по всем правилам. Разберёмся, что именно тормозит мобильную версию и что можно сделать без бюджета на масштабную переделку.

Оптимизация скорости на мобильных

Мобильный телефон — это не компьютер. У него меньше оперативной памяти, слабее процессор и медленнее соединение с интернетом, даже если горят все деления LTE. То, что на компьютере загружается за секунду, на телефоне может тянуться пять-семь секунд. Для Яндекса это критично: если страница грузится дольше трёх секунд, она уже проигрывает конкурентам.

Что именно тормозит мобильную страницу? Обычно это четыре вещи:

• Крупные изображения. Фотографии товаров или работ загружаются в полном разрешении, хотя на экране телефона они отображаются размером с почтовую марку.
• Тяжёлые скрипты. Счётчики, виджеты обратного звонка, чаты, слайдеры — каждый из них подтягивает дополнительный код, который телефон должен обработать.
• Шрифты. Неоптимизированные шрифты могут весить больше, чем весь текст на странице.
• Блокирующие ресурсы. Если браузер ждёт загрузки одного скрипта, прежде чем показать содержимое, пользователь видит пустой экран.

Практический шаг: откройте свой сайт на телефоне, включите режим полёта, затем верните интернет и наблюдайте, как появляется страница. Если первые две-три секунды вы видите белый или пустой экран — есть проблема с блокирующими ресурсами. Браузер не может начать показывать контент, потому что ждёт загрузки чего-то, что ему мешает.

Что можно сделать прямо сейчас без программиста: проверьте, сколько сторонних виджетов висит на сайте. Каждый чат, каждый счётчик, каждый попап — это дополнительная нагрузка. Оставьте только необходимое. Остальное временно отключите и замерьте скорость. Часто после такого простого шага страница ускоряется на 30–40%.

Ленивая загрузка изображений

Представьте страницу каталога с двадцатью товарами. Пользователь видит только первые три-четыре карточки, но браузер по умолчанию начинает скачивать картинки всех двадцати. Это пустая трата трафика и времени.

Ленивая загрузка (lazy loading) решает эту проблему просто: изображения загружаются только тогда, когда пользователь прокручивает страницу к ним. Не долистал — не скачалось. Это особенно важно для мобильных, где каждый мегабайт на вес золота.

Как это работает на практике. Человек открывает категорию товаров. Загружаются картинки только видимой части экрана. Начинает прокручивать вниз — подгружаются следующие изображения. Если клиент ушёл с страницы, не досмотрев до конца, оставшиеся картинки вообще не были загружены. Экономия и времени, и трафика.

Большинство современных сайтов на популярных движках уже поддерживают ленивую загрузку из коробки или через простые настройки. Если ваш сайт на WordPress, Bitrix или другой распространённой CMS, проверьте настройки — скорее всего, достаточно включить один переключатель.

Типичная ошибка — включить ленивую загрузку для логотипа и главной картинки в шапке сайта. Эти элементы видны сразу, их нужно загружать в первую очередь. Если и они будут «ленивыми», пользователь увидит пустую шапку, что создаёт впечатление сломанного сайта.

AMP страницы и их актуальность

AMP (Accelerated Mobile Pages) — это технология, которую Google продвигал несколько лет назад как решение проблемы медленных мобильных сайтов. Идея была красивой: создавать специальную облегчённую версию страницы по строгим правилам, и она будет мгновенно открываться.

Но реальность оказалась сложнее. AMP накладывал серьёзные ограничения: нельзя было использовать свои скрипты, формы обратной связи работали с ограничениями, дизайн получался урезанным и одинаковым у всех. По сути, вы создавали не свою страницу, а её обрезанную копию по чужим правилам.

Сейчас актуальность AMP для российского бизнеса минимальна. Яндекс никогда активно не поддерживал эту технологию в том виде, в котором она реализована у Google. Если вам предлагают «сделать AMP для быстрой загрузки в Яндексе» — это либо непонимание рынка, либо попытка продать услугу, которая не даст результата.

Гораздо эффективнее потратить те же ресурсы на оптимизацию основной мобильной версии сайта. Обычная страница, правильно оптимизированная по весу и коду, будет загружаться почти так же быстро, как AMP, но без ограничений на функциональность и дизайн.

Единственный случай, когда AMP имеет смысл — это медиа-сайты с огромным трафиком из Google. Для бизнеса услуг, локальных компаний и интернет-магазинов, работающих с российским рынком, эта технология не нужна.

Как уменьшить вес мобильной страницы

Вес страницы — это суммарный размер всех файлов, которые браузер должен скачать, чтобы показать сайт: HTML-код, стили, скрипты, изображения, шрифты. Для мобильной версии оптимальный вес — до 500–700 килобайт. Если ваша страница весит два-три мегабайта, это много для телефона.

Начните с изображений — обычно они составляют 60–80% общего веса страницы. Вот конкретные шаги:

• Формат. Переведите фотографии из JPEG и PNG в формат WebP. Он показывает картинку такого же качества, но весит на 25–40% меньше. Почти все современные браузеры его поддерживают.
• Размеры. Если на мобильной версии картинка отображается шириной 300 пикселей, нет смысла загружать файл шириной 1200 пикселей. Настройте автоматическое создание уменьшенных копий для мобильной версии.
• Сжатие. Даже в JPEG можно настроить степень сжатия. Для мобильных версий допустимо немного снизить качество ради уменьшения веса — на маленьком экране разницу заметит только профессиональный фотограф.

Следующий шаг — шрифты. Красивые нестандартные шрифты могут весить 100–200 килобайт каждый. Если на сайте используется два-три таких шрифта, это уже половина допустимого веса страницы. Решения два: оставить один нестандартный шрифт для заголовков, а остальной текст сделать системным, либо использовать подмножество шрифта — подключать только те символы, которые реально используются на сайте, без кириллицы, если она не нужна.

Ещё один скрытый источник веса — CSS и JavaScript файлы. За годы работы сайта они обрастают лишним кодом: отключённые плагины оставляют свои стили, старые функции не удаляются, а просто перестают вызываться. Минификация (удаление пробелов, переносов строк и комментариев из кода) обычно уменьшает вес файлов на 15–20%. Это не решит проблему кардинально, но как часть комплексной работы — полезный шаг.

Практический совет: откройте панель разработчика в браузере (на компьютере это F12), перейдите на вкладку Network и загрузите страницу в режиме мобильного эмулятора. Вы увидите список всех файлов с их весом. Отсортируйте по размеру — и сразу станет понятно, кто главный «тяжеловес». Часто оказывается, что какая-то одна картинка весит больше, чем весь остальной сайт вместе взятый.

Ускорение мобильного сайта — это не разовая акция, а процесс. Начать стоит с аудита: понять текущий вес страниц, найти самые тяжёлые элементы и оценить, что можно оптимизировать быстро, а что требует вмешательства программиста. Даже при небольшом бюджете правильная настройка изображений и отключение лишних виджетов дают заметный результат.