Скорость загрузки сайта какая должна быть 2021

Какова нормальная-оптимальная скорость загрузки сайта?

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

У меня на сайте показывает 1 секунду в среднем. Смотрю по pr-cy.ru/speed_test

• Вопрос задан более трёх лет назад
• 37414 просмотров

• Facebook
• Вконтакте
• Twitter

Если вдруг кто увидит этот вопрос и ответы в 2020-2021, то знай.

Твой сайт быстрый, если загружается от 0 до 3 секунд.
Вес страницы не должен превышать 1000 килобайт.
Количество HTTP-запросов от 50 до 100 на страницу.

Как это всё измерить. Главное, не замеряй в одном сервисе. Их сейчас много.
Вот тут я описал их все: https://vc.ru/services/72263-20-instrumentov-dlya-.

А вот какими я сам пользуюсь, чтобы точно понять куда копать:

Сначала нужен экспресс отчет: https://loading.express — тут будет выжимка быстро и коротко.

Потом замеряю в https://www.webpagetest.org/, чтобы понять вес страницы и запросов сколько.

Ну и в конце смотрю на Google PageSpeed Insights.

• Facebook
• Вконтакте
• Twitter

• Facebook
• Вконтакте
• Twitter

• Facebook
• Вконтакте
• Twitter

Чаще всего на юзер экспириенс влияет не то, насколько быстро выполняются ваши скрипты (если, конечно, не присутствует откровенно неверное взаимодействие с базой данных), а тот факт, как грузится фронтэнд. Хорошо в этом вопросе разобрались ребята из Яху

В подавляющем большинстве ситуаций придерживание этих правил позволит не думать о том, что как грузится.

• Facebook
• Вконтакте
• Twitter

150 мс если память не изменяет примерно идет пакет из Европы в Америку. В пределах 100 мс на генерацию страницы считается нормальным во всяких Яндексах и Mail.ru. Итого 0.4 сек на запрос. Плюс после этого придется еще подгрузить CSS, картинки и JS. Делается это параллельно — итого 0.7 сек по идее ОК. Если больше, то нужно разбираться, во что упираетесь.

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

• Facebook
• Вконтакте
• Twitter

• Facebook
• Вконтакте
• Twitter

• Facebook
• Вконтакте
• Twitter

• Facebook
• Вконтакте
• Twitter

Что за бред. Как Вы мерите время? Только не говорите, что это время ответа сайта на localhost-е.

По факту: соединение (послание и возврат запроса) по http в среднем занимают 2 секунды. Остальное время фактически занимает обработка запроса сервером. Прорисовкой на клиенте можно пренебречь, т.к. она по времени очень мала. Время обработки запроса на сервере зависит напрямую от нагрузки на сервер (линейная зависимость).
Нужно получить среднее время выполнения скриптов (например, с помощью трассировки) умножить на ожидаемую нагрузку запросов в секунду и прибавить 2 секунды. В итоге вы получите время ответа на запрос в реальных условиях. Если оно в пределах 4 секунд, то вполне приемлемо.

• Facebook
• Вконтакте
• Twitter

Я написал, что на pr-cy.ru проверил — там 1 секунду показывает. А тут 2,8 с tools.pingdom.com/fpt/!

У хостеров спрашиваю — они говорят сайт нормально грузится — 2-3 секунды/.

Почему скорость загрузки сайта важна для SEO продвижения?

Для простого обывателя SEO может быть очень трудным предметом для понимания. Есть так много тонкостей, что можно легко потеряться. Существует термин, который мы используем в SEO, называемой информационной перегрузкой. Это термин, который является ссылкой на тот факт, что слишком много информации может нанести ущерб вашим усилиям в SEO оптимизации сайта.

Так наличие множества сложной информации может на самом деле запугать новичка от продолжения изучения и использования SEO. Кроме того, порой обнаруживается, что большая часть блога периодически срывает ту же информацию. В то время как большинство SEO сосредоточено на On-Site и Off-Site SEO, они, как правило, забывают, что существует не менее важный предмет, называемый техническим SEO.

Технический SEO — это улучшение вашего сайта, чтобы поисковая система могла легко сканировать ваш сайт.

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

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

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

Более быстрая скорость веб-сайта может помочь в следующем:

• Это фактор ранжирования. Таким образом, это может дать конкурентное преимущество в результатах поиска.
• Кроме этого, его реальная важность заключается в удержании на сайте потенциальный клиентов. Известно, что около 40% посетителей покидают веб-сайт, если загрузка занимает более 3 секунд.

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

Чем дольше сайт грузится, тем выше скорость выхода и отказов. Это связано с тем, что, если сайт не загружается, тогда интересный вариант является единственным жизнеспособным вариантом для трафика. Многие SEO считают, что более высокий уровень отказов и выход может повлиять на рейтинг сайта. Это тот показатель для Google, когда сайт может посчитаться низкого качества.

К счастью, есть много доступных инструментов, которые могут дать подробный отчет о скорости сайта. Вот несколько популярных систем:

• Статистика страниц Google
• Pingdom
• GTMetrix

Google Insights — это инструмент от Google, и это лучший способ оценить, как Google видит ваш сайт. Однако имейте в виду, что получение идеального результата в Google Page Insights весьма сложный процесс.

Проблема с Google Page Insights заключается в том, что она очень разборчива. Например, она может снизить ваш уровень, даже если одна из тысячи изображений на веб-сайте не оптимизирована.

GTMetrix — это инструмент, который так же широко используется. Он имеет самый широкий набор показателей, на который он тестирует сайты.

Вот пример сайтов, протестированных с помощью GTMetrix. Это то, что некачественный веб-сайт выглядит с точки зрения скорости сайта:

И совершенно по-иному смотрится весьма «продвинутый» сайт.

Среди многих других факторов важны следующие факторы:

Размер страницы. Чем больше размер страницы, тем дольше ваш сайт загружается. Кроме этого, чем сложнее кодирование вашей темы, тем больше будет ваш размер страницы.

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

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

TTFB: это время, необходимое веб-сайту для передачи первого байта информации пользователю. Фактически, это один из аспектов, который имеет самую высокую корреляцию в улучшении рейтинга сайта. Это как время ответа сервера, то есть, сколько времени потребовалось хосту (Bluehost, HostGator и т. д.) для получения запроса от пользователя (трафика), выполнить расчет, а затем отправить первый байт информации. Согласно рекомендациям Google для TTFB, он должен быть менее 200 мс. Это напрямую связано с хостом, который используется владельцем сайта.

Узнать TTFB своего сайта можно используя Pingdom или GTMetrix. Просто перейдите на вкладку «Водопад» и посмотрите запрос.

Итак, теперь понятна важность скорости сайта, некоторые термины, которые используются для понимания скорости сайта и как ее проверить.

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

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

Если вы серьезно относитесь к улучшению скорости вашего сайта, то вам нужно отказаться от пакетов общедоступного хостинга. Вам нужно подумать о том, чтобы получить что-то вроде VPS-хостинга или выделенного хостинга. Да, они могут быть дорогими, но это расходы, которые вы потратите на продвижение своего бизнеса.

Все обычные пакеты общедоступного хостинга никогда не могут соответствовать рекомендациям Google TTFB (менее 200 мс) для веб-сайта среднего размера. Фактически, средний TTFB от общего хостинга составляет около 500 мс, это особенно актуально, если вы устанавливаете сертификат SSL.

Вы не представляете, как оптимизированная тема может привести к увеличению скорости вашего веб-сайта. Если вы перейдете к GTMetrix, то заметите несколько показателей, которые определяют скорость сайта.

• Использовать кеширование браузера
• Встроенный малый JavaScript
• Inline Small CSS
• Уменьшить Javascript
• Мини-CSS
• Уменьшить HTML
• Удалить строки запроса из статических ресурсов
• Сделать меньше HTTP-запросов
• Удалить дубликаты JavaScript и CSS

И многое другое. Это рекомендации, которые предлагает GTMetrix для улучшения скорости сайта. Дело в том, что все эти рекомендации регулируются тем, насколько хорошо эта тема.

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

Подобные проблемы также можно решить, добавив несколько плагинов. Однако здесь есть значительная ошибка. Добавление дополнительных плагинов, в свою очередь, может замедлить работу вашего сайта еще дальше. Как правило, должно быть не более 10 подключаемых модулей одновременно. Остальное только увеличивает сложность веб-сайта. Кроме того, плагины могут также повредить стилю веб-ресурса.

Было время, когда можно было использовать полноразмерные изображения, такие как 1500 x 1500 пикселей, а затем уменьшились до 300 ? 300. Но это была огромная ошибка.

