Как проверить и улучшить скорость загрузки сайта

Как проверить и улучшить скорость загрузки сайта

Сегодня скорость загрузки сайта – очень важный показатель при ранжировании в поисковой выдаче. Внутреннее исследование корпорации Google, которое она провела в 2012 году, показало, что пользователь не готов ждать загрузку страницы дольше 3 секунд. Если в указанное время он не получит хоть какого-то контента, то с большой вероятностью просто вернётся к поиску и перейдёт вместо вашего сайта на другой.

Ещё один важный момент – решающим может стать даже промежуток времени в четверть секунды. Например, если ваши страницы будут грузиться дольше, чем у конкурентов, всего на 0,25 сек, то в дальнейшем пользователь будет отдавать предпочтение более быстрым сайтам при прочих равных показателях.

Чтобы владелец web-ресурса мог понять, что страницы его сайта загружаются медленно, Google реализовал специальный инструмент, который облегчает и автоматизирует процесс анализа. Этот инструмент называется PageSpeed Insights.

Немного о SEO и скорости конкурентов

Как бы там ни было, но Google, видимо, давно искал повод «порезать» выдачу очередной раз и нашел, к чему придраться. Уже в 2018 году IT-корпорация заявила, что будет понижать медленные сайты в поисковой выдаче. Следом за своим конкурентом на аналогичные меры пошёл и Яндекс.

Единственное, что остаётся владельцу сайта – выполнять требования поисковых гигантов и следить за тем, чтобы время загрузки страниц его сайтов было меньше, чем у конкурентов. Это очень важный момент, так как поисковые системы не будут выкидывать сайт из топа только лишь из-за того, что его страницы медленно грузятся, ведь у конкурентов ситуация может быть аналогичной или даже хуже. Но скорость загрузки официально признана одним из факторов ранжирования, поэтому игнорировать её никак уже не получится.

Как проверить свою скорость загрузки в Google PageSpeed Insights

Google PageSpeed Insights

Сервис доступен для любых пользователей на портале для разработчиков – PageSpeed Insights.

В специальном поле нужно указать исследуемый URL и нажать кнопку «Анализировать».

А можно просто использовать инструменты разработчика в браузере Google Chrome:

  1. При нажатии правой кнопкой в любом месте нужной страницы выбрать пункт «Посмотреть код». Или нажать комбинацию «Ctrl+Shift+I». Или просто кнопку F12.
  2. Перейти на вкладку Lighthouse.
  3. Нажать кнопку «Generate report» («Сформировать отчёт»).

Lighthouse

В качестве альтернативы можно использовать отчёт «Основные интернет-показатели» в панели вебмастера от Google для выбранного сайта. Он отражает наиболее достоверные данные о страницах, с привязкой к вашей аудитории и региону. Плюс – есть возможность просмотра отчёта в форме диаграммы с распределением оценок по конкретным URL (адресам страниц).

И если сервис PageSpeed Insights можно обмануть (например, подсунуть боту специальный код, который будет проходить тест на нужное количество баллов), то в панели вебмастера вы получаете всегда реальные результаты загрузки, так как статистика здесь основывается на данных, собранных из браузера Google Chrome (самый популярный браузер в мире, подробнее о нём и других браузерах можно почитать здесь).

Что нужно знать о процессе измерения

Сервис не привязывается к фиксированному времени загрузки, так как процесс измерения производится в различных тестовых средах, которые эмулируют не просто браузер пользователей, а полноценные устройства с характерными скоростями каналов доступа к сети Интернет.

Например, если речь о мобильных пользователях, то тест загрузки будет производиться на наиболее популярной модели смартфона, например, Nexus 5, и типовой для него скорости подключения – 3G, 8 Мбит, с задержкой примерно 150 миллисекунд.

Если речь о персональном компьютере, то это будут уже другие показатели производительности и скорости подключения.

Что получается на выходе? С одного типа устройств скорость загрузки может составлять 7-8 секунд (для ПК), а для другого – уже около 24 сек (для мобильных).

Именно поэтому оценка привязывается к баллам. Чем выше балл, тем лучше.

  • От 0 до 49 баллов (красный сектор) – «плохо»;
  • От 50 до 89 баллов (оранжевый цвет) – «требуются улучшения»;
  • От 90 до 100 баллов (зелёный цвет) – «скорость загрузки отличная».

