Достижение лучших основных веб-жизненных показателей с помощью безголового WordPress

Опубликовано: 2022-05-05

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

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

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

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

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

Это показывает, насколько важным должен быть конечный пользователь во всех создаваемых вами впечатлениях, и это имеет реальные последствия: сайты с сильными Core Web Vitals конвертируют посетителей в клиентов с большей скоростью.

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

Испытайте мощь безголового, практического — зарегистрируйте бесплатную учетную запись песочницы Atlas сегодня!

В этом посте мы объясним, почему Headless WordPress — лучший стек технологий для обеспечения превосходного взаимодействия с пользователем с мощными Core Web Vitals — для вас и ваших клиентов. Вот что мы рассмотрим:

Оглавление
1. Что такое Core Web Vitals?
2. Восстание безголового WordPress
3. Atlas: полное безголовое решение для WordPress
4. Отказ от основных требований Web Vitals с помощью Atlas
5. Настройте, создайте и разверните свои сайты с помощью Faust.js и Atlas
6. Раскройте свой творческий потенциал с помощью Headless WordPress

Что такое Core Web Vitals?

Core Web Vitals — это подмножество сигналов взаимодействия со страницей, включенных в инициативу Google Web Vitals, которая предоставляет унифицированное руководство по сигналам качества, которые «необходимы для обеспечения отличного взаимодействия с пользователем в Интернете». По сути, эти показатели помогают убедиться, что ваш веб-сайт предоставляет то, что ищут посетители: предсказуемый, отзывчивый и быстрый контент.

Ожидается, что список Core Web Vitals со временем будет меняться, но текущий набор сосредоточен на трех основных областях: скорость загрузки страницы, интерактивность и визуальная стабильность через призму этих трех показателей:

Список основных веб-показателей Google
  • Крупнейшая отрисовка содержимого (LCP): измеряет производительность загрузки. Чтобы обеспечить хорошее взаимодействие с пользователем, LCP должен выполняться в течение 2,5 секунд после первой загрузки страницы.
  • Задержка первого ввода (FID): измеряет интерактивность — насколько быстро элементы сайта реагируют на щелчок или прикосновение. Чтобы обеспечить хорошее взаимодействие с пользователем, страницы должны иметь FID менее 100 миллисекунд.
  • Кумулятивное смещение макета (CLS): измеряет визуальную стабильность — если элементы сайта смещаются без щелчка или прикосновения. Чтобы обеспечить хорошее взаимодействие с пользователем, страницы должны поддерживать CLS менее 0,1.

Как отмечалось выше, Core Web Vitals теперь являются фактором ранжирования в алгоритме поиска Google, а это означает, что в результатах поиска предпочтение отдается сайтам с более высокой скоростью и лучшим пользовательским интерфейсом. Это немаловажно, так как сайты с сильными Core Web Vitals конвертируют посетителей в клиентов с большей скоростью, чем сайты с плохим UX, потому что они предлагают привлекательный пользовательский опыт и получают за это большую видимость!

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

Узнайте больше об измерении Core Web Vitals из этой бесплатной электронной книги!

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

Короче говоря, пользовательский опыт занял центральное место, и использование Core Web Vitals в качестве эталона для ваших веб-сайтов — отличный способ обеспечить постоянное превосходное взаимодействие с пользователями вашего сайта. Тем не менее, измерение для Core Web Vitals — это только часть уравнения.


Восстание безголового WordPress

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

Безголовый WordPress является ярким примером, так как все большее число владельцев и разработчиков сайтов стремятся объединить свои любимые интерфейсные фреймворки с самой популярной в мире CMS.

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

В случае с WordPress это позволяет создателям контента продолжать полагаться на свою любимую CMS с открытым исходным кодом, в то время как разработчики могут использовать такие инструменты, как Next.js, и выбранные ими современные интерфейсные фреймворки для создания невероятных веб-сайтов и приложений.

Хотите поэкспериментировать с безголовым без риска?

Зарегистрируйте бесплатную пробную учетную запись Atlas уже сегодня!

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

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

Поскольку создатели контента сталкиваются с более жесткими сроками и обращаются к решениям CMS «все в одном», они не всегда создают возможности, оптимизированные для конечного пользователя. На самом деле, менее 30% веб-сайтов, созданных на WordPress, имеют оптимальные показатели Core Web Vitals, и эта цифра становится ниже по мере оценки других платформ-конкурентов.

Сайты, созданные на платформе WP Engine, демонстрируют немедленный прирост — более 40% соответствуют здоровому порогу Core Web Vitals, — но по мере того, как владельцы и создатели сайтов ищут новые способы улучшить взаимодействие с пользователем, безголовая архитектура продолжает появляться как лучший способ создавать высокопроизводительные сайты с помощью инструментов, которые предпочитают как создатели контента, так и разработчики.

На самом деле, безголовые веб-сайты часто бьют по баллам Core Web Vitals прямо на пороге, при этом более 50% безголовых (интерфейсных) фреймворков регулярно достигают высоких показателей Core Web Vitals.

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


Atlas: полное безголовое решение для WordPress

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