Для начала определите размеры изображений миниатюр, средних и больших размеров из параметров мультимедиа в настройках WordPress. Не используйте большое изображение в сообщении, где будет достаточно среднего изображения. Вы можете сэкономить много килобайт, просто сделав это.

Рекомендуемые изображения следует оптимизировать. Если ваш сайт имеет размер 600 ? 400, не размещайте изображение размером 1500 x 1200.

Все изображения на вашем сайте должны быть сжаты. Вы можете сделать это с помощью программного обеспечения для редактирования изображений, такого как Photoshop. Обычно используется Photoshop для сохранения jpeg-изображений с минимально возможным качеством.

Для подобной работы в WordPress есть плагины для выполнения максимального сжатия изображения.

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

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

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

�� Если Вам нужны услуги по внутренней оптимизации сайта и улучшения видимости в поисковых системах Яндекса и Google обращайтесь в нашу веб-студию SEO MASTER.

�� Понравилась статья? Присоединяйся к нам в социальной сети �� Вконтакте и Facebook, а также смотрите наш канал в �� YouTube. Получайте интересные статьи и новости сразу в свою ленту!

⚠ Вы хотите проверить качество сборки Вашего сайта? �� Вас не устраивает скорость работы, безопасность и прочие технические параметры, которые тормозят продвижение Вашего сайта в Google и Яндексе. �� Тогда Вам необходим комплексный аудит Вашего сайта, — ✍�� напишите нам �� на электронный адрес или наберите в ♻ WhatsApp наш номер ☎ +7 (916) 450-04-71, и мы Вам поможем.

�� И, пожалуйста, поделитесь своими наблюдениями в комментариях к данной статье или сделайте репост в социальных сетях!

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

Ваш сайт грузится одну, две, три или пять секунд? Казалось бы, разница небольшая. Но вот исследования говорят другое.

На что влияет скорость загрузки сайта? Когда пользователь готов подождать? Как повысить скорость загрузки сайта? Читайте в статье.

Что такое скорость загрузки сайта и почему она важна

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

Исследование Google говорит о том, что 53% пользователей закроют сайт, если он будет загружаться дольше трёх секунд. А если скорость загрузки страницы возрастёт с одной до десяти секунд, процент отказов увеличится на 123%.

В исследовании Portent есть данные о том, что конверсия с каждой дополнительной секундой загрузки сайта снижается на 4,2%.

У медленных страниц снижаются поведенческие факторы, а значит, их позиции в выдаче падают. В 2019 году Google заявил о том, что на ранжирование сайтов в их поисковой системе влияет, в том числе скорость загрузки сайта.

Яндекс в своём блоге также постоянно говорит о том, как важна скорость загрузки.

В каких случаях пользователь готов ждать

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

• Знакомый сайт

Например, он всегда покупает одежду в одном месте. Обычно этот сайт загружается нормально, но сегодня возникли какие-то трудности. Пользователь не только будет дожидаться загрузки, но и может вернуться на сайт через некоторое время.

• Социальные сети

То же самое и с соцсетями. Если любимый Instagram (организация, запрещенная на территории РФ) стал грузиться 5 секунд вместо 3, скорее всего, пользователь подождёт.

• Сайты государственных организаций

Загрузку сайтов типа Госуслуг пользователи готовы ждать хоть 10, хоть 20 секунд. Потому что на таких ресурсах оказывают важные услуги, которые в других местах получить нельзя.

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

Зачем увеличивать скорость загрузки сайта

• Конкуренция

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

• Повышение позиций в поиске

Мы уже говорили, что скорость загрузки влияет на позиции сайта в поисковиках. Это касается и Google, и Яндекс.

• Снижение процента отказов

Допустим, вы вкладываете большие деньги в рекламу. Пользователи на неё кликают, переходят на сайт, а он не грузится. Значит, вы просто сливаете деньги. То же самое и с SEO-оптимизацией. Даже если ваш сайт всё-таки займёт хорошее место в выдаче, пользователи не захотят ждать медленной загрузки и просто уйдут.

• Имидж компании

Если сайт грузится очень медленно, первое желание — это закрыть его и не возвращаться. Конечно, это негативно повлияет и на имидж вашего бренда.

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

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

1. PageSpeed Insights от Google

Бесплатный сервис

