Verification: a143cc29221c9be0

Page speed insight google wordpress

Page speed insight google wordpress

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

У вас медленно грузится сайт, но есть отличный блог и User Friendly Interface? Жаль, клиент об этом никогда не узнает. Он закроет его раньше, чем увидит контент. А поисковые роботы после этого ещё и понизят страницу в выдаче. По данным Akamai, низкая скорость загрузки сайта способна испортить мнение о компании у 35% пользователей, а 22% посетителей не вернутся на страницу, которая работает некорректно. Скорость загрузки влияет и на индексацию новых страниц. Медленный сайт дольше отдает контент, а значит поисковые роботы тратят больше времени на обработку всех страниц. Как результат, новые страницы будут позже появляться в выдаче Google.

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

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

Здесь помогут специальные инструменты:

  • Google PageSpeed Insights и пункт в консоли Chrome Lighthouse
  • Pingdom
  • GTmetrix

Давайте посмотрим на реальном примере, как выдаёт рекомендации по ускорению сайта Google PageSpeed, и какие параметры входят в Core Web Vitals. Вводим нужный URL на странице PageSpeed, нажимаем «‎Анализировать»‎ и выбираем результат для компьютеров. Самые важные показатели выводятся первыми:

  • First Contentful Paint
  • Largest Contentful Paint
  • First Input Delay
  • Cumulative Layout Shift

как измерить скорость загрузки сайта

First Contentful Paint – скорость первого отклика. FCP показывает, через сколько секунд после клика на ссылку у пользователя на экране появляются первые признаки того, что сайт загружается. Если «‎признаки жизни» появились менее чем через секунду – это отличный показатель. Если на странице ничего не происходит спустя три секунды – это плохой знак. Скорее всего, пользователь уже закрыл вкладку.

Largest Contentful Paint – скорость загрузки основного контента. LCP показывает, как быстро пользователь увидит ключевую информацию на странице и сможет оценить, отвечает ли контент его запросу. Идеальный показатель – загрузка менее чем за 2,5 секунды. Если время загрузки страницы превышает четыре секунды, вы можете потерять потенциального покупателя.

First Input Delay — время отклика на действие клиента. FID показывает, с какой скоростью элементы страницы отвечают, когда по ним кликает посетитель. Значение менее ста миллисекунд говорит, что для пользователя переход на другую страницу или открытие картинки выглядит моментальным. Когда элемент реагирует на клик спустя триста и более миллисекунд, создается ощущение, что сайт подвисает.

Cumulative Layout Shift – показатель стабильности страницы. CLS измеряется в баллах и показывает, как часто пользователь может видеть смещение контента или полей на странице при её загрузке.

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

Последние три параметра – LCP, FID и CLS – это и есть основа Core Web Vitals. Помимо них в отчёте поданы значения параметров, которые имитируют загрузку страницы:

  • First Contentful Paint
  • Speed Index
  • Largest Contentful Paint
  • Time to Interactive
  • Total Blocking Time
  • Cumulative Layout Shift.

Чтобы изучить значение этих параметров, перейдите в сервисе в расширенный режим отображения. Для этого кликните на значок с полосками справа от надписи «‎Имитация загрузки страницы».

core web vitals_имитация загрузки страницы

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

Стандартные способы ускорения сайта на WordPress

Помимо рекомендаций PageSpeed Insights и других сервисов, существуют универсальные способы ускорить сайт на WordPress. Если вы столкнулись с низкой скоростью загрузки страниц, эти пункты стоит проверить в первую очередь.

Серверное и браузерное кэширование

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

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

Популярные WordPress-плагины для кэширования:

  • WP Rocket
  • W3 Total Cache
  • WP Super Cache

Использование CDN

Content Delivery Network (CDN) – это кластер из серверов, которые находятся в разных точках мира и передают информацию о сайте с ближайшей к пользователю машины. За счёт этого территориальная близость между сервером и клиентом помогает ускорить загрузку сайта.

Это затратный способ повысить скорость сайта, если использовать собственное оборудование. Он оправдан для международных компаний с клиентами и дистрибуцией в удаленных друг от друга странах. Местным блогам и интернет-магазинам лучше рассмотреть другие способы оптимизации. Международным компаниям, у которых пока нет больших бюджетов, можно бесплатно настроить CDN для WP с помощью плагина W3 Total Cache и сервиса Cloudflare.

Оптимизация кода

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

  • Autoptimize
  • WP Super Minify
  • WP Fastest Cache

Также сайт будет загружаться быстрее, если размещать CSS-файлы в начале страницы, а JS-файлы – в конце. Тогда браузер начнет обрабатывать скрипты после того, как загрузит содержимое страницы.

Плагины оптимизации

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

  • Image Optimizer
  • WP Smush
  • TinyPNG

Чтобы облегчить плагинам задачу и повлиять на финальный результат, используйте для фотографий формат JPEG, для иконок – SVG, иллюстраций ‎– PNG. Также приобретает популярность формат WebP, поскольку при аналогичном качестве он «‎легче», чем PNG и JPEG ‎— на 26% и 34% соответственно. Об этом говорят исследования, проведенные Google. 

Другие плагины, которые оптимизируют работу сайта, ‎– Clearfy, WP-Optimize, Easy&Fast Optimization. Они действуют по принципу CCleaner, удаляя дубли страниц и устаревшую информацию из баз данных.

