Tehnografi.com - Технологические новости, обзоры и советы

Что такое Google Lighthouse? Улучшите оценку Lighthouse для сайта WordPress

Следующая статья поможет вам: Что такое Google Lighthouse? Улучшите оценку Lighthouse для сайта WordPress

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

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

В результате владельцы веб-сайтов (а не только разработчики) уделяют больше внимания тому, как посетители и алгоритмы просматривают их веб-сайты, и проводят необходимые проверки, чтобы узнать больше и улучшить все недостающие области. И это подводит нас к теме сегодняшней статьи: Google Lighthouse.

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

Что такое Google Lighthouse?

Итак, что такое Маяк? Начнем с определения прямо из Google:

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

Любая веб-страница — общедоступная или требующая аутентификации — может быть запущена и проверена в Google Lighthouse. Аудит будет включать производительность, доступность, поисковую оптимизацию (SEO) и многое другое для заданных веб-страниц.

И помните показатели Core Web Vitals, о которых мы упоминали ранее? В 2021 году Lighthouse официально начал предлагать информацию о том, как оптимизировать основные показатели Web Vitalsтак как «эти показатели отражают загрузку, стабильность макета и готовность к взаимодействию».

Теперь, когда мы понимаем, что такое Google Lighthouse, давайте посмотрим, как он работает.

Как работает Маяк

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

Аудит Google Lighthouse

Google Lighthouse классифицирует свой аудит по пяти различным категориям для отчета:

  • Производительность
  • Лучшие практики
  • Доступность
  • SEO
  • Прогрессивные веб-приложения

Выбор, на каких (или всех) категориях сосредоточиться, находится в руках владельца или разработчика веб-сайта, в зависимости от их целей. Приведенные баллы представляют собой числа от 1 до 100, и веб-сайты тестируются на моделируемом 3G-соединении. Давайте рассмотрим, что влечет за собой каждая из этих пяти категорий.

Иметь ввиду:

Хорошей считается оценка от 50 до 89. Отличной считается оценка от 90 до 100. Цель состоит в том, чтобы набрать где-то от 90 до 100 баллов по каждой категории.

Производительность

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

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

Отчет Lighthouse о производительности будет включать раздел «Возможности». Здесь будут предложены предложения, как ускорить загрузку страницы. Вы можете ожидать найти такие рекомендации, как очистка JavaScript, сжатие изображений, отсрочка неиспользуемого CSS и так далее.

Лучшие практики

Lighthouse имеет около 16 лучших практик, по которым он проверяет ваш веб-сайт, в основном ориентированных на безопасность и безопасность веб-сайта. Некоторые примеры здесь включают анализ того, используется ли HTTPS или HTTP/2, поступают ли ресурсы из безопасных источников, есть ли недоступные для сканирования ссылки, а также оценки уязвимости библиотек JavaScript. Опять же, Lighthouse предложит рекомендации и в этой категории.

Доступность

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

SEO

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

Прогрессивные веб-приложения

Последняя категория анализирует прогрессивные веб-приложения (PWA), проверяя их по набору критериев. Здесь рассматриваются и оцениваются код ответа, работа в автономном режиме с доступом в Интернет, быстрая загрузка в 3G и многое другое.

В чем разница между Lighthouse и PageSpeed ​​Insights?

Вы можете задаться вопросом: «А как насчет PageSpeed ​​Insights?» PageSpeed ​​Insights похож на Lighthouse тем, что это также инструмент, который оценивает производительность веб-страницы. Он также включает рекомендации по улучшению. Однако между ними есть заметные различия.

Одно из основных отличий заключается в данных, используемых каждым инструментом. Lighthouse использует лабораторные данные для измерения производительности веб-сайта, тогда как PageSpeed ​​Insights использует как лабораторные, так и реальные данные (из отчета Chrome User Experience). Еще одно важное отличие заключается в том, что, как следует из названия, PageSpeed ​​Insights сосредоточен на производительности/скорости веб-сайта. Lighthouse, как вы можете видеть по перечисленным выше категориям, выходит за рамки производительности и включает в себя другие факторы, такие как доступность, SEO, безопасность и многое другое.

Как использовать Google Lighthouse для улучшения оценки сайта WordPress

Теперь, когда мы обрисовали в общих чертах, что такое Google Lighthouse и что он дает, давайте вернемся к вариантам запуска тестов. Хорошо, что есть несколько способов запуска тестов Lighthouse, поэтому вы обязательно найдете тот, который вам подходит!

Инструменты разработчика Chrome

После загрузки Google Chrome выполните следующие действия для проверки веб-страницы:

  • Откройте новую вкладку браузера в Chrome и откройте страницу, которую вы хотите проверить.
  • Щелкните правой кнопкой мыши страницу и выберите параметр «Проверить».
  • Откроется панель DevTools, и на панели инструментов выберите «Маяк».
  • Выберите конкретные категории, которые вы хотите проверить (или все), затем нажмите «Создать отчет».
  • После завершения аудита вы увидите результаты на своем экране.

Расширение Chrome

Как и в случае с Chrome DevTools, для этого варианта вам потребуется скачать Google Chrome. После этого выполните следующие действия:

  • Посетить Интернет-магазин Chrome и добавьте расширение Lighthouse в Chrome
  • После установки расширения перезапустите браузер, чтобы найти значок маяка справа от адресной строки.
  • Откройте веб-сайт, который вы хотите проверить, щелкните значок Lighthouse и выберите параметр «Создать отчет», который перенаправит вас на страницу отчета после завершения аудита.