Один из самых популярных инструментов, с помощью которого можно проверить скорость загрузки сайта — Google Page Speed. Сервис показывает, как быстро сайт отображается на компьютерах и мобильных. Результат вы видите в баллах от 1 до 100. Помимо самой оценки скорости, инструмент даёт конкретные рекомендации о том, как эту скорость увеличить. Вы также можете видеть, насколько увеличится скорость загрузки, если вы исправите ошибки.

2. Яндекс.Метрика

Бесплатный сервис

Анализ скорости загрузки сайта можно провести и в Яндекс.Метрике. Инструмент покажет, с какой скоростью загружается ваш сайт у реальных пользователей. А также вы сможете найти страницы, которые грузятся медленнее всего.

3. WebPageTest

Бесплатный сервис

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

Бесплатный сервис с отдельными платными функциями

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

В платной версии можно проверить скорость отдельных страниц вашего сайта.

5. Site Speed

Бесплатный сервис

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

Бесплатный период — 30 дней

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

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

Бесплатный сервис

Тут можно проверить сайт на скорость загрузки и выбрать при этом регион, устройство, браузер, размер экрана и скорость интернета.

8. Pingdoom Tools

Бесплатный сервис

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

Сервис анализирует очень много факторов и даёт понять, что именно снижает скорость открытия сайта. Также есть список рекомендаций.

Бесплатный сервис с отдельными платными функциями

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

10. Dotcom-Monitor

Бесплатный сервис с отдельными платными функциями

Если для вашего сайта важна скорость загрузки из разных регионов, можно воспользоваться сервисом от Dotcom-Monitor. Он поможет измерить скорость загрузки сайта из 25 точек мира. При этом показатель замеряется при первом и повторном визите.

Что может плохо влиять на скорость загрузки сайта

• Скорость хостинга

Хостинг, на котором размещён сайт, должен максимально быстро генерировать содержимое страниц ресурса и отправлять их пользователю.

• Перегруженный код сайта

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

• Большое количество графических элементов

Если на сайте много анимации и интерактивных элементов, это точно повлияет на скорость его загрузки. Также перед размещением картинок и фотографий, желательно сжимать их размер. Если тяжёлых картинок на сайте много, скорость загрузки может увеличиться.

• Структура сайта

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

Как ускорить загрузку сайта: 3 совета

И вот вы проверили свой сайт и увидели, что он загружается больше 3-4 секунд. Что можно сделать? Как ускорить скорость загрузки сайта?

1. Сжать картинки

Если картинок на сайте слишком много, можно просто удалить лишние. Оставшиеся изображения конвертируем из формата PNG в JPEG. Так их размер проще уменьшить, не потеряв при этом качество.

2. Оптимизировать работу сервера

Данные можно сжимать также на его стороне. Подключить технологию GZIP помогут администраторы сервера, на котором находится сайт.

Также можно настроить кеширование. Эта технология позволяет сохранять объёмные элементы сайта в браузере пользователя. Тогда при повторном посещении страницы она загрузится быстрее.

Иногда оптимизация скорости загрузки сайта требует более серьёзных перемен, и приходится сменить хостинг.

3. Подключить Яндекс.Турбо и AMP от Google

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

4. Использовать плагины в CMS

Иногда сайты, расположенные на CMS-системах, загружаются медленнее. Дело в том, что CMS — это ещё один посредник между сервером и пользователем. За счёт этого время ожидания загрузки сайта может увеличиваться. Для того чтобы ускорить сайты на CMS, используются специальные плагины.

Итоги

Поисковики уже давно обращают внимание на скорость загрузки сайтов. Но сейчас это становится важно ещё больше. Например, в мае 2021 Google начнёт применять новый фактор ранжирования Core Web Vitals. Скорость загрузки занимает в нём одно из первых мест.

Поэтому даже если вас устраивают остальные показатели (трафик, процент отказов, конверсия), скорости сайта всё-таки придётся уделить внимание.

Скорость загрузки сайта и удобство страницы: анализ метрик и их влияние на SEO

Чем быстрее веб-страница загружается, тем удобнее она для пользователей. А насколько скорость загрузки важна для позиций в поиске?