Более мощное железо

Низкая производительность сайта не всегда связана с его оптимизацией. Интернет-магазин или блог могут работать медленнее, потому что хостинг не удовлетворяет их потребности в CPU или оперативной памяти. Если вы избавились от лишних плагинов и ненужных запросов в базе данных и не получили желаемый результат, есть смысл перейти на более высокий тарифный план или на другой вид хостинга. Компания HOSTiQ предлагает виртуальный, облачный, VPS и shared хостинг под различные цели.

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

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

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

оценка 100 из 100 в pagespeed insights

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

Методы обхода Google PageSpeed Insights

Варианты обхода системы замера скорости:

  • замена страницы сайта на скриншот, из-за чего загрузка, по сути, статичной и пустой картинки происходит в разы быстрее;
  • ввод определённого кода загрузки в файл index.php, который подменяет реальные страницы автоматически генерируемыми и регулярно заменяемыми «облегчёнными» картинками.

как программисты обходят google pagespeed insights

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

Как обнаружить искусственную накрутку скорости в Google PageSpeed Insights

Существует несколько показателей, которые могут указывать на факт накрутки показателей скорости загрузки. Что должно насторожить:

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

Что поможет улучшить показатели PageSpeed Insights

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

Примечание. Каждый раз при добавлении нового функционала проверяйте скорость отрисовки, изменяя скорость загрузки веб-ресурса на вкладке Network в Chrome Developer Tools.

Сжатие скриптов, стилей, HTML, файлов

Минификация относится к стандартным рекомендациям сервиса. Пользователю следует обращать внимание на размер загружаемых скриптов и стилей и научиться сжимать всё, что только можно. Хорошо работает технология кэширования с помощью прокси-сервера, который сокращает нагрузку на веб-серверы. Минификация направлена на уменьшение размера исходного кода, с такой задачей отлично справляется и утилита gzip, которая сжимает файлы. Для Firefox, Chrome и других браузеров на основе Chromium разработан Brotli — алгоритм сжатия данных с открытым исходным кодом.

Как оптимизировать загрузку текстовых ресурсов:

  • избегать лишних фрагментов HTML наподобие всплывающих окон;
  • предзагружать шрифты;
  • вынести в inline базу стилей для формирования основы веб-страницы и первого экрана, затем выполнить предзагрузку файла с остальными стилями (проверить код на наличие лишних стилей можно в UnusedCSS или PurifyCSS);
  • отказаться от больших сторонних библиотек — пользоваться JavaScript вместо Jquery.

Последний пункт не всегда удаётся соблюдать. Но и в этом случае вопрос оптимизации можно решить, если не подключать код, который использует Jquery в . Лучше подключать его как можно ниже на веб-странице. И стоит периодически применять Tree shaking — метод оптимизации библиотек, который позволяет удалить ненужный код из окончательного файла.

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

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

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

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

Изображения следует сжимать так, чтобы они при этом оставались вполне качественными. Удобно использовать формат webp, особенно для мобильных версий. PageSpeed Insights хорошо относится и к другим современным форматам — JPEG 2000, JPEG XR. С их помощью можно удачно сжимать картинки, только не все браузеры их поддерживают. А формат WebP совместим с большинством браузеров, но старшие версии браузера от Apple — исключение. В этом случае придётся раздавать изображения в исходном формате.

Иногда ресайзинг картинок под более маленький размер экрана позволяет удачно уменьшить размер объектов. Ещё один хороший способ улучшить загрузку веб-страниц на смартфонах — настроить автоматическую конвертацию изображений в формат WebP. При этом картинка будет в неплохом для телефона качестве, но её вес значительно уменьшится. Таким способом можно высвободить дополнительные 20-40% к скорости загрузки веб-страницы.

Использование CDN-сети для ускорения доставки объектов к пользователям

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

Хороший способ решить проблему — использовать CDN-сеть. Она помогает снизить задержки, так как сеть доставки объектов кэширует и хранит их на географически распределённых edge-серверах. И когда пользователь отправляет запрос, ему сразу поступает закэшированный вариант объекта с сервера, который ближе всего к пользователю. Получается, использование распределённого DNS помогает на доли секунды ускорить загрузку, что очень удобно для пользователя.

Подключение протокола HTTP/2

Протокол HTTP 1.1 имеет ограничение на количество подключений — максимум 6 на один домен. А при использовании HTTP/2 можно в параллельном режиме загружать любое количество объектов с одного домена одновременно. В итоге владелец сайта получает возможность сделать доставку контента более быстрой, и у пользователей веб-страницы загружаются быстрее.

Как ещё можно оценить скорость загрузки

Сервис PageSpeed Insights — не единственное правильное средство измерения скорости загрузки сайта. Важно также учитывать состояние операторских сетей и межоператорских стыков, задействованных в передаче данных. Многое зависит от конечного пользователя — проводное или беспроводное у него подключение, какова производительность устройства и в каком состоянии находятся ресурсы и ПО сервер, который обрабатывает запрос пользователя.

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

Чтобы оценить скорость загрузки объективно, нужно измерять её в браузерах или веб-приложениях фактических посетителей сайта. К примеру, можно использовать метод Real User Monitoring, то есть разместить на веб-страницах JS-код. При этом можно оценивать скорость доставки данных из двух и более источников. JS-код выполняет загрузку тестового объекта c подключённых к интернету серверов.