Atlas обеспечивает поддержку всего, что нужно современному разработчику: несколько серверных сред, автоматическое развертывание из веток GitHub, статические и динамические безголовые архитектуры, выбранный вами фреймворк JavaScript — React, Angular, Vue.js или любой другой — и инструмент командной строки, который на 100% поддерживает сценарии.

В то же время Atlas сочетает предпочтительный опыт разработчиков с технологическим лидерством WordPress и WP Engine, делая счастливыми всех — от ваших разработчиков и создателей контента до ваших конечных пользователей.

С точки зрения производительности Atlas преображает. Поскольку WP Engine уже является самой быстрой управляемой платформой WordPress на планете, добавление Atlas и Node.js в стек увеличивает скорость в геометрической прогрессии, выполняя страницы в 10 раз быстрее, чем традиционный WordPress.

Конечный результат? Разработчики и создатели контента могут объединять усилия и создавать персонализированные интерфейсы с помощью Core Web Vitals, которые постоянно превосходят эталонные показатели.


Устранение основных требований Web Vitals с помощью Atlas

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

Android Authority, крупнейшее независимое издание, посвященное ОС Android, появилось вместе с WP Engine в 2019 году. По мере того, как их веб-сайт продолжал расти, цифровые команды Android Authority начали оценивать Headless WordPress как способ убедиться, что они строят на будущее с вариантами масштабируемости. и производительность, которая может удовлетворить их растущие потребности.

После обновления своего сайта с помощью Atlas, Android Authority добилась потрясающих результатов — 6-кратное увеличение показателей Google Lighthouse, включая Core Web Vitals, и более высокая скорость на настольных и мобильных устройствах, чем у любого из ее конкурентов.

Вы также можете воспользоваться преимуществами Atlas на практике, зарегистрировав бесплатную учетную запись песочницы Atlas на странице wpengine.com/atlas.

Учетная запись-песочница позволит вашей команде разработчиков погрузиться в работу с Atlas и включает в себя сайт-песочницу WordPress в сочетании с нашим «без-хостингом», который позволяет вам создавать и обслуживать внешний интерфейс вашего сайта без открытия учетной записи WP Engine.

Вы также найдете множество руководств и документации, а также дополнительные инструменты с открытым исходным кодом, включая Faust.js и Atlas Content Modeler (подробнее об этом ниже). Как всегда, если у вас есть какие-либо вопросы о доступе к Atlas, вы можете в любое время поговорить с одним из наших экспертов.


Настройте, создайте и разверните свои сайты с помощью Faust.js и Atlas

Один из самых быстрых способов начать работу с безголовым — использовать Faust.js, интерфейсную среду с открытым исходным кодом, которая упрощает выборку данных, рендеринг страниц и аутентификацию пользователей для безголового WordPress.

Faust.js фокусируется на предоставлении наилучшего опыта разработчика при создании с помощью Headless WordPress, сохраняя при этом знакомый опыт публикации WordPress.

Вот некоторые из функций, которые предоставляет Faust.js:

  • Генераторы статических сайтов и рендеринг на стороне сервера : Faust построен на основе Next.js, что позволяет вам использовать преимущества SSG и SSR, которые уже доступны с Next.js.
  • GraphQL : Faust использует передовой клиент GraphQL, который позволяет вам запрашивать WordPress WPGraphQL API без необходимости заранее знать запросы GraphQL. В первый раз, когда вы видите это в действии, это кажется волшебством, и Faust — первый фреймворк, предлагающий такую ​​функциональность. Никогда больше не думайте о написании запроса GraphQL!
  • Предварительный просмотр контента : Faust решает насущную проблему последовательного предварительного просмотра для Headless WordPress.
  • Аутентификация : Faust имеет встроенные механизмы для аутентификации с помощью вашего бэкэнда WordPress, поэтому вы можете легко создавать закрытый контент, опыт электронной коммерции или делать другие аутентифицированные запросы.
  • React : Faust позволяет вам создать весь интерфейс, используя самую популярную библиотеку интерфейса.
  • React hooks : Faust — это естественное расширение вашего WordPress API, потому что оно делает получение данных из WordPress невероятно простым.
  • Пользовательские типы записей : благодаря уникальному способу, которым Faust помогает вам извлекать данные, добавление пользовательских типов записей на ваш сайт WordPress, а затем доступ к ним во внешнем интерфейсе тривиальны.
  • Гибкость : Хотя Faust лучше всего работает при использовании Next.js и React, если вы хотите использовать другие инструменты, такие как Gatsby, Nuxt и SvelteKit, вы можете это сделать!

Нажмите здесь, чтобы начать работу с Faust прямо сейчас, или просмотрите этот пошаговый веб-семинар, чтобы подробно изучить инструменты, языки, API, фреймворки и многое другое, что вы будете использовать при создании нового фронта. -завершить опыт поверх Next.js и развернуть его с помощью Atlas.


Раскройте свой творческий потенциал с помощью Headless WordPress

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

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

Зарегистрируйте бесплатную учетную запись песочницы Atlas сегодня и получите практический опыт работы с Headless WordPress!