Ни Google, ни другие поисковые системы не рассказывают, как конкретно они измеряют показатели скорости и насколько они влияют на ранжирование в поиске. Но сегодня можно быть уверенными, что удобство страниц становится важным фактором поискового продвижения. Оценка удобства страницы включает в себя несколько технических характеристик, в частности Core Web Vitals — метрики загрузки, интерактивности и визуальной стабильности. Если вкратце, то они оценивают не то, как быстро страница загружается, а то, как быстро рендерится первая видимая часть.

В этой статье мы поговорим об этих метриках детальнее и раскроем другие аспекты, влияющие на загрузку. Также мы объясним, как улучшив показатели скорости и производительности, можно повысить позиций в поиске.

Баланс между удобством и скоростью

Google запустил инструмент для анализа производительности сайта в 2013 году: PageSpeed Insights сканировал ресурс и давал ему оценку вместе с рекомендациями по загрузке. Но этот анализ был не очень точным и репрезентативным. В 2018-м инструмент получил улучшенный алгоритм Lighthouse — с тех пор анализ скорости стал объективнее, так как инструмент начал оценивать рендеринг страницы. В 2021 году метрики удобства страницы выходят на передний план и станут важным аспектом ранжирования.

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

UX важен для всех поисковых систем: в руководстве Bing «положительный пользовательский опыт» признан более значимым, чем быстрая загрузка страниц, документация Yahoo! тоже указывает на приоритет удобства для пользователей в оценке скорости.

Процесс загрузки страницы от «а» до «я»

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

Незаметный для пользователя секундный процесс включает в себя несколько этапов:

• Юзер вводит URL-адрес или переходит по ссылке, отправляя запрос серверу.
• Сервер обрабатывает запрос и отправляет HTML браузеру.
• Браузер строит DOM-дерево (Document Object Model, модель страницы из HTML-объектов) и парсит CSS-атрибуты.
• Браузер рендерит страницу в соответствии с версткой, стилями и присутствующими элементами.

Метрики для анализа загрузки и удобства

На поведенческие факторы влияет несколько аспектов. Визуальная и смысловая составляющие важны для восприятия страницы, но основой всему остальному служат технические параметры — их оценивают метрики удобства страницы (page experience) в системе ранжирования Google.

Оценка удобства страницы включает:

• Параметры Core Web Vitals: Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS). Они отвечают за скорость загрузки, интерактивность страницы и стабильность верстки.
• Дизайн, оптимизированный для мобильных устройств. Мобильный поиск становится все популярнее, поэтому адаптивный дизайн — один из приоритетов для поисковиков. Инструмент Google TestMySite анализирует загрузку страницы на мобильных устройствах. Также существуют отдельные онлайн-сервисы для аналогичной проверки.
• Безопасный поиск. Алгоритм Safe Browsing проверяет сайты на наличие вредоносных факторов.
• Протокол HTTPS. Google маркирует все HTTP-сайты как небезопасные с июля 2018 года, так что если вы до сих пор не переехали на HTTPS, стоит этим заняться. Узнайте, как перевести сайт на HTTPS без потерь трафика из нашей статьи.
• Беспрепятственный доступ (отсутствие назойливых межстраничных объявлений). Межстраничные объявления (например, попапы) могут привести к штрафам от Google. Не подлежат штрафам объявления адекватного размера, которые не всплывают слишком неожиданно для пользователей, диалоговые окна для логина или вывода информации, требуемой по закону (например, о файлах cookie).

Рассмотрим детальнее параметры Core Web Vitals и способы их вычисления.

Largest Contentful Paint

Поисковые системы обращают внимание не на то, как быстро загрузится вся страница, а на то, как быстро станет доступным первый рендер (то есть первый экран, с которым можно взаимодействовать). Для пользователей точно так же важно, чтобы первый видимый фрагмент побыстрее стал читабельным и интерактивным. Largest Contentful Paint (LCP) — буквально «отрисовка самого большого элемента контента» — это изображение или текстовый блок, занимающий больше всего места на первом экране.

Типы файлов, которые могут быть самым большим элементом контента:

• Изображения (<img>)
• Изображения внутри svg-объектов (<image> внутри <svg>)
• Видео (<video>)
• Фоновые изображения, загруженные с помощью функции url()
• Блочные элементы с текстовыми узлами

Что влияет на загрузку LCP:

