Пройдите все тесты CWV и PageSpeed ​​Insights с помощью этих методов разработки WordPress

В 2021 году в StrategiQ, цифровом агентстве полного цикла, базирующемся в Великобритании, мы поставили перед собой цель начать разработку каждого веб-сайта, который мы разрабатываем и запускаем, чтобы превзойти производительность Google Core Web Vitals (CWV) и PageSpeed ​​Insights (PSI). отчет.

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

Протестировать CWV очень просто — просто зайдите на https://pagespeed.web.dev/ и введите свой адрес. В верхней области отображаются последние реальные данные за последние 28 дней, а в нижней части (оценка из 100, как для мобильных устройств, так и для настольных компьютеров) — данные, сгенерированные в лаборатории.

Почему это важно? Ну, потому что Google так говорит.

В июле 2018 года Google объявил, что скорость является фактором, влияющим на то, как сайт отображается в результатах поиска, особенно на мобильных устройствах. Источник.

В 2020 году они также объявили, что показатели взаимодействия с пользователем (которые составляют Core Web Vitals / CVW) теперь используются при ранжировании сайтов. Источник.

Все просто: чем быстрее и лучше работает сайт, тем выше его рейтинг.

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

Стоит отметить, что CWV и PSI, как известно, трудно пройти. Подавляющее большинство сайтов этого не делают, даже многие из самых популярных сайтов в мире . Подумайте, YouTube, BBC, даже сами WP Engine изо всех сил пытаются получить пропуск как на мобильных устройствах, так и на настольных компьютерах ( извините, ребята ).

Итак, что мы сделали, чтобы убедиться, что мы увидели эти восхитительные пончики Green Pass?

Мы убрали все обратно и работали над одной простой мантрой:

Загружайте как можно меньше, как можно быстрее.

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

Во-первых, давайте поговорим об оборудовании. Мы не можем продолжить, не говоря сначала о WP Engine. Без сомнения, они являются одним из, если не лучшим поставщиком хостинга для WordPress. Мы были в восторге от впечатляющей поддержки, времени безотказной работы, среды для каждой установки, резервного копирования и простоты управления SSL-сертификатом и доменами среди многих других функций. Кроме того, их кэширование и жесткая оптимизация скорости гарантируют, что сайт будет работать настолько быстро, насколько это возможно на уровне сервера.

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

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

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

Я знаю, о чем вы думаете – приступайте к хорошему!

Я не буду утруждать себя перечислением обычных скучных вещей, которые вы видите в каждом посте в блоге, таких как «ленивая загрузка изображений». Но если вы этого не сделаете, это действительно необходимо — у нас есть функция изображения, которая распечатывает наши изображения, лениво загруженные с тегами srcset и size (известные как адаптивные изображения).

Давайте прямо в это.

Способ 1: порция и постановка в очередь

Такое случается часто: в проекте есть только один файл css и один файл js, и в итоге они раздуваются до размеров маленькой планеты. Что дальше? Google спрашивает вас: «Почему вы загружаете стили и не используете JavaScript на этой странице?». Почему? Почему?!

Это верный момент. Зачем вам загружать огромное количество css и javascript для всего веб-сайта, если вам нужна только часть этого на страницу?

Все наши сайты полностью построены из блоков Гутенберга. Это означает, что для каждого блока вы можете использовать блестящую мощь постановки ваших файлов css и js в очередь.

Для каждого блока мы создаем отдельный файл css и js только для этого файла (если требуется). Затем они минимизируются (см. следующий пункт для получения дополнительной информации) и ставятся в очередь поблочно.

Результат? Мы загружаем только то, что есть на каждой странице.

Способ 2: используйте средство запуска задач, например gulp, для объединения и минимизации ваших ресурсов.

Все сгенерированные активы минимизируются с помощью функции gulp (доступны и другие, например grunt). Стоит отметить, что много лет назад Google предпочел бы конкатенацию минимизации (один большой запрос был бы предпочтительнее, чем 5 маленьких запросов), но с появлением HTTP/2 (который мультиплексирует несколько запросов одновременно) это больше не является проблемой. проблема.

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

Способ 3: остановить рендеринг, блокирующий активы

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

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

Но как насчет FOUC (Flash of Unstyled Content), я слышал, вы говорите?

Способ 4: над сгибом css

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

Чтобы исправить это, мы разделили приведенные выше стили сгиба и добавили их как встроенный тег <style> в заголовок. Это не актив, блокирующий рендеринг, и мы не получаем FOUC.

Способ 5: WP Ракета

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

Результаты?

Что ж, баллы говорят сами за себя.

SportsAidEastern — благотворительная организация, поддерживающая британских спортсменов. Согласно PSI, сайт, который мы для них разработали, набирает колоссальные 97/100 баллов на мобильных устройствах и 100/100 на компьютерах.

Calligo предлагает услуги по преобразованию данных, а оценки их сайтов даже лучше, чем у SportsAid; почти идеальные 99/100 на мобильных устройствах и 100/100 на настольных компьютерах.

Вывод

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

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