Если честно, у меня ofta бывало такое, что открываешь сайт на телефоне и вдруг понимаешь: грузится он как будто через стеклянную стену. Звонит в голову вопрос: «А зачем тогда вообще сайт?». Знакомо, да? Особенно когда по работе или силой привычки ты пытаешься что-то срочно найти — а он висит, зависает, глючит и тормозит. Тут уж не до кофе — хочется поскорее понять, почему мобильная версия ведет себя как старенький компьютер десятилетней давности.
Честно говоря, мобильная скорость — это не какой-то приятный бонус или нишевый показатель для тех, кто хочет выделиться. Нет, это просто необходимость. Большинство наших посетителей — это не сидящие за компьютером соседи-эмигранты, а люди, которые глядят на экран в метро, в очереди у врача или за рулем — ну или по крайней мере на ходу. И если сайт грузится долго, что происходит? Правильно — закрываешь вкладку и уже ищешь альтернативу, потому что «ковыряться» с тормозами просто не хочется.
Та и поисковики этого не любят. Они вообще не делают секрет из того, что скорость мобильного сайта — один из важнейших факторов ранжирования. Понятно, что Google на этапе «скриншот и анализ страницы» смотрит, что там за пушка и как она стреляет. Чем быстрее сайт, тем больше вероятности попасть в топ по запросам — у поисковиков есть эти критерии, пусть и не все сразу показывают, но так или иначе они знают, что пользователь предпочитает быстрое и удобное решение.
А ещё, если говорить откровенно, — чтобы конверсия не улетела куда подальше, сайт должен показывать содержимое быстро. Потраченные минуты, секунды или даже миллисекунды на загрузку — это реальные деньги. Не верите — посмотрите на статистику: у тех, кто умеет оптимизировать скорость — показатели по отказам снижаются, а прибыль растёт. Всё просто: когда сайт закрывает «тормозовские» дырки, посетитель не теряется на середине пути, а просто выполняет нужное действие: покупку, заявку, подписку.
Цели мои — познакомить вас с практическими штуками, которые реально работают. Бывают лайфхаки, что, кажется, их используют только в новичковых статьях, но я постараюсь сделать так, чтобы вы смогли применить их на практике. Быстро, просто и без лишнего вранья о волшебных тактиках, которых у вас и так полно в кармане. Главное тут — понять, где биты и шурупы, чтобы не деформировать сайт и не получить обратный эффект.
Итак, давайте посмотрим, что вообще влияет на мобильную скорость. Почему иногда сайт грузится так долго? Какие технические вещи можно сразу поправить, чтобы не тратиться на ненужные дублеры? Хотите узнать, как перестать быть рабом медленной загрузки сайта и сделать так, чтобы он работал как по маслу? Тогда погнали.
1
Почему иногда сайт грузится так медленно? Вот где обычно всё идёт не так
Давайте сразу по чесноку: большинство проблем с скоростью — это не мистический каламбур, а банальный набор ошибок, которые делают даже довольно «продвинутые» владельцы сайтов. В основном, это либо неумение правильно оптимизировать ресурсы, либо желание «ускорить» всё на чуть-чуть, но попутно разрушая работу движка.
Начинается всё с компрессии изображений. А там тоже есть нюансы — загоняешь фотки в Photoshop, сохраняешь их для веба, а по факту они остаются очень большими или, в противовес, слишком маленькими (и вот тут ты запрещаешь масштабирование браузеру). Или — грузишь фото, не оптимизированное по формату. Почему JPEG-ы ужасно большие? Потому что не все умеют получать правильный уровень компрессии. А как ты думаешь, почему у конкурентов сайт грузится быстрее? Скорее всего, у них все фотографии сжатые как следует и позволяют быстро открываться.
Дальше — кэш браузера. Всё вроде понимаешь, применяешь, но мало кто реально ставит правильные заголовки. В итоге при повторной загрузке пользователь снова скачивает всё с нуля — и это не только долго, но и по сути напрасно. А ведь никто не любит ждать, когда обновишь страницу, чтобы увидеть новые цены или статью.
И тут самое опасное — тяжёлые скрипты и стилевые файлы. Многие вставляют туда всё подряд: сторонние счетчики, соцсети, вот эти все плагины, которые грузятся по отдельной куче. А некоторые вообще не объединяют файлы и не минимизируют. В итоге — каждая мелочь тянет за собой очередную сотню-килобайт, а в итоговом разрезе получается, что в браузере ломится очередь из кода, который он ищет и втыкает по очереди. Вот тут и начинается «тормозилка», потому что у мобильных устройств — процессор слабее, память ограничена, и всё это превращается в то, что сайт по итогу открывается чуть быстрее, чем если бы кто-то вставил щит для накопления третьего слова.
Ну а еще — использование тяжелых шрифтов, которые по сути скачиваются полностью со своего CDN или сервера. И даже если шрифт красивый, он может тянуться по нескольку сотен кило, а на мобильном несколько раз. Многие не задумываются, что стоит подключить только нужные начертания — и сайт сразу станет легче.
И, конечно, всё дело в хостинге. Если сервер стоит где-то в далёкой деревне, и нагрузка по сравнению с внутренним дата-центром, который держит всё под рукой, — просто невелика. Моторчик работает медленно, даже если весь сайт в идеале. Времена, когда можно было храпеть на дешевом хостинге и надеяться на лучшее, прошли полным ходом.
То есть, чтобы избежать этого, нужно начать с базовых проверок и настроек. Сделай анализ через бесплатные сервисы, как Google PageSpeed Insights или GTmetrix. Обычно они показывают ясно — что тормозит. Например, ты увидишь, что у тебя изображение весит 2 МБ? Сразу бери и сжимай. Или там сторонние скрипты грузятся как грузовик — тогда отключай или откладывай их на потом.
Ну и не забудь про AMP — так называемый ускоренный мобильный. Вроде бы — хорошая фишка, но зачастую это просто усложнение, которое мало кому реально нужно. А вот упростить дизайн, отключить тяжелые эффекты и уменьшить число обращений к серверу — вполне реально.
Ну окей, а как это вообще меряется?
Значит, есть парочка реальных примерчиков.
- Первое — время загрузки. Чем меньше, скажем, 3 секунды — тем лучше. На практике любой сайт, который показывает даже базовую информацию за чуть больше этого времени — уже считается тормозным.
- Второе — размер страницы. Как правило, всё должно укладываться в 1-2 МБ с учетом всех ресурсов.
Что это за границы? Надо следить за тем, чтобы не было массива нативных скриптов и изображений, которые по сути нужны только для «вау-эффекта». Только базовые и обязательно сжатые.
Также не забываем про CDN — контентное распределение. Это как раз тот момент, когда файлы «рассыпаются» по географическим серверам, и пользователь скачает их не из России, а из ближайшего дата-центра. В итоге — разница по скорости бывает колоссальной. Вариант не всегда нужен, но в условиях мобильных и международных аудиторий — очень даже.
Там, кстати, еще есть такие вещи, как lazy load — откладывание загрузки изображений и ресурсов, которые не сразу видны пользователю. Это очень классный приём. Ты, скажем, скроллишь страницу — а картинки, которые не на экране, вообще не скачиваются, пока не появятся в зоне обзора. В результате стартовая загрузка страницы — очень быстрая.
И да — не забывайте про минимизацию и сжатие ваших CSS, JS. Там есть много инструментов: Webpack, Gulp, просто плагины для редакторов или ручные методы. Весь смысл — убрать все пробелы, комментарии, лишние строки, чтобы файлы были компактнее. Не верите, что это помогает? Попробуйте отключить минификацию — и увидите, сколько «веса» добавляется.
Короче, всё это — не волшебство, а обычный набор действий и внимательность. Не делайте из этого науке, просто проверяйте каждую мелочь. А потом смотрите, как меняется скорость — ведь это сразу отражается на вашем поведении, поиске и конверсиях.
Заключение: стройте медленнее, чем грузит ваш сайт — и тогда он не потеряет вас, а наоборот, начнёт работать как часы, даже на мобильных.Ну и что теперь с этим делать
Итак, опять смотрим наш сайт и начинаем с простых движений. Проверить его скорость и размер ресурсов — это один из первых шагов. Вот я бы сразу взял и запустил Google PageSpeed Insights или GTmetrix — это, как старый добрый молоток для проверок. Там сразу видно, где болит — слишком тяжелые картинки, много сторонних скриптов или CSS, что вечно тормозит. И не партитой, а просто видно черным по белому, что подрезать или исправить.
Дальше — всё, что больше 2 МБ, точно надо сжать. Особенно картинки. А Photoshop тут — не самый лучший помощник: там у каждого свой уровень компрессии, а получить хорошее качество без огромных размеров — мозгов не хватит? Вариант — взять карты онлайн или специальные сжатия. JPEG, WebP — выбирай формат под задачу. И не забудь о Lazy load — это такой прикид, когда картинки появляются только когда они реально нужны. Это реально ускоряет стартовую загрузку, и по сути, ты просто не тормозишь себя же.
Об этом же говорит и минимизация кода. Не нужно подключать к странице двадцать разных CSS и столько же JS-файлов. Объедини их, минимизируй — это делается через те же Webpack или Gulp, или просто плагины. В общем, чем меньше «веса» и чем проще структура, тем быстрее всё грузится. И тут хорошо помогает CDN — разместить статичные ресурсы на серверах по миру. Тогда пользователь скачает файлы из ближайшего, а не из Москвы или где у тебя «сервер» — зачастую хлипкий и медленный.
Ну и, чисто так — если очень хочется, попробуй отключить тяжелые шрифты или подключать только те начертания, которые реально нужны. Иногда старые верстальщики нагромождают весь гарнитурой, а на практике большинству вообще хватает одного варианта. В результате это избавляет от лишней «тянутой» заразу.
Можно сделать еще проще: просто проверить текущий сайт, посмотреть, где сконцентрирована «тяжесть». Грузишь страницу — а там куча реклам, сторонних счетчиков или кучу яваскриптов, которые по сути и не нужны для начала. Эти всё грузятся — и тормозят. Их можно отключать временно и проверить, как изменится скорость. Очень часто «лишние» скрипты — главный враг.
Вот, и не мешает еще подумать про хостинг. Если сервер вдалеке или вообще на хостинге, который давно «заснул», то все ускорения могут оказаться бесполезными. Вариант — или донести до хостера проблему, или искать более быстрый и современный тариф, или переносить все на CDN.
Наконец, важно иногда просто вернуться к практике: если у вас небольшая команда или вы сами делаете сайт, посмотрели — набросили — запустили. А после этого открыл страницу на мобильнике, посмотрел, как быстро открывается, и посчитал, сколько всего «веса» подгрузилось. Если всё долго и никуда не спешит — пора что-то менять.
Я бы просто проверил, есть ли возможность убрать лишние сторонние скрипты или отключить тяжелые плагины. Посмотреть, что реально нужно — и что можно срезать без потери функционала. Не забывайте про кэш — он тут же ускорит повторные заходы. Ну и по возможности — используйте CDN, APK-версию или быстрый хостинг. А еще можно попробовать Lazy load и убедиться, что все файлы минимизированы. И всё должно работать быстрее.
Ну вот как-то так — проверил бы эти основы и потом увидел, как сайт полегчает, а скорость повысится. В конце концов, в этом деле главное — не усложнять и не усложняться самому. Всё, что действительно помогает, — это простая проверка и горячая рука. А остальное — уже детали.
