LighthouseЭто инструмент автоматизации Google с открытым исходным кодом, в основном используемый для улучшения качества веб-приложений (мобильных терминалов). Текущие элементы теста включают页面性能,PWA,可访问性（无障碍）,最佳实践,SEO. Lighthouse будет оценивать результаты каждого элемента теста и давать предложения по оптимизации.Эти критерии оценки и предложения по оптимизации можно рассматривать как рекомендации Google для веб-страниц.
Начиная
Есть три способа запустить Lighthouse: аудиты в Devtools, как расширение Chrome или как инструмент командной строки. Инструменты разработчика Chrome не требуют дополнительной установки. Как и расширения, они предоставляют удобный интерфейс для удобного чтения отчетов, преимущества расширений перед инструментами разработчика в том, что они более своевременны, и вы можете испытать последнюю версию, не дожидаясь Chrome. будут выпущены Особенности: инструмент командной строки для интеграции Lighthouse в систему непрерывной интеграции.
инструменты разработчика
Работает только в Chrome 60 и выше, потому что панель аудита инструментов разработчика в предыдущих версиях Chrome еще не Lighthouse.
Откройте инструменты разработчика через меню в правом верхнем углу или сочетание клавиш (command+option+i), затем выберите панель аудита, нажмите «Выполнить аудит», появится панель параметров, чтобы проверить элемент теста, а затем нажмите «Выполнить». аудиты.
Щелкните значок в правом верхнем углу или в меню «Параметры», чтобы настроить тестовый проект, и нажмите «Создать отчет для тестирования».
инструмент командной строки
Установить:
npm install -g lighthouse
# or use yarn:
# yarn global add lighthouse
использовать:
lighthouse https://example.com
Элемент конфигурации:
$ lighthouse --help
lighthouse <url>
Logging:
--verbose Displays verbose logging [boolean]
--quiet Displays no progress, debug logs or errors [boolean]
Configuration:
--save-assets Save the trace contents & screenshots to disk [boolean]
--list-all-audits Prints a list of all available audits and exits [boolean]
--list-trace-categories Prints a list of all required trace categories and exits [boolean]
--additional-trace-categories Additional categories to capture with the trace (comma-delimited).
--config-path The path to the config JSON.
--chrome-flags Custom flags to pass to Chrome (space-delimited). For a full list of flags, see
http://peter.sh/experiments/chromium-command-line-switches/.
Environment variables:
CHROME_PATH: Explicit path of intended Chrome binary. If set must point to an executable of a build of
Chromium version 54.0 or later. By default, any detected Chrome Canary or Chrome (stable) will be launched.
[default: ""]
--perf Use a performance-test-only configuration [boolean]
--port The port to use for the debugging protocol. Use 0 for a random port [default: 0]
--hostname The hostname to use for the debugging protocol. [default: "localhost"]
--max-wait-for-load The timeout (in milliseconds) to wait before the page is considered done loading and the run should continue.
WARNING: Very high values can lead to large traces and instability [default: 45000]
--enable-error-reporting Enables error reporting, overriding any saved preference. --no-enable-error-reporting will do the opposite. More:
https://git.io/vFFTO
--gather-mode, -G Collect artifacts from a connected browser and save to disk. If audit-mode is not also enabled, the run will quit
early. [boolean]
--audit-mode, -A Process saved artifacts from disk [boolean]
Output:
--output Reporter for the results, supports multiple values [choices: "json", "html", "domhtml"] [default: "domhtml"]
--output-path The file path to output the results. Use 'stdout' to write to stdout.
If using JSON output, default is stdout.
If using HTML output, default is a file in the working directory with a name based on the test URL and date.
If using multiple outputs, --output-path is ignored.
Example: --output-path=./lighthouse-results.html
--view Open HTML report in your browser [boolean]
Options:
--help Show help [boolean]
--version Show version number [boolean]
--blocked-url-patterns Block any network requests to the specified URL patterns [array]
--disable-storage-reset Disable clearing the browser cache and other storage APIs before a run [boolean]
--disable-device-emulation Disable Nexus 5X emulation [boolean]
--disable-cpu-throttling Disable CPU throttling [boolean] [default: false]
--disable-network-throttling Disable network throttling [boolean]
--extra-headers Set extra HTTP Headers to pass with request [string]
Examples:
lighthouse <url> --view Opens the HTML report in a browser after the run completes
lighthouse <url> --config-path=./myconfig.js Runs Lighthouse with your own configuration: custom audits, report
generation, etc.
lighthouse <url> --output=json --output-path=./report.json --save-assets Save trace, screenshots, and named JSON report.
lighthouse <url> --disable-device-emulation --disable-network-throttling Disable device emulation
lighthouse <url> --chrome-flags="--window-size=412,732" Launch Chrome with a specific window size
lighthouse <url> --quiet --chrome-flags="--headless" Launch Headless Chrome, turn off logging
lighthouse <url> --extra-headers "{\"Cookie\":\"monster=blue\"}" Stringify\'d JSON HTTP Header key/value pairs to send in requests
lighthouse <url> --extra-headers=./path/to/file.json Path to JSON file of HTTP Header key/value pairs to send in requests
For more information on Lighthouse, see https://developers.google.com/web/tools/lighthouse/.
Пример результатов испытаний
Лучшие практики
Эти рекомендации в основном предназначены для мобильных или веб-приложений. Некоторые технологии предъявляют повышенные требования к версиям браузеров, лучше всего использоватьCan I use,MDNПроверить поддержку браузера
Открывать внешние ссылки с rel="noopener"
Когда страница переходит на другую страницу с помощью target="_blank" , новая страница будет запускаться в том же процессе, что и ваша страница. Если новая страница выполняет дорогостоящий JavaScript, производительность вашей страницы может пострадать. Самое главное, что target="_blank" также является安全漏洞. Новая страница может получить доступ к объекту окна старой страницы через window.opener и может использовать window.opener.location=newURL для перехода со старой страницы на другой URL-адрес. Поэтому при открытии внешней ссылки в новом окне или вкладке всегда следует добавлять rel="noopener", например:
Цвет адресной строки должен соответствовать цвету бренда и теме страницы.
То есть цвет фона адресной строки должен совпадать с цветом бренда.
Реализовано через метатеги:
<meta name="theme-color" content="#ff6633">
Однако он действителен только в браузерах, которые распознают эту мету, например Chrome для Android, а Chrome и Safari на ПК и iOS недействительны.
Если сцену можно использовать, это может улучшить взаимодействие с пользователем и избежать резкой адресной строки.
Избегайте использования AppCache
AppCache был заброшен
Рассмотрите возможность использования сервисного работникаCache API, Кроме того, ios 11.3 теперь также поддерживает сервис-воркеры, и в ближайшие год-два ожидается большое развитие.
Избегайте использования console.time()
Если вы используете console.time() для проверки производительности страницы, рассмотрите возможность использования User Timing API. К его преимуществам относятся:
отметка времени с высоким разрешением
Экспортируемые временные данные
Интеграция с Chrome Devtools TImeline. Когда функция User Timing performance.measure() вызывается во время записи временной шкалы, DevTools автоматически добавляет это измерение к результатам временной шкалы.
Замените console.time() на performance.mark(). Если вам нужно измерить время, прошедшее между двумя метками, используйте performance.measure().User Timing API
Рассмотрите возможность использования performance.now() вместо Date.now(). performance.now() обеспечивает высокое разрешение метки времени и всегда увеличивается с постоянной скоростью, на нее не влияют системные часы (которые можно настроить).performance.now()
Планируется, что устаревшие API будут удалены из Chrome, и их использование приведет к ошибкам веб-страницы при удалении.Просмотр статуса платформы Chrome
Избегайте использования document.write()
Для пользователей с более низкой скоростью интернета (2G, 3G или более медленная WLAN) динамическое внедрение внешних скриптов через document.write() задержит отображение содержимого страницы на десятки секунд.
Избегайте огромной нагрузки на сеть
Откладывайте запросы до тех пор, пока они не понадобятся
Включить сжатие текста
Сжимайте HTML, JS и CSS
Используйте Webp вместо JPEG или PNG
Установите уровень сжатия изображения JPEG на 85.
запрос кеша
Избегайте использования событий мутации
Следующие события мутации снижают производительность и не рекомендуются в спецификации событий DOM:
DOMAttrModified
DOMAttributeNameChanged
DOMCharacterDataModified
DOMElementNameChanged
DOMNodeInserted
DOMNodeInsertedIntoDocument
DOMNodeRemoved
DOMNodeRemovedFromDocument
DOMSubtreeModified
Рекомендуется заменить каждое событие мутации наMutationObserver
Избегайте устаревших CSS Flexbox
Старая спецификация Flexbox от 2009 года устарела и работает в 2,3 раза медленнее, чем последняя спецификация. Замените display:box и каждое свойство, начинающееся с box на странице, на стандартные свойства Flexbox.
Избегайте автоматического запроса геолокации при загрузке страницы
Автоматический запрос местоположения пользователя при загрузке страницы может привести к тому, что пользователи не будут доверять странице или запутать ее. Вместо автоматического запроса местоположения пользователя при загрузке страницы этот запрос должен быть связан с жестом пользователя.
Избегайте автоматического запроса разрешения на уведомление при загрузке страницы
Хорошие уведомления должны быть своевременными, актуальными и точными. Если страница запрашивает разрешение на отправку уведомлений при загрузке, эти уведомления могут быть неактуальны или не совсем то, что нужно вашим пользователям. Чтобы улучшить взаимодействие с пользователем, лучше всего отправлять пользователям уведомления определенного типа и отображать запрос на разрешение, когда они соглашаются.
Фон и передний план должны иметь достаточный контраст
Низкоконтрастный текст трудно или невозможно прочитать для многих пользователей
Используйте расширение ChromeaXeВсе проблемы доступности могут быть проанализированы
Кнопка имеет доступное имя
Кнопки без названий недоступны для пользователей, использующих программы чтения с экрана. Когда у кнопки нет имени, программы чтения с экрана произносят слово «кнопка».
Для элементов
Установить внутренний текст элемента
Установите свойство aria-label
Задайте для свойства aria-labelledby текстовый элемент, видимый программам чтения с экрана.
Для элементов с :
установить значение атрибута
Установите свойство aria-label
Установите свойство aria-labelledby
Для и :
Установите атрибут value или опустите его. Значение по умолчанию, которое браузер присваивает «отправить» или «сбросить», если значение опущено.
Установите свойство aria-label
Установите свойство aria-labelledby
Страница содержит некоторый контент, когда его скрипт недоступен
Базовый контент и функциональность страницы не должны зависеть от CSS или JS. Для страниц, которые должны полагаться на JavaScript, одним из подходов является использование элемента, который предупреждает пользователя о том, что для страницы требуется JavaScript.
Оптимизация критического пути рендеринга
Минимизируйте критические ресурсы: устраните критические ресурсы, отложите загрузку критически важных ресурсов и пометьте их как несинхронизированные и т. д.
Оптимизируйте критические байты для ускорения загрузки.
Оптимизируйте порядок загрузки оставшихся критических ресурсов: загрузите все критические ресурсы заранее, чтобы сократить длину критического пути.
Избегайте изображений с неправильным соотношением сторон
Если у обработанного изображения соотношение сторон отличается от исходного файла, то обработанное изображение может выглядеть искаженным, что может вызвать неприятные ощущения у пользователя.
Избегайте ширины или высоты элемента в процентах от контейнера переменного размера.
Избегайте установки явных значений ширины или высоты, которые отличаются от размеров исходного изображения.
Если возможно, рекомендуется указать ширину и высоту изображения в HTML, чтобы браузер мог выделить место для изображения, что предотвратит пропуск страницы при загрузке. Идеальнее указывать ширину и высоту в HTML, а не в CSS, потому что браузеры выделяют пространство до анализа CSS. На самом деле, если вы используете адаптивные изображения, этот подход может быть сложным, потому что ширина и высота не могут быть указаны, пока не известны размеры области просмотра.
Включить сжатие текста
Если браузер поддерживает его, настройте сервер для использованияBrotliСжать ответ. Brotli экономит больше трафика, чем GZIP. Используйте GZIP, если Brotli не поддерживается. Проверьте, сжат ли ответ в Chrome DevTools:
Откройте сетевую панель DevTools.
Нажмите на указанный ответный запрос.
Нажмите на вкладку Заголовки
Проверьте поле заголовка содержимого в заголовках ответов.
Расчетное время задержки ввода
Скорость отклика ввода играет ключевую роль в том, как пользователи воспринимают производительность приложения. У приложения есть 100 мс, чтобы ответить на ввод пользователя. Если это время превышено, пользователь будет воспринимать приложение как вялое.
Оптимизируйте работу кода в браузере:
Для реализации анимационных эффектов избегайте использования setTimeout или setInterval, используйте requestAnimationFrame
Переместите долгосрочный JavaScript из основного потока в Web Worker
Используйте микрозадачи для выполнения изменений DOM в нескольких кадрах.
Используйте временную шкалу Chrome DevTools и анализаторы Javascript, чтобы оценить влияние JavaScript.
Уменьшите сложность селекторов (например, :nth-of-type, :nth-child); используйте подход, ориентированный на классы, такой как BEM, у которого есть статьяУчебник по БЭМ
Чтобы избежать операций компоновки, изменения «геометрических свойств» (таких как ширина, высота слева или сверху) требуют расчетов компоновки. Макет практически всегда действует по всему документу, если элементов много, то вычисление положения и размера всех элементов займет много времени.
Избегайте принудительной синхронной компоновкиСначала запускается JavaScript, затем вычисляются стили, затем макет. Тем не менее, JavaScript можно использовать, чтобы заставить браузер выполнять разметку заранее. Это называется принудительной синхронной компоновкой. Все старые значения макета из предыдущего кадра известны и доступны для запроса во время работы JavaScript. Поэтому можно записывать высоту элемента в начале кадра, но перед запросом высоты измените ее стиль, как показано в следующем коде. , что заставляет вычисление страницы возвращать правильную высоту. Это ненужно и дорого. Стили всегда должны считываться пакетами и выполняться перед любой записью.
function logBoxHeight() {
box.classList.add('super-big');
// Gets the height of the box in pixels
// and logs it out.
console.log(box.offsetHeight);
}
Изменение любого свойства, кроме свойств преобразования или непрозрачности, всегда запускает рисование. Chrome DevTools можно использовать, чтобы быстро определить, какая область рисуется. Откройте DevTools и нажмите клавишу Esc на клавиатуре. В появившейся панели перейдите на вкладку «рендеринг» и установите флажок «Показать прямоугольники рисования».
Каждый элемент формы должен иметь метку
Метка поясняет назначение элемента формы. Хотя назначение каждого элемента может быть очевидным для визуального пользователя, оно не очевидно для пользователей, которые полагаются на программы чтения с экрана. Добиться этого можно четырьмя способами:
скрытый ярлык
<label>First Name <input type="text"/></label>
явная метка
<label for="first">First Name <input type="text" id="first"/></label>
Каждое изображение имеет атрибут ALT
Информационные изображения должны иметь атрибут ALT, который содержит текстовое описание содержимого изображения. Считыватели экрана позволяют пользователю на визуально нарушили, чтобы использовать ваш веб-сайт, преобразуя текстовое содержимое в используемые формы, такие как синтетическая речь или Брайль. Считыватели экрана не могут преобразовать изображения. Поэтому, если ваше изображение содержит важную информацию, пользователи на визуальном порядке не могут получить доступ к этой информации.
Вы можете использовать следующую команду на вкладке Console devtools, чтобы найти картинки без атрибута ALT
?('img:not([alt])');
В консоли?() эквивалентно document.querySelectorAll()
Настройка метатегов области просмотра HTML
Без метатега Viewport мобильные устройства будут отображать страницу с типичной шириной экрана рабочего стола, а затем масштабировать страницу, чтобы она поместилась на экране мобильного устройства. Шириной и масштабированием можно управлять с помощью метатега Viewport.Настройка видовых экрановустановить область просмотраПара ключ-значение width=device-width устанавливает ширину области просмотра равной ширине устройства. Пара ключ-значение initial-scale=1 задает начальный уровень масштабирования при посещении страницы.
Сжатие изображений (только JPEG)
Установите уровень сжатия каждого изображения на 85 или ниже, напримерTinyJPGТакой веб-сервис может помочь автоматизировать процесс оптимизации изображения
Избегайте страниц с неверными кодами состояния HTTP
Поисковые системы могут неправильно индексировать страницы, которые возвращают неверные коды состояния HTTP.
Разрешить пользователям вставлять в поля пароля
Вставка пароля повышает безопасность, поскольку позволяет пользователям использовать менеджер паролей. Менеджеры паролей обычно генерируют надежные пароли для пользователей, надежно хранят пароль, а затем автоматически вставляют его в поле пароля, когда пользователю необходимо войти в систему.
Удалите код, который не позволяет пользователям вставлять данные в поля пароля. Используйте вставку из буфера обмена в точках останова событий, чтобы быстро найти код, предотвращающий вставку паролей. Например, следующий код, который предотвращает вставку паролей:
let input = document.querySelector('input');
input.addEventListener('paste', (e) => {
e.preventDefault(); // This is what prevents pasting.
});
Избегайте слишком большого DOM
Большие деревья DOM могут снизить производительность страницы несколькими способами:
Эффективность сети и производительность нагрузки. Если ваш сервер отправляет большое дерево DOM, возможно, вы отправляете много ненужных байтов. Это также может замедлить загрузку страницы, так как браузер может анализировать многие узлы, которые не отображаются на экране.
производительность во время выполнения. Когда пользователи и скрипты взаимодействуют со страницей, браузер должен постоянно пересчитывать позиции и стили узлов. Большое дерево DOM в сочетании со сложными правилами стилей может серьезно замедлить рендеринг.
производительность памяти. При использовании универсального селектора запросов (например, document.querySelectorAll('li') вы можете непреднамеренно сохранить ссылки на большое количество узлов) это может перегрузить возможности памяти пользовательского устройства.
Оптимальное дерево DOM:
Всего менее 1500 узлов.
Максимальная глубина 32 узла.
Нет родительского узла с более чем 60 дочерними узлами.
В общем, просто ищите способы создавать узлы DOM, когда они вам нужны, и уничтожать их, когда они вам больше не нужны.
Если вы не можете избежать большого дерева DOM, еще один способ улучшить производительность рендеринга — упростить селекторы CSS. видетьУменьшите объем и сложность вычислений стилей.
Используйте пассивные прослушиватели событий для повышения производительности прокрутки
Пассивные события — это развивающийся веб-стандарт, который может значительно повысить производительность прокрутки, особенно на мобильных устройствах. При прокрутке с помощью прослушивателей сенсорных событий (событие прокрутки не имеет этой проблемы), поскольку браузеры не знают, собираетесь ли вы отменить прокрутку, они всегда ждут, пока прослушиватель завершит работу перед прокруткой, что вызывает заметную задержку. Использованиеpassive: true в параметрах прослушивателя событий указывает, что прослушиватель никогда не отменит прокрутку, поэтому браузер может прокручивать немедленно.
В браузерах, поддерживающих пассивные прослушиватели событий, пометьте прослушиватель как пассивный: