Анализ веб-приложений с помощью Lighthouse от Google

13-11-2019

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

Через PageSpeed Insights

Заходите на PageSpeed Insights и осуществляйте проверку ресурса (отсутствует проверка PWA - "Progressive Web App");

Через web.dev

Зайти на web.dev и протестировать свой сайт (отсутствует проверка PWA);

Но сейчас в арсенале похожих инструментов появился Lighthouse от Google. Если Вы хотите улучшить производительность своего сайта, его доступность и SEO в целом, обратите внимание на Google Lighthouse. Lighthouse – это компактный, но мощный инструмент тестирования, который проверит основные показатели вашего сайта и предложит рекомендации по улучшению его производительности. 13 ноября 2018 года компания Google выпустила инструмент Lighthouse для комплексной проверки сайта. Lighthouse анализирует веб-приложения и веб-страницы, собирает современные показатели производительности и анализирует лучшие практики разработчиков. Его задача – взять ваше приложение/ сайт, проанализировать его и сгенерировать отчет, в котором информация о том, что можно улучшить. В сгенерированном документе вы увидите разделы «Производительность», «Прогрессивное веб-приложение», «Специальные возможности», «Лучшие практики» и SEO, которые разложены по полочкам и позволяют просматривать данные аудита. Инструмент Lighthouse полезен тем, кто проводит комплексную проверку сайтов для повышения общей производительности, маркетинговой эффективности, совершенствования имиджевой составляющей. Для того чтобы у вас была возможность анализировать производительность и качество своего сайта, Google создали автоматический инструмент Lighthouse с открытым исходным кодом.

Зачем это Google?

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

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

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

Lighthouse предназначен для тех, кто хочет улучшить производительность своего сайта и применить некоторые хитрости, чтобы подняться в рейтинге Google. Инструмент содержит 111 аудитов, распределенных по 5 разделам: Performance, PWA, Best Practices, SEO, Accessibility. Lighthouse отличный помощник для SEO-продвижения. После его использования вы получите рекомендации по таким категориям:

  • Сбор данных и индексация – проверка на доступность ботам;
  • Использование контента – корректное оформление;
  • Мобильная версия – убедитесь, что пользователям на телефонах не придётся уменьшать масштаб и читать мелкий шрифт.

Почему Lighthouse необходимо регулярно использовать для тестирования сайта

Является ли Lighthouse всеобъемлющим инструментом, который способен проверить каждый аспект вашего сайта? Нет. Но он и не претендует на это.

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

Вот несколько причин, почему стоит использовать Lighthouse в качестве инструмента для регулярного тестирования сайта:

  • Простота использования. Если вы новичок в веб-дизайне, SEO может сбить вас с толку. У большинства из нас нет технических знаний для применения сложных инструментов тестирования. Lighthouse прост в применении, анализ сайта выполняется одним нажатием.
  • Поручения. Когда Lighthouse обнаруживает проблему, он создает поручение, следуя которому, вы можете исправить проблемы и улучшить производительность. Зачастую отчеты посвящены определенным разделам и даже строкам кода, которые можно исправить или улучшить.
  • Постоянные обновления. Lighthouse постоянно обновляется разработчиками Google для гарантии того, что при тестировании используются новейшие стандарты. Вам не придется беспокоиться о том, что инструмент использует устаревшие рекомендации, ведь именно разработчики, ответственные за создание этих рекомендаций, и занимаются обновлением Lighthouse.

Чек-лист от LightHouse

На момент написания статьи LightHouse умел уже делать такие проверки см. например для Lighthouse v5 (Score Weighting):

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

Аудит метрик, таких как время загрузки первых данных и быстрота отклика после взаимодействия с сайтом во время загрузки, включает в себя 22 проверки:

  • Reduce server response times (TTFB);
  • Properly size images;
  • Serve static assets with an efficient cache policy;
  • Minimize main-thread work;
  • Reduce JavaScript execution time;
  • Minimize Critical Requests Depth;
  • Eliminate render-blocking resources;
  • Defer offscreen images;
  • Minify CSS;
  • Minify JavaScript;
  • Defer unused CSS;
  • Efficiently encode images;
  • Serve images in next-gen formats;
  • Enable text compression;
  • Preconnect to required origins;
  • Avoid multiple page redirects;
  • Preload key requests;
  • Use video formats for animated content;
  • Avoids enormous network payloads;
  • Avoids an excessive DOM size;
  • User Timing marks and measures;
  • All text remains visible during webfont loads.

PWA

Оценивает страницу по контрольному чек-листу для прогрессивного веб-приложения. Включает в себя 15 проверок:

  • Does not respond with a 200 when offline;
  • User will not be prompted to Install the Web App;
  • Does not register a service worker;
  • Is not configured for a custom splash screen;
  • Site works cross-browser;
  • Page transitions don't feel like they block on the network;
  • Each page has a URL;
  • Page load is fast enough on 3G;
  • Uses HTTPS;
  • Redirects HTTP traffic to HTTPS;
  • Has a meta name="viewport" tag with width or initial-scale;
  • Contains some content when JavaScript is not available;
  • Address bar matches brand colors;
  • Content is sized correctly for the viewport;
  • The short_name won't be truncated on the homescreen.

Методы наилучшей практики (Best Practices)

Ищет все, от использования HTTPS до исправления пропорций изображения. Включает в себя 15 проверок:

  • Does not use HTTP/2 for all of its resources;
  • Uses document.write();
  • Links to cross-origin destinations are unsafe;
  • Includes front-end JavaScript libraries with known security vulnerabilities;
  • Browser errors were logged to the console;
  • Avoids Application Cache;
  • Uses HTTPS;
  • Uses passive listeners to improve scrolling performance;
  • Avoids requesting the geolocation permission on page load;
  • Page has the HTML doctype;
  • Detected JavaScript libraries;
  • Avoids requesting the notification permission on page load;
  • Avoids deprecated APIs;
  • Allows users to paste into password fields;
  • Displays images with correct aspect ratio.

Оптимизация поисковых систем (SEO)

Проверяет наличие базовых рекомендаций, таких как canonical, title, различные мета-теги. Включает в себя 13 проверок:

  • Page is mobile friendly;
  • Structured data is valid;
  • Has a meta name="viewport" tag with width or initial-scale;
  • Document uses legible font sizes;
  • Document has a title element;
  • Document has a meta description;
  • Links have descriptive text;
  • Document has a valid hreflang;
  • Document has a valid rel=canonical;
  • Document avoids plugins;
  • Page has successful HTTP status code;
  • Page isn’t blocked from indexing;
  • robots.txt is valid.
  • Доступность (Accessibility)

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

Включает в себя 46 проверок:

  • [id] attributes on the page are not unique;
  • frame or iframe elements do not have a title;
  • The page has a logical tab order;
  • Interactive controls are keyboard focusable;
  • Interactive elements indicate their purpose and state;
  • The user's focus is directed to new content added to the page;
  • User focus is not accidentally trapped in a region;
  • Custom controls have associated labels;
  • Custom controls have ARIA roles;
  • Visual order on the page follows DOM order;
  • Offscreen content is hidden from assistive technology;
  • Headings don't skip levels;
  • HTML5 landmark elements are used to improve navigation;
  • The page contains a heading, skip link, or landmark region;
  • Document has a title element;
  • Background and foreground colors have a sufficient contrast ratio;
  • html element has a [lang] attribute;
  • html element has a valid value for its [lang] attribute;
  • Image elements have [alt] attributes;
  • Links have a discernible name;
  • Lists contain only li elements and script supporting elements ( script and template );
  • List items ( li ) are contained within ul or ol parent elements;
  • [user-scalable="no"] is not used in the meta name="viewport" element and the [maximum-scale] attribute is not less than 5;
  • [accesskey] values are unique;
  • audio elements contain a track element with [kind="captions"];
  • input type="image" elements have [alt] text;
  • No element has a [tabindex] value greater than 0;
  • Cells in a table element that use the [headers] attribute only refer to other cells of that same table;
  • th elements and elements with [role="columnheader"/"rowheader"] have data cells they describe;
  • [aria-*] attributes match their roles;
  • [role]s have all required [aria-*] attributes;
  • Elements with [role] that require specific children [role]s, are present;
  • [role]s are contained by their required parent element;
  • [role] values are valid;
  • [aria-*] attributes have valid values;
  • [aria-*] attributes are valid and not misspelled;
  • Buttons have an accessible name;
  • dl 's contain only properly-ordered dt and dd groups, script or template elements;
  • Definition list items are wrapped in dl elements;
  • Form elements have associated labels;
  • Presentational table elements avoid using th , caption or the [summary] attribute;
  • object elements have [alt] text;
  • video elements contain a track element with [kind="captions"];
  • video elements contain a track element with [kind="description"];
  • The document does not use meta http-equiv="refresh" ;
  • [lang] attributes have a valid value.

Преимущества Google Lighthouse

По функциям Lighthouse напоминает нашумевшие сервисы поисковика – PageSpeed Insights и Analytics, но имеет больше плюсов:

  • Совмещает основной функционал всех сервисов одновременно – не нужно открывать каждый инструмент Google Chrome по отдельности;
  • Так как сервис выступает расширением, он может проводить аудит тестовых страниц и с авторизацией;
  • Обратная связь и постоянные обновления – авторы действительно читают комментарии разработчиков и регулярно дорабатывают инструмент.
  • Минусы – отсутствие русского языка – но из-за простого функционала это не вызывает проблем.

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

КАК ДОПОЛНЕНИЕ (ПЛАГИН) В GOOGLE CHROME

Зайдите в chrome web store и установите плагин Lighthouse (после установки он появится в верхней правой части окна браузера). Нажмите на него и после этого кликните на “Generate Report” (сгенерировать отчет). Затем начнётся сбор данных, и через несколько секунд отчет появится на экране.

ЧЕРЕЗ CHROME DEV TOOLS

  • Откройте сайт в Google Chrome;
  • Затем в Chrome Dev Tools нажмите на вкладку “Audits” (аудит);
  • Здесь находятся аудиты Lighthouse. Далее нажмите на кнопку “Run Audits” (запустить аудит). Затем начнётся игра с Вашим сайтом: сбор данных/игра с мобильной версией и т.д. После завершения Вы увидите вкладку аудита со всеми необходимыми данными.

КАК МОДУЛЬ NODE.JS

Чтобы использовать его на Вашей консоли, установите модуль Node (Lighthouse требует Node 10 LTS (10.13) или новее).

Установка

npm install -g lighthouse
// or use yarn: 
// yarn global add lighthouse 

Запуск

После установки, запустите его.

lighthouse https://ИМЯ ВАШЕГО САЙТА/
// например: lighthouse https://lebedev.of.by

Когда команда запустится, она покажет вам всю информацию, которая относится к аудиту. Затем откроется новое окно браузера Chrome, которое будет работать также, как и в предыдущем варианте с Dev Tools: оно проанализирует ваш сайт и сгенерирует документ с готовым аудитом, который можно просмотреть в браузере (по умолчанию генерируется отчёт в формате html, вот пример отчёта). И еще: если Вы запускаете Google Lighthouse в качестве модуля NPM, информация о состоянии аудита отображается в консоли. Например:

$ lighthouse https://lebedev.of.by
  ChromeLauncher Waiting for browser. +0ms
  ChromeLauncher Waiting for browser... +2ms
  ChromeLauncher Waiting for browser...√ +511ms
  ...
  status Auditing: Site works cross-browser +7ms
  status Auditing: Page transitions don't feel like they block on the network +1ms
  status Auditing: Background and foreground colors have a sufficient contrast ratio +2ms
  status Auditing: `<dl>`'s contain only properly-ordered `<dt>` and `<dd>` groups, `<script>` or `<template>` elements. +1ms
  ...
  status Auditing: `<th>` elements and elements with `[role="columnheader"/"rowheader"]` have data cells they describe. +1ms
  status Auditing: `[lang]` attributes have a valid value +1ms
  status Auditing: `<video>` elements contain a `<track>` element with `[kind="captions"]` +1ms
  status Auditing: `<video>` elements contain a `<track>` element with `[kind="description"]` +1ms
...
  status Auditing: The page has a logical tab order +0ms
  status Auditing: The user's focus is directed to new content added to the page +0ms
  ...
  status Auditing: Properly size images +2ms
  status Auditing: Use video formats for animated content +4ms
 ...
  status Auditing: robots.txt is valid +1ms
  status Auditing: Tap targets are sized appropriately +1ms
  status Generating results... +0ms
  Printer html output written to C:\Users\siarhei.a.lebedzeu\Documents\Vue_training\LIGHTHOUSE\lebedev.of.by_2019-11-13_10-59-14.report.html +82ms
  CLI Protip: Run lighthouse with `--view` to immediately open the HTML report in your browser +0ms
  ChromeLauncher Killing Chrome instance 123832 +1ms