Итоговая оценка формируется, исходя из весовых коэффициентов для составляющих показателей загрузки:

  1. LCP (отрисовка самого крупного контента), 0-2 сек – «хорошо», 2,5-4 сек – «умеренно», более 4 сек – «плохо». Здесь рассчитывается время, необходимое браузеру для отрисовки наиболее крупных элементов (изображений, видео и т.п.) в видимой области просмотра.
  2. SI (индекс скорости), от 0 до 4,3 сек – «хорошо», 4,4-5,8 сек – «умеренно», более 5,8 сек – «плохо». Измеряет, насколько быстро контент визуально отображается во время загрузки страницы (система сначала снимает видео загрузки страницы в браузере и затем вычисляет время на визуальный переход между отличающимися кадрами).
  3. CLS (совокупное смещение макета) – весовой коэффициент, который может принимать значения от 0 до 1 (чем ближе к единице, тем хуже). Он соответствует показателю смещения основных элементов в процессе загрузки страницы (если пользователь уже видит страницу, он не сможет ею воспользоваться, пока все элементы не прогрузятся, так как подгружаемые блоки, картинки, реклама и т.п., могут сдвигать отдельные элементы ниже, а значит, ими пользоваться пока нельзя).
  4. FCP (первое существенное отображение, время загрузки первого контента), 0-2 сек – «хорошо», 2-4 сек – «умеренно», более 4 сек – «плохо». Показатель времени, в течение которого пользователь сможет увидеть первый контент на странице (текст, изображения и т.д.).
  5. TTI (время до интерактивности, время загрузки для взаимодействия), 0-3,8 сек – «хорошо», 3,9-7,3 – «умеренно», более 7,3 – «плохо». Соответствует времени, когда завершилась самая долгая задача и основной поток готов к взаимодействию с пользователем.
  6. TBT (общее время блокировки), 0-300 миллисекунд – «хорошо», 300-600 миллисекунд – «умеренно», более 600 миллисекунд – «плохо». Показывает общее время между FCP и TTI, то есть, отображает, как долго основной поток был заблокирован и предотвращал реакцию на ввод.

В последней актуальной версии (v6) калькулятора Lighthouse значение весов показателей распределяется следующим образом (так они влияют на общую оценку):

FCP (First Contentful Paint) 15%;
SI (Speed Index) 15%;
LCP (Largest Contentful Paint) 25%;
TTI (Time to Interactive) 15%;
TBT (Total Blocking Time) 25%;
CLS (Cumulative Layout Shift) 5%;
Итого 100%;

Интересный факт: вы можете ничего не делать со своей страницей, и при этом её показатели со временем могут улучшиться. Главное – подождать, когда измерение скорости загрузки будет производиться на основе более производительных устройств с хорошим каналом подключения. Речь примерно о нескольких годах. Жаль, что за это время требования к измерению показателей тоже поменяются.

Ещё один важный момент – сервера сервиса Google PageSpeed Insights работают за пределами РФ, отсюда могут возникать некоторые задержки и искажения. Поэтому для повышения достоверности результатов можно воспользоваться аналогами, например, GTmetrix, Pingdom или Loading.express.

Можно ли «накрутить» показатели теста или обмануть PageSpeed Insights

Легко, достаточно сформировать для бота, который отвечает за анализ страницы (имеет идентификатор Chrome-Lighthouse) специальный код страницы, который будет проходить все тесты хоть на 100 баллов.

Простой пример такого кода:

	
	

<?php if (strops ($_SERVER['HTTP_USER_AGENT'],'Chrome-Lighthouse')):?>

//Здесь впишите код, который нужно показать боту PageSpeed Insights, чтобы пройти тест. Лучше всего вставить оптимизированный скриншот страницы, чтобы он был виден при прохождении теста.

<?php exit(); endif;?>

//А тут старый код вашей страницы, который будет показываться всем остальным.

Но делать так категорически не стоит. Дело в том, что реальные показатели загрузки страниц Google берёт не из истории анализа PageSpeed Insights, а из аналитических данных своего браузера. Попытка подтасовки результатов может отрицательно сказаться на SEO (поисковые системы могут принять в отношении «хитрого» сайта ручные меры и убрать из выдачи).

Распознать такие поддельные результаты очень просто – обратите внимание на количество элементов в структуре DOM (на обычной HTML-странице может содержаться до нескольких тысяч стилей).

Читайте также: лучшие платные VPN.

Какие выводы можно сделать по результатам замеров

Автоматический тест загрузки позволяет выявить слабые места сайта, CMS-системы, шаблона или отдельных элементов на странице, которым стоит уделить внимание.

Если вы получили низкие результаты оценки, не стоит сразу спешить всё исправлять. Такой отчёт носит рекомендательный характер. Чтобы успокоиться, достаточно проверить показатели страниц конкурентов. Они вряд ли будут окажутся лучше.