Web.dev

Другой вариант — использовать web.dev. Для этого выполните следующие действия:

  • Перейти к web.dev страницу и введите веб-сайт, который вы хотите проверить, и нажмите «Выполнить аудит».
  • После завершения аудита будет представлен отчет

Узел

Наконец, вы можете использовать отчеты Node for Lighthouse. Как только вы установите Долгосрочная поддержка вариант для узла, выполните следующие действия:

Советы по тому, как заставить Lighthouse работать на вашем сайте WordPress

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

Следите за оценками и улучшениями

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

Регулярно тестируйте

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

Следуйте дополнительным советам, рекомендованным

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

Используйте его в сочетании с другими инструментами

Google Lighthouse действительно рассматривает ваш веб-сайт с разных точек зрения, предоставляя подробный отчет, в котором содержится много информации и идей. Однако, в конце концов, это всего лишь один из многих инструментов, которые вы можете использовать для оптимизации своего веб-сайта. Ранее, когда мы обрисовывали различия между Lighthouse и PageSpeed ​​Insights, мы отметили, что в последнем случае используются как лабораторные, так и реальные данные, а не только лабораторные данные. Использование других инструментов, таких как PageSpeed ​​Insights, по-прежнему является хорошей и полезной идеей, чтобы получить детальное представление о вашем веб-сайте с точки зрения пользователя и Google.

Оптимизируйте производительность WordPress на основе отчета Lighthouse с помощью 10Web Booster

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

Вы можете избавиться от догадок и ручного труда, выбрав мощный 10Web Booster, который автоматически позаботится об этих важных аспектах. С помощью 10Web Booster как внешний, так и внутренний интерфейс вашего веб-сайта автоматически оптимизируются, что означает:

  • 90+ баллов PageSpeed
  • Улучшены Core Web Vitals и все остальные показатели.
  • Более высокий рейтинг в поисковых системах
  • Увеличение конверсии до 7%
  • Увеличение вовлеченности посетителей до 40%
  • Повышение вовлеченности мобильного трафика до 53%
  • TTFB быстрее, чем 200 мс
  • Ускорение производительности сервера
  • Ускоритель производительности WordPress

С такими результатами Google Lighthouse (или PageSpeed ​​Insights) не узнает, что его поразило!

10Web Booster предлагает два варианта: Бесплатно и Премиум. В бесплатной версии плагин автоматически оптимизирует переднюю часть любого сайта WordPress для домашней страницы и 5 дополнительных страниц, поднимая ваш сайт до 1% самых быстро загружаемых веб-сайтов в мире, которые проходят оценку Core Web Vitals.тс.

С 10Web Boster Pro, тарифным планом Premium, вы получите отличную оптимизацию интерфейса и CDN Cloudflare для веб-сайтов, размещенных на любом хостинге. Благодаря партнерству 10Web Booster Pro и Cloudflare вы получите доступ ко всем функциям CDN автоматически, одним нажатием кнопки, через интерфейс 10Web.

Cloudflare CDN предлагает революционное решение для оптимизации скорости. Посетители со всего мира смогут получить доступ к вашему сайту менее чем за 100 мс. Через CDN вы получите уменьшенную задержку и ускоренную загрузку статического и динамического контента, а также сможете снизить затраты на пропускную способность на целых 60%.

У Cloudflare CDN, интегрированного в 10WebBooster, есть множество преимуществ, которые могут обеспечить максимальную скорость и производительность веб-сайта, а именно:

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

Это лишь некоторые из многих преимуществ CDN в дополнение к превосходным функциям 10Web Booster, которые обеспечивают:

  • Кэширование страниц и файлов для дальнейшего сокращения времени загрузки.
  • Минимизация и сжатие CSS, HTML и JS для уменьшения сетевого трафика и увеличения времени выполнения файлов, а также ускорения общей скорости интерфейса веб-сайта.
  • Отложенная загрузка изображений, iframe и видео для сокращения запросов при загрузке и повышения скорости страницы.
  • Оптимизация и сжатие изображений, доставляемые через CDN Cloudflare, чтобы обеспечить максимально быстрое время доставки.
  • Сбор всех правил CSS веб-сайта перед созданием критического CSS для правильного и безопасного рендеринга веб-страницы при загрузке.
  • Идентификация и разделение критических и некритических файлов Javascript и автоматическая задержка несущественных сценариев до взаимодействия с посетителем; все, не нарушая вашу веб-страницу.
  • Замена шрифта с помощью метода «font-display: swap», который сначала загружает шрифт по умолчанию, а после завершения загрузки пользовательского шрифта мгновенно заменяет шрифт по умолчанию на ваш собственный шрифт, тем самым повышая скорость страницы и устраняя появление Flash проблем с нестилизованным текстом (FOUT) или Flash of Invisible Text (FOIT).

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

с Cloudflare CDN сегодня и посмотрите, как ваши оценки Lighthouse не только улучшатся, но и станут стабильными. Скорость и производительность вашего сайта будут непревзойденными с 10Web.

Хотите мгновенно ускорить свой сайт?

Получите 90+ баллов PageSpeed ​​автоматически с помощью 10Web Booster ⚡
На любом хостинге!

Получите 10Web Booster, это бесплатно
Кредитная карта не требуется

И не просто верьте нам на слово, вот что сказал технический инфлюенсер Даррел Уилсон, когда он выбрал 10Web Booster: