Качество работы веб-сайта всегда оказывало заметное влияние на пользовательский опыт в Интернете. Но оно не было главным фактором ранжирования для поисковых систем — до сих пор.
В этом месяце Google вводит новые показатели пользовательского опыта под названием Core Web Vitals, которые будут включать скорость и производительность веб-страницы в качестве сигналов ранжирования. Мотив заключается в том, чтобы поставить наиболее эффективный контент в центр внимания пользователей.
Подобное обновление алгоритма, несомненно, изменит SEO-рейтинг, особенно для сайтов с низкой производительностью или тяжелых сайтов, которые еще не учитывают CWV. Google предварительно анонсировал обновление почти год назад, чтобы дать владельцам сайтов и разработчикам достаточно времени для внесения необходимых изменений в производительность до официального внедрения.
В этой статье мы рассмотрим лучшие инструменты для того, чтобы начать оптимизацию вашего сайта WordPress уже сегодня, чтобы бизнес шел бесперебойно и дальше.
Почему стоит перейти на Core Web Vitals?
Существует измеримая связь между производительностью сайта и транзакционными коэффициентами конверсии, независимо от того, совершает ли пользователь покупку или нет. Исследование, проведенное Google в 2017 году, показало, что 53% мобильных пользователей покидают страницу, если ее загрузка занимает более трех секунд. По сути, несоответствие стандартам производительности может означать потерю половины вашей аудитории еще до того, как она просмотрит ваш контент — и именно в этом суть.
По своей сути Google полагается на разработчиков, которые не только знают о предстоящих изменениях, но и выполняют оптимизацию, необходимую для улучшения показателей CWV во всем Интернете.
Более подробный взгляд на три основных веб-показателя
Вкратце, Core Web Vitals — это новая метрика производительности, анализирующая время загрузки, интерактивности и визуальной стабилизации сайта для пользователя. Следует помнить, что мобильные и настольные сайты измеряются отдельно из-за существенных различий в форматировании, скорости передачи данных и вычислительной мощности.
Largest Contentful Paint (LCP) — измеряет время загрузки самого большого содержимого на странице. Эта метрика показывает пользователю, что страница является актуальной, полезной и здоровой. Быстрый LCP составляет <2,5 секунды.
Задержка первого ввода (FID) — измеряет время от первого взаимодействия пользователя со страницей до момента, когда браузер фактически обрабатывает и реагирует на это взаимодействие. У хорошо спроектированной страницы FID составляет <100 миллисекунд.
Кумулятивный сдвиг макета (CLS) — Сдвиг макета происходит, когда визуальный элемент меняет свое положение на странице и смещается вверх или вниз. Эта метрика измеряет общее количество неожиданных смещений макета, произошедших на странице. Хороший показатель CLS — <0,1.
В одном из будущих обновлений Google пообещал награждать веб-сайты, занимающие верхние строчки рейтинга пользовательского опыта, визуальным значком, чтобы браузерам было еще проще выбрать страницу с наилучшей информацией, а также наилучшим опытом.
Чтение «красных флагов» в отчетах о сравнительном анализе производительности
Рекомендации Google по инструментам тестирования производительности можно найти среди бесплатных предложений, представленных ниже. Каждый из них предоставит подробные отчеты, которые позволят вам приступить к конкретным действиям по улучшению производительности сайта. При изучении результатов различных тестов любые элементы, перечисленные красным цветом, будут для вас наиболее приоритетными, за ними последуют элементы оранжевого цвета.
PageSpeed Insights от Google — введя URL-адрес, вы получите подробный анализ всего, что мешает производительности вашего сайта для пользователей настольных и мобильных компьютеров, а также рекомендации по устранению каждой проблемы. (Профессиональный совет: Не сосредотачивайтесь на достижении идеальных 100/100, так как существует множество других факторов ранжирования, помимо CWV).
Pingdom — еще один полный сервис мониторинга сайта, который включает в себя мониторинг транзакций и серверов в дополнение к анализу скорости страниц. Из этих трех инструментов Pingdom является наименее детализированным, по крайней мере, когда дело доходит до определения пунктов действий.
GTmetrix — Оценка производительности представляет собой соотношение 70/30 от того, насколько быстро работает ваша страница и насколько хорошо она создана для оптимальной работы, соответственно. Красные флажки будет легче всего определить с помощью их инструментов.
Я хотел бы специально использовать GTmetrix для демонстрации того, как изучать результаты производительности, поскольку его красные флажки легче всего выявить. В качестве отправной точки мы будем использовать результаты для Google.com. Опять же, цель состоит в том, чтобы проанализировать результаты с учетом Core Web Vitals.
Summary and TTFB
Общая оценка письма, а также несколько подробностей о ваших CWV уже будут видны при первом просмотре сводки результатов производительности.
На временной шкале визуализации скорости обратите внимание на TTFB, или время до первого байта. Этот показатель в миллисекундах измеряет количество времени на создание соединения с сервером с момента первоначального запроса пользователя и загрузки контента. Красным флажком для TTFB будет время >500 мс. Решение проблемы медлительности в этой категории улучшит показатели задержки первого входа (FID).
Общим решением для медленных серверов является внедрение сети доставки контента (CDN), которая объединяет сеть серверов на границе вашего текущего хостинга. В результате пользователи получают гораздо более быструю загрузку, а время отказов резко сокращается.
Производительность
Следующая вкладка — Отчет о производительности, где вы хотите изучить «общее время блокировки». Это измеряет, сколько времени блокируется скриптами в процессе загрузки страницы. Это одна из самых распространенных проблем для сайтов WordPress. Отличным показателем для пользователей будет <150 мс.
Поддержка производительности GTmetrix сайта google.com с TTFB 218 мс.
Вкладка «Производительность» отчета GTmetrix по сайту google.com, где выделено общее время блокировки 34 мс.
Структура
Здесь вы можете просмотреть реальную, подробную структуру каждого отдельного элемента действий, выявленного GTmetrix. Используйте выпадающие стрелки, чтобы еще больше расширить рекомендации по каждому пункту.
Waterfall
Отчет Waterfall обеспечивает отличную визуализацию самых тяжелых элементов — тех, из-за которых ваш сайт загружается медленнее. Профессиональный совет: Сортируйте таблицу по размеру, чтобы быстро определить приоритетность самых серьезных проблем. Хотя в приведенном ниже примере нет элементов с красным флажком, все высокоприоритетные элементы будут выделены красным или оранжевым цветом, как и в остальных отчетах GTmetrix.
Главные вопросы и детали страниц
Эти отчеты — самая важная и оперативная информация, которую вы можете использовать для повышения производительности веб-сайта. Очевидно, что Топ проблем для Google — это ноль или ноль, но у вас могут появиться элементы, выделенные ярко-красным или оранжевым цветом.
Чуть ниже основных проблем находятся результаты Page Details, которые показывают время, необходимое для полной загрузки любой страницы. Наиболее приоритетными для вас будут общий размер страницы и общее количество запросов к странице. Вообще говоря, идеальный размер страницы — около 200 тысяч, а общее количество запросов должно быть менее 50.
Топ проблем и детали страниц в отчете GTMetrix на google.com
Не отчаивайтесь, если какие-либо из этих показателей страницы выглядят не очень хорошо. Существуют соответствующие инструменты, которые помогут вам бороться с минификацией изображений и кода, а также с другими красными и оранжевыми флажками, которые вы уже заметили. Давайте погрузимся в работу.
Рекомендуемые решения на основе плагинов
Любой хороший разработчик знает ценность хорошего плагина, и эти плагины — одни из лучших в своем деле в отношении веса страницы для производительности сайта. Эти рекомендации являются готовыми решениями «сделай сам» как для владельцев сайтов, так и для разработчиков.
WP Smush (и WP Smush Pro)
Этот плагин — номер один в оптимизации изображений, которая может иметь огромные преимущества для общего веса страницы и времени загрузки. Существует как бесплатная, так и платная версия, за $5/месяц после бесплатной пробной версии. По скромному мнению разработчика WordPress с 10-летним стажем, я использую Pro на своем сайте, и она стоит каждого пенни.
Приборная панель плагина Smush Pro, показывающая общую экономию пользователя в размере 134,8 МБ.
Обе версии работают автоматически для всех ваших будущих загрузок изображений, но версия Pro включает в себя обновленные функции, такие как ленивая загрузка и даже собственный CDN. В сравнении с несколькими другими популярными плагинами для сжатия изображений, Smush Pro оказался наиболее эффективным способом уменьшить общий вес страницы без ущерба для качества изображений. Его функция CDN не идет ни в какое сравнение со специализированными CDN-провайдерами. Однако оптимизация изображений принадлежит исключительно Smush Pro.
WP Rocket
Когда речь идет о сокращении общего времени запросов и блокировки http-страниц, этот плагин — ваш лучший друг. Его инструменты комбинирования и отсрочки CSS и JavaScript не имеют себе равных. Лицензия на один сайт стоит $49, но это один из самых быстрых способов улучшить показатели производительности благодаря агрессивным функциям кэширования и инструментам комбинирования/минификации кода.
Единственная загвоздка заключается в том, что этот плагин не подходит как перчатка к любой среде WordPress, особенно к тем, где установлено более горстки других активных плагинов. Если вы столкнулись с проблемами совместимости, просто деактивируйте WP Rocket и обратитесь за помощью к эксперту WordPress. Возможно, вам просто понадобится быстрое правило исключения CSS/JS, чтобы этот плагин стал дружелюбным к вашему сайту.