• Время ответа сервера. Оно зависит от многих факторов — провайдера хостинга, системы управления контентом, задействованных баз данных и др.
• Блокирующие рендеринг JavaScript и CSS. Именно файлы JavaScript и CSS отвечают за интерактивность и визуальную привлекательность страницы. При обработке HTML браузер встречает JS- and CSS-файлы, которые нужно выгружать из сервера, — из-за этого тормозится процесс рендеринга.
• Время загрузки ресурсов. На показатель LCP влияет время загрузки ресурсов страницы — кода, картинок, видео.
• Тип рендеринга. Рендеринг JavaScript может осуществляться на стороне клиента и на стороне сервера. В первом случае рендеринг происходит непосредственно в браузере, а во втором браузер получает уже предварительно отрендеренный контент страницы из HTML-документа, запрошенного у сервера.

2.5 секунды и меньше — хороший показатель LCP.

Метрики Time to First Byte (время до первого байта) и First Contentful Paint (первый отрисованный элемент контента) тоже полезны в анализе LCP и скорости загрузки сайта в целом. Раньше для оценки скорости использовали FCP и First Meaningful Paint (первый значимый отрисованный элемент), но измерения FMP были во многом неточными и их сложно было стандартизировать для всех браузеров. В результате Google пришел к LCP как к более объективной метрике.

Чтобы вы не путались в этих показателях, подсуммируем их отличия:

• FCP — любой отдельный элемент, который первым появляется на странице
• FMP — самый большой сдвиг верстки в первом экране
• LCP — самый большой отдельный элемент, показанный в первом экране

First Input Delay

Метрика First Input Delay (буквально «задержка первого ввода») определяет то, как быстро страница становится интерактивной. Любой кликабельный элемент должен побыстрее обрабатываться браузером — а зависит это от собственного и стороннего кода, который используется для интерактивного контента.

Измерение FID нельзя симулировать в тестовой среде, потому что реальное взаимодействие юзеров — которые могут кликнуть по любому элементу в любой момент, или по нескольким сразу или подряд — может приводить к разным задержкам. Можно определить параметр FID по JavaScript с помощью Event Timing API, библиотеки web-vitals или библиотеки от GoogleChromeLabs.

Раньше в отчете Lighthouse можно было просмотреть показатель Max Potential First Input Delay (максимально возможная задержка первого ввода) — система анализировала основной поток выполнения и рассчитывала самый худший вариант задержки. Сейчас отчет включает две другие метрики, так или иначе связанные с FID:

• Time To Interactive (время до интерактивности) — то, как быстро страница становится полностью интерактивной (когда со всеми ее элементами можно взаимодействовать).
• Total Blocking Time (общее время блокировки) — промежуток времени после рендеринга FCP (первого элемента контента) до возможности взаимодействия со всей страницей (TTI). Эта метрика подобна FID, но она высчитывает время без учета реальных пользователей — добавляя все долгие JavaScript-задачи, блокирующие основной поток выполнения.

Для анализа интерактивности сайта стоит учитывать и FID, и TBT. Последнюю метрику вы можете увидеть в отчете Lighthouse:

Несколько уточнений об измерении FID:

• Значения FID зависят от каждой конкретной загрузки страницы реальным пользователем.
• Показатель FID не зафиксируется, если пользователь никак не взаимодействует со страницей.
• Измерения FID будут необъективными, если страница загружена в фоновой вкладке, потому что первое взаимодействие происходит не сразу после загрузки.

Хороший показатель FID — менее 100 миллисекунд.

Cumulative Layout Shift

Метрика Cumulative Layout Shift (совокупное смещение верстки) показывает, как быстро стабилизируется верстка страницы. Если ресурсы страницы загружаются асинхронно или DOM-элементы добавляются динамически, какие-то фрагменты могут смещаться во время загрузки. Низкий показатель CLS гарантирует легкое и беспрепятственное взаимодействие с веб-страницей.

Какие элементы могут быть причиной сдвига верстки:

• Изображения и видео с неуказанными размерами
• Шрифты, отличающиеся по размеру от резервных шрифтов
• Сторонние виджеты или рекламные блоки, динамически изменяющие размер

Если текстовый или любой другой блок смещается в то время как пользователь с ним ознакамливается — это нарушает процесс взаимодействия со страницей и может стать причиной ухода с сайта. Одно дело, если сдвиг происходит во время чтения и скроллинга страницы, и другое дело, если юзер нажимает на кнопку или ссылку, но получает совершенно неожиданный результат. Важно минимизировать смещение верстки, чтобы предотвратить некорректные итоги пользовательских действий.

