Хочешь совет? Сократи время отклика. Прямо сейчас. Если твой сайт думает дольше, чем человек успевает зевнуть – ты уже проиграл. Я не шучу. Люди не просто уходят. Они злятся. Как будто ты им кофе пролил на клавиатуру. Это почти личное.
Ты когда-нибудь пытался зайти на сайт с мобильного, когда ловишь плохой Wi-Fi в метро? Или, о боже, в лифте. Ты жмёшь на ссылку – и тишина. Только белый экран. А потом ты такой: «Да пошло оно!» – и закрываешь вкладку. Всё. Крест на доверии.
А теперь представь, что этот сайт был твоим. Мда.
Мне недавно попался один – вроде и дизайн ничего, и тексты норм, но каждый переход – как эпизод из «Игры престолов»: долго, напряжённо, а финал всё равно не радует. Я серьёзно, там можно было чайник вскипятить, пока он, прости господи, прогрузит кнопку. Кнопку!
И тут началось. Полез читать отчёты. Вроде бы всё на месте – хостинг не самый дохлый, картинки сжаты. Но, блин, оказывается, браузеры стали требовать… нет, не требовать, а намекать, что теперь не только сам сайт, но и каждый элемент должен быть шустрым. Прямо как ребенок с сахаром в крови.
И да, раньше мы все гонялись за адаптивностью, пикселями, крутыми шрифтами. А теперь всё свелось к одному: насколько быстро твой сайт готов сказать «Привет!» пользователю. Без кашля, без отмазок, без заставок на весь экран.
Странно, да? Всё ускоряется, а ощущение, что времени всё меньше. И сайты стали как люди – либо сразу «привет-привет!», либо «я занят, извини». Никто не ждёт. Даже мама.
Вот и думай, стоит ли тебе экономить пару миллисекунд. Спойлер: да, мать его, стоит.
Как Web Vitals от Google изменили приоритеты в оценке скорости сайта
Сразу – если у тебя на сайте кнопка моргает через 3 секунды после загрузки, поздравляю, ты вылетел из «нормы» Google. И да, это уже не просто «ну, немножко тормозит» – это сигнал, что ты где-то… недосмотрел. Или забил. Неважно. Они (Google) теперь оценивают не просто «за сколько вся страница появилась», а как ощущается. Вот прямо физически. Ты нажал – и чё? Ждёшь? Или всё сработало?
Короче, раньше всё было просто: успел показать контент за пару секунд – молодец. Сейчас всё иначе. Есть вот эти три буквы – LCP, CLS, FID (ну, уже INP, да, но не суть). И каждый из них про что-то такое… неприятное. Например, Largest Contentful Paint – это когда здоровенная картинка где-то посередине экрана загружается последней, и ты сидишь, как в ожидании концовки сериала: «ну давай же, покажи!»
Или вот тыкаешь по кнопке, а она не реагирует. Ни звука, ни вибрации. Просто тишина. А потом – хоп! – и что-то происходит. Только уже поздно. Это всё – внутренняя боль FID. Google такой: «Эй, друг, ты мог бы сделать это по-другому». А ты ему: «Да я вообще не думал, что это кто-то считает».
Но считает. И это теперь влияет на то, увидят ли твой сайт вообще. Ну, типа, ты его сделал, а Google такой: «Сорян, ты там на пятой странице. Люди любят сайты, которые не бесят». И вот тут начинается веселье. Потому что оптимизировать под Web Vitals – это не просто прикрутить кеш или пожать картинки. Это – ковыряться в микрозадержках, в анимациях, в том, как шрифт прыгнул, пока ты не смотрел. Жуть.
Ты когда-нибудь пытался объяснить дизайнеру, что «вот этот сдвиг в 8 пикселей – это беда»? Я пытался. Реакция была как будто я попросил нарисовать сайт на мандаринах. Но Google не волнует, кто виноват. Им важно, чтобы пользователь не начал ругаться вслух, когда прокручивает страницу.
Всё, что ты делал до этого, считай, неважно, если страница шатается, как студенческий диван. Теперь приоритет – чтобы всё было на месте, сразу, и не ломало мозг. Даже если медленно. Стабильно – лучше, чем быстро, но с глюками. Вот такая ирония.
И честно? Я офигел, когда увидел, как сильно метрика CLS влияла на поведение пользователей. Один дёргающийся баннер – и всё, человек уходит. Ты вкладываешь кучу сил, а его просто выбешивает прыгающий заголовок. Потому что ты где-то забыл указать размеры блока.
Постой, я тут не договорил – самое странное, что теперь приходится думать, как пользователь *ощущает* сайт. Не как он видит, не как быстро он рендерится, а вот… чувствует. Это почти как UX-психология, только тебе ставит оценки не живой человек, а алгоритм. Окей, не совсем алгоритм, но ты понял.
Ну ладно, это не важно. Но вот что важно: если ты до сих пор гонишься только за минимальным временем рендера – ты в прошлом. Надо копать глубже. Web Vitals – не приговор, но если игнорить – будет больно. И не сразу. А потом – бац, и сайт никто не открывает. Вот такая штука.
Какие технологии влияют на загрузку: от Lazy Load до HTTP/3
Не включай автоплей видео на первом экране. Просто… не надо. Это не круто. Это бесит. Особенно когда ты сидишь ночью, все спят, а тут БАЦ – реклама шампуня на весь экран и орёт. Ну и плюс – тормозит всё, особенно на слабых соединениях. Хоть с балкона выбрасывай ноут.
А теперь – Lazy Load. Звучит будто какая-то прокрастинация на фронте, но на деле штука классная. Картинки подгружаются только когда реально нужны. Вот ты листаешь вниз – и опа, появились. Не грузятся в воздух, не жрут трафик, не засоряют канал. Я был в восторге, когда впервые это поставил на блог. Серьёзно. Был как ребёнок, которому подарили трансформер. Только вместо Оптимуса Прайма – невидимые картинки.
Ну да, есть нюанс: если ты переборщишь – пользователь может уткнуться в белую пустоту, как в сериал, где не сняли концовку. Проверяй. Не доверяй плагинам бездумно. Я пару раз обжигался – особенно с галереями. Лучше отладить самому.
Теперь про HTTP/3. Да-да, это не баг, это фича. Работает поверх QUIC, а это как если бы ты в пробке ехал по воздуху. Браузер подключается быстрее, и всё шуршит шустрее. Но! Только если сервер это умеет. А если не умеет – ну, сорян. Ничего не полетит. Мне как-то пришлось два дня убивать, чтобы это поднять на одном проекте. Потом понял, что хостинг вообще не поддерживает. Ох.
CDN – тоже не про скорость, а про адекватность. Отдавать контент с серверов поближе – да, это как раз про то, чтобы ты не ждал загрузки с Марса. Кэширование, всё такое. Но иногда они мешают. Серьёзно. Ты меняешь текст на сайте – а CDN тебе такой: «Нет, не буду, мне и с этим кэшем норм». И ты стоишь, как дурак, и думаешь: «А что, всё сломалось?»
Ах да, шрифты. Вот это боль. Ты хочешь, чтобы было красиво, выбираешь какую-нибудь тонкую антикву с засечками – и на мобильных это всё едет, ломается, и загружается, как будто с дискет. Подключай локально, не тяни с Google Fonts по 5 секунд. Иначе привет – FOUT, FOIT, и всё в таком духе.
Что я хочу сказать… ну, наверное, не всё сразу. Оптимизация – это не галочка в чек-листе, а такой бесконечный костёр, куда ты подкидываешь то кеш, то lazyload, то прокси, а оно всё равно дымит. Но это и кайф. Всё время что-то улучшать. Всё время ненавидеть себя за старые решения. Всё время заново.
…и да, если ты ещё используешь jQuery для анимации загрузки – мы не друзья. Шутка. Но всё же подумай об этом.
Что учитывать при оптимизации изображений и мультимедиа под новые метрики
Сначала – режь без жалости. Без прелюдий. Если у тебя на главной фоне висит видео на автоплее в 4K, которое никто не смотрит – ну ты понял. Удаляй. Просто стирай. Бессмысленно гонять мегабайты ради эстетики, которую юзер вообще не замечает. У меня был кейс – убрали фон, заменили его на статичную картинку, а LCP – хлоп! – почти в два раза быстрее. https://auslander.ru/seo-buduschego/ об этом как раз хорошо намекает между строк.
Теперь к изображениям. Формат. Формат – это половина боли. Ты когда-нибудь пытался оптимизировать PNG с прозрачностью на 1.5Мб? Я да. Лучше уж сразу WebP. Он не просто «легче» – он тупо удобней. Даже если старые браузеры ещё где-то живут, можно ведь fallback сделать. Но тут фишка: не гонись за 100/100 в PageSpeed. Иногда картинка весит 40Кб и всё равно мешает. Почему? Потому что lazyload не настроен. Или, чёрт побери, preload не прописан. Такие мелочи, а в итоге сайт ощущается как холодная каша. Не проглотить.
Есть ещё мем – «оптимизировал гифку». Ха! Просто перестань вставлять гифки. Это не 2008. Используй видео или Lottie-анимации. Правда, с Lottie есть нюанс – они иногда подгружаются дольше, чем хочется. Так что… экспериментируй. Серьёзно. Никакая статья тебе не скажет, какой путь самый быстрый. Прогоняй Lighthouse, вари метрику, смотри руками.
Ах да, про аудио никто не говорит. А надо. Даже если это просто 2 секунды звука при клике – если оно в MP3 без оптимизации, у тебя проблемы. Сожми. Порежь. Обрежь начало, конец, и вообще подумай – надо ли оно?
Ну и последнее: CDN. Не «волшебная палочка», конечно, но без него – особенно если ты работаешь на глобал – ты как с мешком кирпичей. Таскаешь всё вручную, пока другие катаются на скейтах. Не знаешь с чего начать? Глянь сюда: https://allenai.org. У них есть пара решений, которые ты можешь прикрутить даже с минимумом кода.
- Заменяй тяжелые форматы на WebP/AVIF
- Пропиши
loading="lazy"для всего, что не above-the-fold - Не доверяй CMS – проверь руками, что реально грузится
- Анализируй: не верь, что раз «изображение красивое», оно нужно
- Проверь preload – часто про него просто забывают
Ты можешь всё сделать «по учебнику», и всё равно всё будет тормозить. А можешь просто сжать одно SVG-шку, и сайт взлетит. Странный мир, да. Ну, такой вот он – цифровой сюр.
