LightHouse - Маяк, инструмент Google нового поколения

13 ноября 2018 года компания Google выпустила инструмент Lighthouse для комплексной проверки сайта, сменив привычный нам PageSpeed Insights.

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

Принцип проверки

Есть 3 способа, как проверить сайт:

1. Зайти на PageSpeed Insights и осуществить проверку ресурса (отсутствует проверка PWA - "Progressive Web App");
2. Зайти на web.dev и протестировать свой сайт (отсутствует проверка PWA);
3. Зайти в инструменты разработчика браузера Google Chrome или Яндекс.Браузера, где найти вкладку "Audits" и осуществить проверку, включая раздел PWA.

Что ищет Маяк?

Инструмент содержит 111 аудитов, распределенных по 5 разделам: Performance, PWA, Best Practices, SEO, Accessibility.

Чек-лист от LightHouse

Производительность (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.

Выводы

Как видите, идет сильное смещение от простой оптимизации скорости загрузки к комплексной работе над сайтом.

Вы можете обратиться в нашу веб-студию, мы имеет большой опыт в технической оптимизации сайтов, работаем с различными CMS: Bitrix, ModX, WordPress, Joomla.

Стоимость работ по оптимизации сайта по PageSpeed Insights уточняйте у наших менеджеров.