Показатель CLS — произведение «доли воздействия» и «доли расстояния». Доля воздействия — размер той части страницы, на которой размещены нестабильные элементы. Она рассчитывается путем деления площади нестабильной области на площадь области просмотра. Доля расстояния — показатель смещения верстки в рамках экрана. Она рассчитывается путем деления самого большого расстояния сдвига на самую большую высоту экрана.

Давайте рассчитаем CLS по указанным на картинке выше данным. Доля воздействия — 0.375, доля расстояния — 0.125, так что показатель CLS равен 0.046875.

Показатель CLS ниже 0.1 считается хорошим, 0.1-0.25 требует улучшения, а выше 0.25 сигнализирует о серьезных проблемах.

Вы можете быстро оценить CLS любого сайта с помощью онлайн-калькуляторов:

Что можно сделать, чтобы улучшить CLS:

• Не размещайте контент поверх уже существующего.
• Указывайте размеры изображений и видео. Если вы используете адаптивные изображения, браузер сам их размещает по странице в зависимости от размеров экрана девайса. Чтобы избежать сдвигов, нужно прописывать пропорции в CSS или в атрибуте srcset.
• Используйте CSS-свойство transform для анимаций.
• Используйте CSS-значения font:display для шрифтов или предварительно загружайте файлы шрифтов.
• Указывайте точные параметры для рекламных блоков или используйте изначально фиксированные по размеру объявления.

Какие смещения не влияют на параметр CLS:

• Намеренные изменения верстки, вызванные пользователем
• Движение элементов, не отображаемых в окне экрана
• Смещения, вызванные добавлением нового элемента в DOM (если при этом существующие элементы не меняют своего начального положения)

Измерения CLS варьируются в зависимости от инструмента: данные мониторинга реальных юзеров включают сдвиги верстки, произошедшие только до первого рендеринга, а синтетические инструменты будут продолжать собирать смещения, пока страница полностью не загрузится. Чтобы получить объективную оценку, комбинируйте оба подхода.

Инструменты для измерения Core Web Vitals

Оценить сайт по параметрам Core Web Vitals можно с помощью отчета Chrome User Experience (CrUX), собирающего данные пользователей Chrome, инструмента PageSpeed Insights, который включает данные CrUX, или отчета Core Web Vitals в Google Search Console. Без учета пользовательских данных эти метрики можно проанализировать с помощью Chrome DevTools и Lighthouse.

Кроме этого существует множество онлайн-инструментов, которые мониторят разные показатели производительности сайта, включая Core Web Vitals. «Аудит сайта» в SE Ranking тоже включает в себя оценку этих метрик:

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

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

Основные аспекты улучшения работы сайта:

• Минимизация кода
• Оптимизация визуального контента
• Апгрейд хостинга

Давайте рассмотрим их детальнее.

Оптимизация JS, CSS, HTML

Ускорить загрузку сайта можно, удалив ненужные или блокирующие рендеринг ресурсы.

Минификация

Первое, что стоит сделать, для оптимизации загрузки сайта, — определить части кода, которые не используются, и удалить их. Этот процесс называется минификацией. Можно минимизировать код вручную или с помощью автоматизированных решений — например, Google рекомендует CSSNano и UglifyJS. Сеть доставки контента (CDN) тоже может автоматически минимизировать и сжимать файлы кода.

Чтобы определить, какой код не используется для работы сайта, можно воспользоваться Developer Tools в Chrome — перейдите во вкладку Sources в верхнем меню и Coverage в нижнем. Инструмент покажет реальную статистику по файлам JS и CSS и укажет размеры и процентное соотношение лишних файлов:

Проверить, какая часть JS- и CSS-кода не минимизирована, можно и в «Аудите сайта» SE Ranking — в разделе «Отчет об ошибках»:

В этом инструменте вы также можете проверить соотношение текста к HTML: слишком низкий показатель может сигнализировать о лишнем HTML-коде, который тормозит страницу. Хорошее соотношение — 20-70%.

Адаптация под разные устройства

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

Встроенный стиль

Встроенный CSS используется для применения уникального стиля под каждый отдельный HTML-элемент. С ним браузер не будет загружать CSS-файлы (потому что стиль будет встроен в HTML-код) и рендеринг ускорится. Но с таким кодом сложнее работать, поэтому используйте встроенный стиль только при небольшом количестве CSS в целом.

Постепенный рендеринг

Когда браузер натыкается на файлы CSS или JS перед первым рендером, выполнение этих файлов приостанавливает процесс загрузки. Стоит определить, какие ресурсы на странице могут блокировать рендеринг, — для этого можно запустить проверку с помощью WebPageTest:

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

Например, кнопки для распространения в соцсетях можно отображать не сразу — для этого нужно использовать асинхронную JavaScript-загрузку. Два атрибута помогают распределить скрипты и сделать рендеринг постепенным: async и defer. Их можно применять к собственному и стороннему JS-коду, сокращая время парсинга HTML без ущерба для отображения контента страницы.

Оптимизация изображений и видео

Очень важно оптимизировать визуальные материалы, ведь они занимают в среднем 21% веса страницы. Вы можете узнать больше деталей о SEO для изображений из нашего гайда, а здесь мы продублируем самые главные способы оптимизации визуального контента:

• Используйте форматы, поддерживаемые всеми браузерами. Самые распространенные и беспроигрышные форматы — JPEG и PNG; WebP — многообещающий в плане качественного сжатия формат, но пока не доступен во всех браузерах; GIF можно использовать, если размер не слишком большой, или же конвертировать в видеофайл.
• Сжимайте изображения без существенной потери качества. Можно пользоваться онлайн-инструментами или встроенными в CMS решениями для сжатия.
• Указывайте несколько пропорций изображений, чтобы они выглядели как нужно на любом устройстве. Большинство CMS способны сделать это автоматически.
• Используйте асинхронную загрузку, если на странице много изображений. Сделать это можно с помощью ленивой загрузки или атрибута decoding=async.
• Храните большие видеофайлы на сторонних сайтах, чтобы уменьшить нагрузку при отображении сайта.

В «Аудите сайта» SE Ranking, в разделе «Найденные ресурсы», можно просмотреть размеры изображений и время их загрузки:

Оптимизация сервера

С помощью инструмента SE Ranking вы также можете проанализировать общую ситуацию скорости ответов сервера:

Кроме файлов кода и других ресурсов на сайте на время ответа сервера влияют:

• Возможности девайса и качество связи со стороны пользователя
• Количество получаемого сайтом трафика
• Ресурсы на каждой странице
• Выбранный провайдер и тип хостинга
• CMS и подключенные к ней плагины

Оборудование и сетевое подключение

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

Хостинг и CDN

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

Выделенный сервер — всегда лучший выбор, потому что так вы не будете делить сервер с другими сайтами. Как промежуточный вариант можно рассматривать виртуальный приватный сервер (VPS), который является совместным, но имитирует выделенный сервер.

Также задумайтесь об использовании сети доставки контента (CDN), в частности если вы целитесь на пользователей из разных стран и регионов. Эта инфраструктура распределяет нагрузку между несколькими серверами, расположенными в разных географических точках.

Кэширование

С помощью кэширования можно дать указания серверу или браузеру хранить ранее загруженный контент — так они не будут обрабатывать страницу, когда пользователь зайдет на нее повторно. Загрузка из кэша минимизирует нагрузку на сервер и улучшает производительность — например, исследование Kinsta показало, что кэширование на стороне сервера может уменьшить время загрузки на целых 30%. Можно настроить кэширование вручную в коде или с помощью плагинов вроде WP Rocket и W3 Total Cache. Некоторые провайдеры хостинга автоматически отправляют статический контент в кэш.

Редиректы

Каждый настроенный редирект замедляет процесс загрузки страницы, поэтому стоит проверять их количество и избегать проблем с цепочками перенаправлений. Узнайте больше о работе редиректов из нашего гайда, а пока разберемся с тем, как их отслеживать. В «Аудите сайта» SE Ranking вы можете просматривать список настроенных редиректов и их ответы сервера, определяя проблемные моменты:

Проверка плагинов

Еще один фактор влияния на скорость и производительность сайта — плагины. Используйте самые актуальные версии CMS и плагинов и следите, чтобы они работали на последней версии PHP. С помощью онлайн-инструментов проверяйте плагины на предмет использования памяти и влияния на скорость загрузки:

Чеклист оптимизации загрузки сайта

Подобьем итоги — почему важно улучшать показатели загрузки сайта и удобства страниц: