Первое, что я делаю, когда кто-то жалуется: «Ну почему у нас так плохо с видимостью?» – открываю проверку отчётов скорости. Да-да, тот самый скоростной анализатор, которым многие пренебрегают. А зря. Он не просто пинает твою верстку – он орёт в лицо: «Ты вообще в курсе, как это всё грузится на реальных телефонах?»
Кнопки слишком мелкие, текст уезжает, шрифт нечитабельный? А ты удивлён, что никто не покупает?
У меня был кейс – сайт по продаже ковров ручной работы. Красота, текст по золоту, всё как в лучших домах Лондона и Парижа. Только вот на мобильном он открывался секунд 12. И ещё полминуты плавал фон. Знаешь, сколько было покупок с мобильных? Ноль. После чистки кода, сжатия фоток и нескольких безжалостных решений по дизайну – подскочили на 23 позиции. Прям как в рекламе. Только без магии, просто расчёт.
Скорость – не фича, а необходимость
Если ты думаешь, что страница на 4 мегабайта – это нормально, я хочу с тобой поговорить. Серьёзно. У нас в 2025 году всё ещё куча людей на 3G. Или с телефоном, который старше их кота. И они – тоже клиенты. Или могли бы быть. Ну ты понял.
Оценки – это не цифры. Это сигналы, которые считывает система
Ты можешь забить на 64 балла по мобильной версии. Мол, это ерунда, у нас же все на десктопе. Но потом гугл такой: «Ну… раз вы не заботитесь об удобстве… тогда и мы не будем спешить вас продвигать.» Это как в школе: вроде бы учитель ничего не говорит, но в дневнике у тебя уже жирный минус. И родителям звонят.
Что реально помогает: список без сахара
- Сжимай картинки. Без компромиссов. Не 3 мегабайта, а 80 КБ, и всё равно красиво.
- Выноси скрипты вниз. Или вообще – нафиг. Особенно если они просто ради «вау».
- Не лепи 40 шрифтов. Один-два – максимум. Читайбельность, мать её.
- Проверь интерактивность. Клики должны работать, а не просить загрузку из преисподней.
- Посмотри, как всё выглядит на телефоне за 10к. Нет, не твоём айфоне. Вот том древнем Xiaomi.
Не думай, что это для разработчиков. Это и твоя зона ответственности тоже
Я знаю, соблазн велик: «Это же не я делал верстку. Пусть сами чинят.» Ага. Только потом ты удивляешься, почему конверсия падает, а конкуренты растут. Думаешь, у них магия? Нет, у них просто проверено, вычищено и упрощено. Ничего лишнего. Просто удобно. Быстро. Честно. Всё.
И да, можно заморочиться и собирать вручную все эти сигналы. А можно просто проверить страничку, получить тычки и исправить. Работает. Проверено не одним проектом.
Ну что, поехали?
Попробуй сам. Прогони свой сайт, посмотри, где хромает, и сделай хотя бы пару правок. Не пытайся всё сразу. Уберёшь фон в 5МБ – уже лучше. Перепишешь заголовки – ещё +5. Всё просто. Почти. Но только если делать.
И, чёрт возьми, не включай автоплей видео на мобильных. Никогда.
Как выжать максимум из анализа скорости – по-честному, по-быстрому
Сразу к делу – открой в Хроме DevTools и клацни по вкладке «Аудит»
Да, не надо ставить ничего лишнего. Просто правая кнопка мыши – «Просмотреть код», потом вкладка с зелёным кружочком. Щёлк – и пошло. Сайт прогонится, и тебе вывалят кучу цифр. Вот тут начинается веселье.
Смотри на First Contentful Paint (FCP) – это типа, когда что-то впервые появляется
Если FCP у тебя 3+ секунды – ну, поздравляю, у тебя сайт-улитка. Это момент, когда пользователь уже пожалел, что вообще кликнул. Всё, что выше двух секунд – в топку. Сжимай шрифты, гаси тяжелые баннеры, загрузи только то, что нужно вот прямо сейчас. Остальное – пусть догружается потом, как фон в игре GTA.
Time to Interactive – он как экзамен: если завалил, никто ждать не будет
Ты можешь показать обложку, но если кнопка «Купить» не жмётся – всё, привет bounce rate. Работай с JavaScript. Меньше скриптов – меньше боли. Кстати, один клиент грузил фрейм для онлайн-чата… 7 секунд. И удивлялся, почему народ убегает. Ха.
Layout Shift – вот он, враг номер один юзера на смартфоне
Если элементы на экране скачут, как лягушки на болоте, ты в пролёте. Пользователь уже случайно кликнул на «Удалить аккаунт», хотя хотел просто «почитать отзывы». Оптимизируй шрифты, зафиксируй размеры блоков, не полагайся на удачу. Тут фокус не прокатит.
Зелёные зоны – это не цель, это отмазка
Даже если у тебя «зелёный» по всем метрикам – это ещё ничего не значит. Реальный пользователь сидит с дешёвым Android и 3G в лифте. Тестируй в боевых условиях. Я вот иногда беру старый Galaxy, ставлю throttle на «Slow 3G» и просто мучаю сайт. Поверь, это очень отрезвляет.
Не ведись на цифры, смотри глазами
Да, цифры красивые. Но зайди сам на сайт, попробуй. Честно. Без профдеформации. Если раздражает – всё, баста.
Три вещи, которые реально работают
- WebP вместо JPEG – экономит мегабайты, и никто не заметит подвоха.
- Preload критических ресурсов – да, тебе надо будет повозиться, но оно того стоит.
- Не трогай то, что не тормозит – иногда лучше не трогать старый скрипт, чем воткнуть новый костыль.
Бонус: не оптимизируй из любопытства
Если всё летает – не ковыряй ради «попробовать улучшить ещё на 2%». Сначала разбери, что реально тормозит. Один парень у нас месяц гонял метрики, а потом оказалось – сервер на shared-хостинге, и ему просто не хватало памяти. Всё.
И финалочка
Скорость – это не про цифры, а про уважение к чужому времени. Если сайт долго грузится – ты как бариста, который 10 минут варит эспрессо. Вроде старается, но хочется сбежать. Не будь этим баристой.
Оценка показателей Core Web Vitals с помощью аудита
Сначала – просто включи «симулятор плохого Wi-Fi»
Да, именно так. Хочешь понять, как себя чувствует твой сайт на слабом интернете? Эмуляция мобильной сети – это не шутка, это тест на выживание. Когда у тебя рендер идёт 6 секунд, а ты даже заголовок не видишь – становится неловко. Не пользователю, а тебе. Потому что TTFB (Time to First Byte), FCP (First Contentful Paint), LCP (Largest Contentful Paint) вдруг становятся не просто аббревиатурами, а гвоздями в крышку юзерского терпения.
Что смотрим: три буквы, за которые можно получить по шапке
- LCP – если он больше 2.5 секунд, считай, ты в минусах. Считается «крупным» не логотип, а, скажем, заголовок статьи или баннер, который реально наполняет экран.
- FID (ну ладно, теперь это INP, но всё ещё та же боль) – вот тыкаешь на кнопку, а она будто «думает»… 300 мс – и пользователь уже пошёл пить чай.
- CLS – этот вообще бесит. Всё сдвинулось, ты ткнул не туда, открыл баннер с микрокредитом – классика. Сдвиг должен быть менее 0.1, а не в стиле «тетрис на первом экране».
Цифры – хорошо, но ощущения – лучше
Сухие проценты не спасают, когда ты реально не видишь ничего в течение трёх секунд. Поэтому: включай замедление, запускай прогон и смотри глазами пользователя. Это не лаборатория – это реальность. Иногда даже кнопка «Купить» вылезает позже, чем человек успевает передумать.
Реальный кейс: сайт доставки суши
Запускали рекламную акцию. Красиво, ярко, скидки. Но LCP был 4.2 секунды. Люди уходили, даже не поняв, что вообще там за акция. Заменили фон-видео на статичную JPG – бах, 2.1 секунды. Заказов стало на 30% больше. Просто из-за картинки. Без шуток. Бывает, что один бэкграунд съедает весь KPI.
Обманка: зелёная метка ≠ хороший UX
Не ведись. Бывает, что всё вроде зелёное, но ощущения всё равно так себе. Потому что сам ритм загрузки рваный. Типа текст есть, потом дергается, потом прилетает кнопка. Технически – окей. По факту – раздражает. Лучше один раз вручную прогнать и почувствовать самому. Как друг сказал: «Если бы этот сайт был человеком, я бы с ним не общался».
Ещё один приём – убей весь JavaScript (на время)
Нет, правда. Попробуй. Просто отключи скрипты и посмотри, как грузится сайт. То, что останется – это скелет. И иногда это скелет, у которого нет ни ног, ни головы. Тогда всё ясно: пора резать. Lazy-loading картинок, вынос тяжёлых штук, оптимизация CSS – это всё не мода, а необходимость. Потому что у тебя либо работает, либо нет. Полутонов никто не чувствует, особенно на Android за $150.
Маленький список спасения
- Отключи всё, что не влияет на первый экран. Да, всё.
- Поставь фон без градиентов и видео. Простой. Серый. Не стыдно.
- Проверь, что шрифты не грузятся по 5 секунд. Без кастомов – хотя бы временно.
- CLS? Зафиксируй размеры всего. Даже заглушки. Особенно заглушки.
И да – один совет в сторону
Если всё время получаешь 80+ баллов, это ещё не значит, что ты молодец. Это может значить, что ты тестишь в тепличных условиях. Попробуй открыть сайт с парковки, на 3G, с телефоном 2017 года. Вот тогда и поймёшь, что такое «оптимизация».
Выявление и устранение SEO-проблем с помощью Lighthouse
Сначала проверь, грузится ли сайт как сломанный шкаф
Вот серьёзно – заходишь на страницу, а она тянется, как пятничный день в офисе. Проверь, сколько времени уходит на загрузку. Если дольше 2–3 секунд – уже звоночек. Люди не любят ждать. Никто не любит. Даже кошки. А поисковики тем более. Ищи в отчёте метки типа Time to Interactive, Largest Contentful Paint – вот они и говорят, где тормозит. Была история: у клиента главная страница открывалась 8 секунд, потому что баннер на полэкрана весил, как два альбома Pink Floyd. Сжали картинку – сайт задышал. Всё. Не надо быть Шерлоком.
Не закрывай сайт от себя самого
Один парень три месяца не мог понять, почему его блог не показывается в выдаче. Всё классно: контент норм, ссылки есть, ключи есть. А потом я залез в отчёт – и что ты думаешь? Meta robots noindex на каждой второй странице. Просто включено было по умолчанию, и никто не снял галочку. Руки опустились. Проверяй, что ты сам не мешаешь себе попасть в поиск. Это как с будильником: поставил – а потом поставил без звука.
Чисти мусор из кода
Если у тебя в DOM-е больше элементов, чем у бабушки в серванте, пора наводить порядок. Зачем сто слоёв вложенности, зачем скрипты, которые никто не вызывает? Lighthouse подскажет, где жир, где пыль, где уже паутина. Пример: на одном лендинге было 2500 DOM-элементов. На одной странице. Это же не Война и мир. Переписали шаблон, убрали хлам – сайт стал не только быстрее, но и ранжироваться начал по внятным запросам. Совпадение? Возможно. Но сайт – живой организм, ему не надо захламление.
Если ссылки ведут в никуда – ты не в интернете, ты в лабиринте
404 ошибки – это не баги, это просто такие заброшенные дома в городе твоего сайта. Их надо находить и либо чинить, либо сносить. Ты ведь не оставишь у себя в квартире дыру в полу и табличку «Переход на следующую комнату»? Вот и тут так же. Lighthouse подкинет список таких ссылок. Не ленись. Зайди, почини. Это не про перфекционизм, это про не выглядеть, как сайт, забытый богами и маркетологами в 2013-м.
Мобильность – не роскошь, а средство выживания
Если твой сайт на мобиле выглядит, как таблица Excel в микроволновке – готовься к провалу. Люди не будут пинчить экран ради чтения твоей оферты. Проверяй адаптив. В отчёте всё видно: шрифты нечитабельные, кликабельные элементы налезают друг на друга – там целый зоопарк ошибок. У нас был кейс: клиенты теряли половину трафика с мобильных. Просто потому что кнопка «Купить» была под футером. Как под ковриком. Перенесли – продажи выросли в два раза. Ну и… да, это было неловко.
Заголовки без логики – как книга без оглавления
H1, H2, H3 – это не просто теги. Это как главы в книге. Если у тебя H1 стоит три раза на странице, а H2 вообще нет – считай, ты дал Гуглу книжку без структуры. Он посмотрит, скажет «ну, прикольно» и пойдёт дальше. Lighthouse чётко показывает, где нарушена иерархия. Исправляешь – и бах, контент становится понятным не только тебе, но и машине. У нас на корпоративном сайте в новостях был H4 сразу после H1 – исправили, и начали цепляться в выдачу по более точным запросам. Такое себе волшебство, только без магии.
Ну и не забывай – отчёт сам себя не исправит
Это боль. Люди смотрят отчёт, качают в PDF, радуются графикам и… всё. А потом через три месяца такие: «Почему ничего не поменялось?» Потому что отчёт – это список дел. Не магический эликсир. Делаешь – видишь результат. Не делаешь – смотришь, как конкуренты делают. Всё просто. Вроде бы.