А, как мы помним, скорость загрузки – это только один из факторов ранжирования, но не самый приоритетный. Многие страницы крупных сайтов, особенно интернет-магазинов, могут загружаться по 20-30 секунд даже на ПК, и это считается нормальным.

Даже сайты поисковых систем не особо придерживаются своих рекомендаций, например, вместо современного формата изображений WebP продолжают использовать неоптимизированные PNG.

Большую часть рекомендаций система оценки сформирует автоматически. Например, может быть рекомендовано уменьшение (оптимизация) CSS-стилей, так как они содержат много избыточных записей, аналогично для JavaScript-кода, или система может посоветовать включение сжатия страниц при их отдаче с сервера, и т.д. Конкретный перечень действий будет зависеть от кода ваших страниц и настроек сервера.

Какие из этих рекомендаций выполнять и с каким приоритетом – решать только вам.

Как улучшить скорость загрузки сайта

После того, как вы получите перечень конкретный рекомендаций по вашим страницам, можно будет оценить масштаб работ и их необходимость. Где-то придётся поменять настройки сервера, где-то поможет установка специального модуля для вашей CMS (или сразу нескольких), может потребоваться переработка шаблона и т.д.

Универсального решения, подходящего любому сайту, не существует. Кроме того, многое будет зависеть от используемой платформы. Например, если речь идёт о платной CMS с закрытым кодом, то вам придётся смириться с ситуацией и ждать, когда разработчики уделят проблеме должное внимание. Бесплатные CMS с открытым кодом можно поправить самому или привлечь для этого профильных специалистов, но нужно понимать, что не все проблемы здесь будут решены. Какие-то движки, например, могут потребовать полной переработки логики, что не под силу отдельным фрилансерам, а вам выйдет накладно по финансам.

Какие-то задачи можно решить самостоятельно, например, оптимизировать изображения (для этого можно использовать специальные плагины CMS), если они есть, или стороннее программное обеспечение, которое позволяет автоматически «пережать» все имеющиеся изображения – и вам останется только загрузить их на хостинг. Вместо классического софта можно использовать специальные web-сервисы по оптимизации картинок, например, Compressor.io или TinyPng.

TinyPNG

Иногда много времени занимает загрузка web-шрифтов, особенно, если используются шрифты с сервиса Google Fonts. Их нужно подключать правильно, в соответствии с рекомендациями сервиса.

Включите кэширование. Иногда проблема решается на уровне web-сервера, где-то поможет специальный плагин (если используется CMS), а где-то придётся писать «свой велосипед» (с привлечением программистов).

Можно попробовать оптимизировать CSS и JavaScript, но без профильных знаний этим лучше не заниматься, в конечном итоге может получиться только хуже. Например, многие рекомендуют активировать асинхронную загрузку стилей, но важно понимать, что нельзя бездумно прописать этот параметр всем таблицам стилей. Иначе при загрузке страниц оформление будет меняться по мере загрузки кода, а значит, будут смещаться отдельные блоки (это свойство влияет на одну из метрик). Получается, что отдельные стили должны работать сразу, а какие-то надо подгружать в процессе. Разобраться, что куда, сможет только профессионал.

Чтобы активировать gzip-сжатие страниц на сервере, нужно менять его настройки, поэтому придется либо разбираться с настройкой текущей конфигурации самостоятельно (если у вас VPS или выделенный сервер), либо обращаться к провайдеру, а он может и не пойти на встречу.

И так далее. У каждой проблемы могут быть свои «подводные камни».

Поэтому для улучшения показателей загрузки лучше всего привлекать профессиональных разработчиков или агентства, если у вас крупный коммерческий проект.

Выводы

Знать показатели времени загрузки страниц своего сайта нужно. Это важно для SEO и для ваших пользователей. Игнорировать необходимость оптимизации нельзя, так как скорость загрузки теперь является одним из факторов ранжирования в поисковых системах.

Сервис Google PageSpeed Insights оценивает процесс загрузки комплексно и использует для этого сразу несколько ключевых метрик. В качестве результата выдаются не просто цифры, а перечень конкретных рекомендаций по их улучшению и оптимизации.

Прислушиваться к ним или нет, в каком порядке и как будут устраняться выявленные недостатки – решать только вам. Какие-то задачи можно решить без привлечения профессионалов, а какие-то можно доверить только специалистам. Сложность задачи и время на её реализацию оценить сложно. У каждого проекта и платформы могут быть свои особенности.

Стремиться к лучшим показателям скорости загрузки нужно всегда, но особое внимание им стоит уделять в случаях, когда сайты ваших конкурентов по выдаче грузятся быстрее.

» Статьи » Как проверить и улучшить скорость загрузки сайта