ОТЧЕТЫ Lighthouse

Когда Lighthouse завершит оценку вашей страницы, вы получите аудиторский отчет (пример отчёта), который начинается с нескольких баллов (столько баллов, сколько категорий выбрано при настройке аудита). Отчет подробно охватывает пять отдельных элементов:

  • Performance (производительность),
  • Progressive Web App (прогрессивное веб-приложение),
  • Accessibility (доступность),
  • Best Practices (лучшие практики)
  • SEO

Performance (производительность)

Здесь Google Lighthouse измеряет скорость загрузки вашего сайта. Вы увидите количество времени (в секундах!), которое требуется сайту для отображения на нем различных элементов. Показатель эффективности (Performance Score) рассчитывается на основе результатов теста скорости, сравнивая скорость вашего сайта с другими. Получение 100 баллов означает, что протестированная веб-страница работает быстрее, чем 98% или более веб-страниц. Оценка 50 означает, что страница работает быстрее, чем 75% Интернета. Когда вместо оценки отображается знак вопроса, это значит что некоторые запущенные тесты не были проведены должным образом и помечены как «Ошибка!».

После scores overview Вы найдете результаты по 6 метрикам (Для Performance метрик):

  • First ContentFul Paint: измеряет время за которое, первый текст/ изображение отобразилось на экране.
  • First Meaningful Paint: измеряет время за которое, отобразился основной контент страницы.
  • Speed Index: показывает, насколько быстро содержимое страницы отображается визуально.
  • First CPU Idle: измеряет время, когда основной поток страницы стал ожидать обработку ввода в первый раз.
  • Time to Interactive: показывает время, когда страница стала полностью интерактивной.
  • Max Potential First Input Delay: является оценкой того, как долго ваше приложение реагирует на ввод пользователя в миллисекундах в течение самого загруженного 5-секундного окна загрузки страницы. Если ваша задержка превышает 50 мс, пользователи могут воспринимать ваше приложение как тормозящее.

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

Progressive Web App (Прогрессивное веб-приложение)

Прогрессивное веб-приложение (PWA) – это тип веб-сайта, который предоставляет наилучшие возможности для веб-пользователей. Здесь Google Checklist исследует, как вашему PWA стать надежным, быстрым и жуть каким привлекательным для ваших клиентов. Здесь акцент именно на использование HTTPS, заставки и цветовой контраст.

Accessibility (Доступность)

Всегда нужно помнить, что ваш сайт должен быть доступен каждому (у кого есть интернет, по крайней мере).

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

Best Practices (Лучшие практики)

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

SEO

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

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

Осторожно!!!

Lighthouse, безусловно, является отличным инструментом, который может легко создавать как метрики производительности, так и обеспечить контроль качества, поскольку он доступен непосредственно в Chrome. Это основное преимущество также может быть вашим злейшим врагом! Выполняя тест производительности с вашего настольного компьютера, вы полагаетесь на множество параметров из вашей локальной среды, и иногда может быть трудно получить достаточно стабильные результаты:

  • Интернет-соединение: вы уверены, что у вас нет фонового приложения, потребляющего некоторую интернет трафик? Если вы предоставляете ваш интернет кому еще, уверены ли вы, что никто не будет влияет на ваши тесты? Предлагает ли ваш интернет-провайдер стабильное соединение?
  • CPU: вы уверены, что использование вашего процессора другими программами не влияет на ваш текущий тест?
  • Расширения Chrome (Chrome extensions): они могут сильно повлиять на ваши результаты. Будьте особенно осторожны с расширениями, связанными с блокировкой рекламы!
  • Пользовательские настройки: вы уверены, что ваш тест Lighouse начинается с чистого состояния? Как насчет ваших файлов cookie, состояния вашего локального хранилища, открытых сокетов (вы можете проверить на chrome://net-internals/#sockets) и т. д.
  • Версия Lighthouse: возможно, Lighthouse обновлялся со времени вашего последнего отчета. Вы проверили журнал изменений? Помните, что расширение автоматически обновляется по умолчанию, и версия, доступная через DevTools, будет обновляться при обновлении Chrome.

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

Заключение

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

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

Литература

  1. Краткое руководство по Google Lighthouse Tools
  2. Использование Google Lighthouse для аудита веб-приложений
  3. Улучшайте качество страниц своего сайта вместе с Google Lighthouse!