Откройте свой сайт на телефоне, на мобильном интернете, а не на офисном вайфае. Сосчитайте секунды, пока вы реально сможете что-то прочитать. Это ожидание стоит вам клиентов, и почти в каждом аудите, который я делаю, всё сводится к одним и тем же трём проблемам. Вот они, простыми словами, плюс единственное число, которое говорит правду о вашей скорости.
Число, которое действительно важно
Большинство советов о скорости показывают вам оценку из 100. Забудьте о ней на минуту. Измерение, которое решает, останется ли посетитель, проще: сколько секунд проходит, пока на экране появится главное. У Google для этого есть название — Largest Contentful Paint, но термины вам не нужны. Просто посмотрите, как загружается главная страница на телефоне, и засеките момент, когда большая картинка или заголовок дорисовались. Меньше двух с половиной секунд ощущается мгновенно. Больше четырёх — люди уже жмут «назад» к Google.
Лабораторная оценка может гореть зелёным, пока настоящие телефоны на настоящих сетях еле ползут. Так что проверяйте так, как это делает ваш клиент: ваш настоящий телефон, мобильный интернет, с холодного старта. То, что вы видите в эти первые секунды, — честный ответ.
Утечка первая: огромная картинка в шапке, которую никто не уменьшил
Фото в верхней части главной страницы обычно самый тяжёлый элемент на ней. Я регулярно открываю сайты, где одна эта картинка весит четыре или пять мегабайт, выгруженная прямо из камеры или из стокового банка и вставленная в полном размере. На ноутбуке она загружается раньше, чем вы заметите. На телефоне со слабым сигналом это стена, за которой все ждут.
Слайдеры делают ещё хуже. Вращающийся баннер из пяти слайдов — это пять тяжёлых картинок, которые грузятся разом, плюс скрипт, который их крутит. Посетитель всё равно видит только первую, прежде чем решить, остаться ли, так что остальные четыре — чистый вес впустую. Решение простое и работает: одна картинка нужного размера, правильно сжатая, в современном формате, подогнанная под экран телефона, а не под кинозал. На сайте пекарни, который я пересобрал в прошлом году, одно только изменение размера и сжатие картинки в шапке снизили первую отрисовку примерно с шести секунд до менее чем двух, и я ещё ничего другого не трогал.
Утечка вторая: конструктор страниц, который грузит всё и везде
Большинство сайтов на WordPress собраны на визуальном конструкторе страниц. Они прекрасны для быстрой сборки. Загвоздка в том, что многие из них грузят весь свой набор инструментов на каждой странице, использует она его или нет. Анимации, библиотеки иконок, лишние шрифты, скрипты вёрстки — всё это доставляется телефону, который хотел лишь узнать ваш график работы.
Вы чувствуете это как страницу, которая быстро что-то показывает, а потом на миг застывает, пока телефон пережёвывает код, прежде чем вы сможете прокрутить или нажать. Тяжёл не дизайн. Тяжёл невидимый набор инструментов за ним. Чтобы это исправить, нужно отключить то, что страница не использует, урезать шрифты до тех одного-двух, которые вы действительно выбрали, и позволить нижним частям страницы грузиться только тогда, когда до них кто-то доскроллит. Сделанная аккуратно, страница выглядит так же и ощущается вдвое быстрее.
Утечка третья: дешёвый хостинг, спрятанный за плагином кэша
Вот это никто не хочет слышать. Плагин кэша хранит готовую копию страницы, чтобы сервер не пересобирал её при каждом визите. Он действительно помогает, и именно поэтому он прячет настоящую проблему. Пока кэш свежий, сайт кажется нормальным. В момент, когда он истекает, или заходит авторизованный посетитель, или кто-то открывает страницу, которую кэш пропустил, посетитель ждёт на том же медленном, перепроданном сервере, который плагин прикрывал.
Дешёвый общий хостинг набивает сотни сайтов на одну машину. Ваша скорость тогда зависит от того, что делают все соседи в эту секунду. Плагин кэша — хорошая идея на хорошем хостинге и маскировка на плохом. Если ваш сайт то быстрый, то мучительно медленный без явной причины, обычно причина в хостинге под ним.
Как найти свою утечку сегодня вечером
Большую часть этого вы можете продиагностировать сами за десять минут. Откройте главную страницу на телефоне на мобильном интернете и засеките первую отрисовку. Кликните правой кнопкой по картинке в шапке на компьютере и проверьте её размер; всё, что больше нескольких сотен килобайт для одной картинки, — тревожный знак. Потом откройте новую страницу, которую вы редко посещаете, чтобы кэш был холодным, и посмотрите, тормозит ли она. Три быстрые проверки, и вы обычно поймёте, какая из трёх вас мучает.
Если вы предпочитаете, чтобы кто-то измерил как следует, именно в этом смысл бесплатного аудита сайта: я открываю ваш сайт так, как это делают ваши клиенты, и говорю, какая утечка настоящая. Скорость — это тоже не разовая работа. Картинки перезагружают, плагины обновляются, хостинг забивается, и сайт, который был быстрым весной, к осени может просесть, поэтому постоянный уход держит число честным. А когда сайт зашёл слишком далеко, иногда чистая пересборка на правильном фундаменте быстрее и дешевле, чем бесконечно латать старый.
Ловушка со скоростью на телефоне в том, что для вас она невидима. Вы заходите на свой сайт по быстрому вайфаю, из кэша, и вам кажется, что всё нормально, поэтому вы полагаете, что нормально для всех. Ваш клиент, стоящий на улице с одной палочкой сигнала, переживает совершенно другое и никогда вам об этом не скажет. Он просто уходит. Число в эти первые секунды — единственное, которое знает.