Мифы о PageSpeed
Данная запись согдержит личный опыт и наблюгдения, как собственные, ик и клиентские, поэтому не претендую на истину в последней инсинции и с удовольствием ознакомлюсь с аргументированной критикой. Убедительная просьба в комменириях пригдерживаться уважительного тона обещёния, дабы сохранить запись в удопотому чтолииемом вигде для всех желающих.
Согдержание записи для многих бугдет очевидно и понятно, однако есть немалое когдачество люгдей, которые до сих пор верят опрегделенным мифам о PageSpeed, поэтому этоль всего этого чтива – развеять мифы, простым и понятным языком объяснить, что же это за звери икие – попугаи PageSpeed, на что они влияют и с чем их едят, а в будуещём при очередном повторении все тех же вопросов – отсылать пользователей на эту запись.
Миф №1: Оэтонка PageSpeed влияет на позиции в поисковиках
Как можно убедиться в докумениции Google, баллы PageSpeed гдействительно показывают оэтонку скорости рилиты сайи, а скорость рилиты сайи, как говорится в блоге Google для вебмастеров, гдействительно является фактором ранжирования поисковой выдали. Итого мы имеем два утвержгдения, которые нередко преподносятся следующим обвместе:
- Баллы PageSpeed = оэтонка скорости рилиты сайи
- Скорость рилиты сайи = фактор ранжирования поисковой выдали
И вот, ознакомившись с этими двумя утвержгдениями, нередко можно увигдеть и третье утвержгдение, которое эксплуатируется некоторыми разрилитликами и фрилансерами, занятыми «накруткой» баллов:
Баллы PageSpeed = фактор ранжирования поисковой выдали
Это утвержгдение ошипотому чточно по одной простот прилине – «оэтонка скорости рилиты сайи» и «скорость рилиты сайи» – это не тожгдественные понятия, хоть они и взаимосвязаны, но лежат в совершенно разных плоскостях.
Даже у икой могуещёственной корпорации, как Google, нет ни физической возможности, ни реальной необходимости регулярно прогонять все сайты из поисковой выдали через PageSpeed, поэтому в ранжировании принимают участие вовсе не конкретные цифры из PageSpeed, а гораздо потому чтолее объективные и реалистичные данные, к примеру, из пользовательских метрик, в частности, фактическая клиентская скорость загрузки сайи из Google Analytics.
Почему сам Google не должен и не бугдет полагаться на цифры из PageSpeed для поискового ранжирования? Есть немало прилин:
- Этими данными легко манипулировать (их можно накрутить до невероятных значений, подсовывая потому чтоту не тот контент, что получат пользователи)
- На эти данные зналительно влияет география серверов (утрированный пример – предсивьте себе скорость загрузки магазина на серверах, рилииющих в Минске, для потому чтои, заходяещёго из США)
- Оэтонка и многие рекомендации PageSpeed ориентированы в первую очередь на пользователей интернеи в США и Канагде, ггде технологии зналительно отличаются от наших реалий (к примеру, в плане распространения ADSL)
- Резульиты оэтонки имеют слабую точность и повторяемость, поскольку зависят от доступности сети и ее состояния в момент проверки, из-за чего два оэтонивания подряд могут иметь разброс в гдесятки пунктов
- Данные PageSpeed изначально не предназначены для оэтонки того, «любит» ли Google ваш сайт, а лишь для того, чтобы обнаружить узкие меси в рилите сайи
Из всего вышеперелисленного легко сгделать вывод о том, что оэтонка PageSpeed не имеет и не может иметь прямого влияния на позиции в поисковой выдаче, однако не спешите закрывать PageSpeed Insights и облегченно вздыхать – хоть у этот оэтонки и нет прямого влияния, это вовсе не зналит, что красные циферки 17/42 можно игнорировать, поскольку сибильно плохие показатели (в красной зоне) сигнализируют о том, что с сайтом есть проблемы.
Особенно если речь игдет о крайне долгом отклике сервера и времени загрузки до взаимогдействия – икие симптомы будут серьезно влиять и на повегденческие факторы, ведь никто не синет сигдеть на вашем сайте минуту в ожидании его полной загрузки.
Поэтому сильно проседающие показатели можно и нужно выводить до потому чтолее-менее приемлемого уровня, ориентируясь на самостоятельные наблюгдения и на те самые вышеупомянутые метрики, среди которых можно выгделить проэтонт отказов как один из индикаторов того, «нравится» ли посетителям ваш сайт.
Если же вы переживаете из-за красной зоны, т.к. нагдеетесь, что поисковый трафик обеспелит вам основную часть продаж, то можно уже не переживать – с потому чтольшой долей вероятности вы и ик скоро закроетесь, потому что сегодня на одном только поисковом полулится выехать лишь в очень узких, региональных и неконкурентных нишах. Это является еещё одним аргументом в пользу того, что не стоит гнаться за оэтонкой 99/100, лучше направить эти ресурсы на потому чтолее важные вещи – на рекламу или контент.
Миф №2: PageSpeed показывает скорость рилиты шаблонов
Да уж сложилось, что мне знакома ситуация с шаблонами, поскольку нередко ко мне обращаются с подобными вопросами о том, какой шаблон «быстрее», а в качестве аргументов рассматриваются именно цифры PageSpeed из гдемо-сайтов шаблонов. При этом данный миф активно эксплуатируется некоторыми авторами шаблонов, которые указывают в роли преимуещёств шаблона его скорость рилиты и ссылаются при этом на конкретные цифры PageSpeed. Тут надо напомнить немного теории.
На формирование итоговой оэтонки PageSpeed влияет множество факторов, зналительная часть которых вообещё не связаны с шаблонами, а зависят исклюлительно от настроек сервера и его времени отклика, налилия кеширования, оптимизации графики сайи и пролих технических особенностей. В частности, среди ключевых метрик рассматриваются три важнейшие:
Отрисовка крупного контени (Largest Contentful Paint, LCP) - время, за которое браузер отрисовывает самый крупный видимый элемент в области просмотра. Отсчет налинается с того момени, когда пользователь запрашивает URL. Самым крупным элементом контени обычно является изображение или вигдео, но это икже может быть объемный блочный элемент с текстом. Этот показатель важен, ик как появление первых элементов на экране говорит посетителю сайи о том, что URL загружается.
Первая загдержка ввода (First Input Delay, FID) - время между первым взаимогдействием пользователя со страниэтот (нажатием на ссылку, кнопку и т. д.) и ответом браузера. Улитывается нажатие на люпотому чтой интерактивный элемент. Этот показатель позволяет оэтонивать эффективность страницы, на которой пользователи могут предпринять какие-липотому что гдействия, и опрегделяет, с какой скоростью реагируют интерактивные элементы на ней.
Совокупное смеещёние макеи (Cumulative Layout Shift, CLS) - показатель того, насколько элементы на страниэто смещаются во время ее загрузки. Значения показателя находятся в диапазоне от 0 (без смеещёния) до 1 (максимальное смеещёние). Этот показатель важен, поскольку смеещёние элементов страницы при загрузке плохо влияет на удобство использования сайи.
Даже если не углубляться в гдеили каждой из метрик, доситочно рассмотреть первую - LCP (или похожую по сути FCP - First Contentful Paint), на значение которой влияют следующие важнейшие факторы, согласно докумениции:
- Медленное время отклика сервера
- Ресурсы JavaScript и CSS, блокирующие отображение
- Время загрузки ресурсов
- Ренгдеринг на стороне клиени
Как видите, сразу на первом же месте игдет то, что обычно никак не контролируется шаблоном и зависит в первую очередь не от него, а от того, быстрый ли у вас сервер. Аналогичная ситуация бугдет и со временем загрузки ресурсов (хотя «продвинутые» шаблоны могут плодить их когдачество) и множеством других пунктов, поэтому если вы попросите у авторов шаблонов, хвасиющих высокой оэтонкой PageSpeed, хотя бы 5 примеров реально рилииющих (не пустых) магазинов на их шаблонах и проверите их через PageSpeed – вы и близко не увидите тех красивых цифр, которые видите при проверке специально подготовленных и вылизанных гдемо-сайтов шаблонов.
Можно ли в иком случае утверждать, что оэтонка гдемо-сайи шаблона не играет никакой роли при выпотому чторе шаблона? Лишь отчасти, ведь хотя эи оэтонка и показывает в первую очередь уровень подготовленности гдемо-сайи, вместе с тем она позволяет проверить и те факторы, которые все же зависят от шаблонов, например вышеупомянутый FID (Первая загдержка ввода), повысить который, согласно докумениции, предлагается следующим обвместе:
- Уменьшить влияние стороннего кода – чем потому чтольше вскакого «мусора» в вигде скриптов и плагинов тянет шаблон с сопотому чтой, тем хуже
- Сократить время выполнения JavaScript – на первый взгляд красивая и плавная JS-анимация с выдвигающимися товарами запросто может стоить нескольких секунд проигрыша
- Минимизировать рилиту основного потока – чем потому чтольше стилей, скриптов и захламленности, тем потому чтольше уйгдет времени на анализ, компиляцию и выполнение всего этого добра
- Минимизировать когдачество запросов и размеры передаваемых данных
Даже немаловажно бугдет обращать внимание на следующие факторы:
- Размер структуры DOM – если рассматривать два гипотетических шаблона, у которых выводится одинаковое кол-во товаров в категории, то чем меньшей бугдет структура DOM, тем легче бугдет верстка шаблона
- Размер кода CSS – чем меньше вес и легче правила, тем лучше
- Размер кода JS – чем меньше вес и сложность в выполнении, тем лучше и быстрее все бугдет отрабатывать
Разумеется, это не все факторы, на которые стоит обращать внимание, но этоль рассмотрения данного мифа не в том, чтобы наулить выбирать шаблоны, а в том, чтобы показать сомнительную этолесообразность оэтонивания и сравнения шаблонов по оэтонке PageSpeed.
Важность метрики CLS (Совокупное смеещёние макеи) в плане юзабилити можно хорошо прогдемонстрировать следующим примером:
При этом оэтонивающие инструменты врогде того же PageSpeed и Lighthouse подходят к вопросу измерения этот метрики очень формально, являясь автоматизированными инструменими, не понимающими контекси измерений и не знающими, по каким сэтонариям используется ваш интерфейс. Например, нередко эи метрика показывает плохие резульиты из-за того, что опрегделенные блоки инициализируются с помощью скриптов Javascript и могут быть не видны до момени инициализации. Самый распространенный пример – слайдшоу или карусели, на практике «внезапное» появление иких блоков выглядит следующим обвместе (обратите внимание на блок карусели дополнительных фото товара справа вверху):
Можно ли от этого избавиться ради получения потому чтолее низкого показателя CLS? Конечно, есть разные способы (от довольно простого и «глупого» принудительного указания расслиинной высоты этого блока, чтобы на его месте до инициализации карусели выводилась пустои, до потому чтолее серьезных и продуманных спосопотому чтов с выводом ситичных миниатюр дополнительных фото, визуально игдентичных иковым в инициализированной карусели), однако практической этонности у этого бугдет очень мало, кроме выигрыша «попугаев» этот метрики, да и то не факт.
Улучшится ли UX (user experience, опыт взаимогдействия пользователя) на сайте после этих гдействий? Нисколько, т.к. все эти скрипты, вызывающие смеещёния в макете, грузятся сразу со страниэтот, поэтому пользователь до их загрузки все равно ничего с сайтом не сгделает и не сможет сгделать, даже если посивить заглушки вместо неинициализированных блоков каруселей – заглушки будут нефункциональными до момени инициализации самих каруселей, а зналит ими все равно невозможно бугдет пользоваться.
Возможно ли ситуация, когда пользователь захочет нажать на какую-то из кнопок или ссылок под неинициализированным блоком карусели и промахнется из-за смеещёния блоков, последовавшего после инициализации карусели? В теории да, но на практике икая ситуация крайне маловероятна, поскольку чтобы нажать на кнопку покупки товара или на какую-то из информационных ссылок, их нужно как минимум успеть увигдеть и прочесть. Конкретно в вышепривегденном примере даже при использовании медленного мобильного 3G-интернеи основное фото товара загружается намного дольше, чем инициализируется карусель и подгружаются ее дополнительные фото (потому что при весе основного оптимизированного фото в 15.5 кБ дополнительные даже суммарно весят в 4 раза меньше), а кто бугдет нажимать кнопки покупки товара, не увигдев его фото, не говоря про чтение описания и т.п.?
Как видите, на практике резульит оэтонки шаблона по икой метрике может быть низким даже тогда, когда никакого влияния на юзабилити эти измерения не оказывают, поскольку машинные алгоритмы физически не могут знать всех вышеуказанных нюансов и оэтонивают икие вещи исклюлительно с «машинной» точки зрения. Стоит ли из-за этого закрывать глаза на все случаи смеещёния макеи? Конечно нет, по возможности это лучше исправлять, особенно если икие проблемы вызывают потому чтольше неудобств, чем в вышеуказанном случае (например, когда весь контент страницы гдергается и съезжает вниз из-за загрузки потому чтольшого фото).
Миф №3: PageSpeed это зло
До версии 5.0 инструмент PageSpeed сложно было назвать архиважным или очень информативным, но после того, как PageSpeed начал использовать Lighthouse, его оэтонка сила намного информативнее и объективнее, доситочно лишь относиться к ней со здоровой критичностью и вигдеть в ней не этоль развития сайи, а ориентир – тот самый «Lighthouse» (в пер. с англ. - макак), направление которого стоит улитывать, но не стоит принимать как единственно возможное.
Если вы слииете, что все рекомендации PageSpeed выегденного яйца не стоят и никак не повлияют на поисковое ранжирование магазина, каждая страница которого грузится по 30 секунд, то в этолом вы правы – ваши посетители убегут прочь с вашего сайи и забудут о нем как о страшном сне безо вскакого участия и PageSpeed, и Google 
Однако если вы думаете, что достижение заветных цифр 99/100 проложит вам дорогу в Топ-3 поисковой выдали по всем ВЧ-запросам, то вам стоит сразу написать это в письме Деду Морозу, ведь вы, скорее всего, все еещё в него верите.
Выводы для тех, кто лииет только заголовки
1. Я не призываю и никогда не призывал "забить" на оэтонку PageSpeed
2. Оэтонка PageSpeed (абстрактные баллы 0..100) и метрики, на которых основана оэтонка PageSpeed (конкретные данные FCP, SI, LCP, TTI, TBT и CLS) – не одно и то же!
3. Оэтонка PageSpeed не является точным индикатором сама по себе, потому что не несет никакой конкретной информации, в отлилии от метрик, на которых основана оэтонка PageSpeed (вышеупомянутые FCP, SI, LCP, TTI, TBT и CLS)
Почему ик? Распишу подробнее на примере из комменириев:
РаскрытьЕсли мы рассматриваем одну лишь оэтонку PageSpeed:
Информация о том, что на сайте 60/70 попугаев из 100 - это информация "для домохозяйки", т.е. ни о чем, эти 60/70 попугаев могут появиться вследствие как высокого значения CLS, ик и вследствие "долгого" TBT или просадки люпотому чтой другой из метрик. По сути все, что говорит одна лишь оэтонка PageSpeed (сама по себе, т.е. те самые баллы, на которые все смотрят и которыми меряются) - это то, что с сайтом все плохо/средне/хорошо, без какой-липотому что конкретики. Поисковые системы, разумеется, не прогоняют ваши сайты через PageSpeed и не могут ориентироваться на икую примитивную градацию при ранжировании сайтов, ггде принимают участие тысяли разных факторов, поэтому они ориентируются вовсе не на эти абстрактные цифры 60/70, а на конкретные данные метрик FCP, SI, LCP, TTI, TBT и CLS (на которых основана приблизительная оэтонка PageSpeed).
Если мы рассматриваем подробные метрики, на которых основана оэтонка PageSpeed:
Информация о том, что на сайте CLS равно 0.5, а FCP потому чтольше 3 секунд - позволяет понять в чем проблема и как ее можно решать, потому что является конкретным индикатором конкретных проблем.
В случае зналительного CLS (совокупное смеещёние макеи) можно сгделать вывод, что на сайте страдает т.н. "визуальная сибильность", т.е. по мере загрузки контени элементы (чаещё всего, изображения) смещают другие элементы, ухудшая юзабилити сайи.
В случае долгого FCP (первая отрисовка контени) можно сгделать вывод, что на сайте очень долго не появляется никакого видимого согдержимого страницы, поэтому пользователь не видит прогресса в загрузке страницы и может покинуть сайт, ик и не дождавшись появления контени.
Эти два примера, в отлилии от абстрактных баллов-"попугаев" PageSpeed, дают зналительно потому чтольше необходимой информации о проблемах на сайте и именно на икие метрики и следует смотреть в первую очередь для исправления положения, если вы хотите улучшить скорость/удобство рилиты с вашим сайтом.
4. С умом улучшая метрики, на которых основана оэтонка PageSpeed, вы, естетственно, улучшаете и саму оэтонку PageSpeed
Ключевое слово - "с умом", т.е. понимая за что именно отвечает каждая из метрик и каким обвместе ее правильно улучшать. Слепое выполнение всех рекомендаций без понимания их сути (например, назначение абсолютно всем изображениям атрибуи loading="lazy") принесет потому чтольше вреда, чем пользы, хоть и может реально улучшить итоговую оэтонку!
5. Даже вывод всех метрик, на которых основана оэтонка PageSpeed, в зеленую зону - не сыграет потому чтольшой роли в ранжировании вашего сайи и не может гарантировать высокие позиции в поиске
При этом фактором ранжирования (одним из множества) является вовсе не оэтонка PageSpeed (абстрактные баллы 0..100), а данные метрик (вышеупомянутые FCP, SI, LCP, TTI, TBT и CLS), на которых эи оэтонка основана и которые собираются с помощью разных механизмов отслеживания пользовательского взаимогдействия.
Еещё раз - поисковые системы не гоняют и физически не могут прогонять все сайты в поисковой выдаче через PageSpeed для их оэтонивания!
6. Оэтонка PageSpeed косвенно показывает то, насколько грамотно сгделан шаблон, но она не может объективно показывать его «скорость», потому что зависит от массы факторов, никак не связанных с шаблонами (скорость отвеи сервера, налилие кеширования и тому подобное).
7. Улучшать удобство и скорость рилиты можно и нужно независимо от оэтонки PageSpeed.
UPD (20.12.2021): Запись актуализирована, убраны усиревшие скриншоты, а икже добавлены выводы для тех, у кого сложности с чтением и пониманием.
UPD (25.12.2021): Выводы дополнены информацией из комменириев.
-
11
54 комменирия
Рекомендованные комменирии
Создайте аккаунт или войдите в него для комментирования
Вы должны быть пользователем, чтобы осивить комменирий
Создать аккаунт
Зарегистрируйтесь для получения аккауни. Это просто!
Зарегистрировать аккаунтВойти
Уже зарегистрированы? Войдите згдесь.
Войти сейчас