Как оптимизировать сайты с помощью Lighthouse
Lighthouse — часть Chrome DevTools
Быстрые сайты любят и пользователи, и поисковые системы. С первыми всё просто: если страница будет слишком долго загружаться, пользователь её закроет и перейдёт на другой сайт. С поисковиками похожая история: скорость загрузки — один из факторов, влияющих на ранжирование сайта в поисковой выдаче.
Проверить производительность сайта можно с помощью разных инструментов. Один из наиболее известных — Lighthouse от компании Google. Он не только тестирует сайт и показывает оценку производительности, но и даёт конкретные рекомендации: что можно улучшить, чтобы сделать сайт быстрее.
Давайте разберём, как с помощью Lighthouse проверить качество сайта и повысить его производительность. Мы не будем углубляться в алгоритмы работы инструмента и принципы подсчёта внутренних метрик: начинающим веб-разработчикам это и не нужно. Однако знать, как работает инструмент, и уметь использовать его в своих проектах — очень важный навык.
Как запустить Lighthouse
Запустить инструмент можно тремя способами:
Через расширение для браузера Chrome или Firefox. Установите расширение, затем откройте свой сайт и запустите проверку с помощью кнопки Generate report.
Пример запуска Lighthouse из браузера Firefox
С помощью инструментов разработчика — Chrome DevTools. Чтобы запустить проверку, откройте инструменты разработчика, переключитесь на вкладку Lighthouse и нажмите на кнопку Generate report.
Мы разберем основы работы с Lighthouse на примере Chrome DevTools. Этого вполне достаточно, чтобы понять возможности инструмента. Для продвинутого использования можно установить npm-пакет и работать с Lighthouse через консоль. Этот способ позволяет более гибко настраивать инструмент и запускать его в автоматическом режиме.
Какие параметры оценивает Lighthouse
Lighthouse анализирует четыре показателя: производительность, доступность, SEO и лучшие практики. Для прогрессивных веб-приложений добавляется пятый параметр — PWA.
Performance — производительность. Анализирует скорость загрузки сайта. На эту оценку влияет время блокировки, отрисовки стилей, загрузки интерактивных элементов, шрифтов и контента.
Progressive Web App — Прогрессивные web-приложения. Проверяет, регистрирует ли сайт Service Workers, работает ли офлайн, возвращает ошибку 200.
Best Practices — лучшие практики. Проверяет безопасность сайта и использование современных стандартов веб-разработки. Оценка зависит от того, используется ли на сайте HTTPS, устаревшие API, правильная кодировка и другие параметры.
Accessibility — доступность. Проверяет, могут ли все пользователи получать доступ к контенту и эффективно перемещаться по сайту. Эта оценка зависит от понятности и воспринимаемости контента, возможности управлять интерфейсом и передвигаться по содержимому без помощи мыши.
SEO — оценивает соответствие страницы советам Google по поисковой оптимизации. Здесь проверяется использование метатегов, доступ к индексации и переобходу роботами, наличие атрибутов alt у изображений, адаптированность к мобильным экранам и другие характеристики.
Каждый параметр оценивается по 100-балльной шкале: чем выше, тем лучше. У каждой группы оценок также есть свой цвет. Зелёный выставляется при 90-100 баллах, он показывает, что с сайтом всё хорошо. Оранжевый можно получить при 50-89 баллах. То есть с сайтом всё хорошо, но можно сделать ещё лучше. Если оценка ниже 49 баллов, она становится красной. Это означает, что над производительностью стоит поработать.
Большой плюс Lighthouse в том, что проверять качество сайта можно как на десктопной, так и на мобильной версии.
Оценки при этом будут отличаться. Порой они различаются и при запуске нескольких тестов для одной версии сайта. В этом случае колебания возможны при:
Чтобы оценка была максимально приближена к реальной, рекомендуется запускать проверку в режиме инкогнито. Тестируйте сайт при стабильном интернет-соединении и отключите программы, которые могут повлиять на результаты.
Результаты проверки десктопной версии сайта
Как улучшить производительность сайта с помощью Lighthouse
Lighthouse не только показывает оценку по каждому из четырёх критериев, но и даёт конкретные рекомендации: что можно улучшить.
Например, оценка производительности складывается из шести метрик:
Ниже под метриками Lighthouse описывает возможности и предложения, которые помогут улучшить показатели.
Давайте разберём, как можно повысить оценки Lighthouse на конкретном примере. Для этого возьмём стандартный сайт, размещённый на бесплатном хостинге, и проверим его производительность. Тестировать будем мобильную версию, так как Google преимущественно использует мобильную версию контента для индексации и ранжирования.
Как видно на скриншоте, у сайта средние показатели производительности: 69 баллов из 100. Это неплохо, но давайте их улучшим. Для этого используем рекомендации, которые даёт Lighthouse. Каждую из них можно раскрыть и посмотреть подробнее, что предлагается изменить:
Если такого описания недостаточно и вы всё равно не понимаете, что нужно делать — нажимайте на ссылку Learn more. В открывшемся окне появится более подробная информация и руководство для разработчиков. Вся информация на английском языке, но даже если вы его не знаете, Google Переводчик поможет вам разобраться.
В нашем случае Lighthouse предлагает использовать современные форматы изображений: WebP и AVIF, так как они весят меньше, чем PNG и JPEG. Мы также можем уменьшить размер изображения с 567 Кб до 500 Кб. На первый взгляд может показаться, что это мелочи. Но если мы оптимизируем изображения на сайте, то браузерам понадобится меньше времени на их загрузку.
Также важно помнить про блокирующие рендеринг ресурсы, такие как стили и скрипты. Lighthouse предупреждает нас о том, что мы можем уменьшить их влияние на скорость, если минифицируем код или встроим критические ресурсы инлайн.
Если соблюдать хотя бы эти рекомендации, мы повысим оценку Lighthouse. Пусть не до 100 баллов, но это уже будет значительный вклад в производительность сайта.
Среди разработчиков нет единого мнения о том, когда лучше проверять производительность сайта. Кто-то этим занимается в процессе разработки, кто-то — в самом конце. Неважно, какой способ выберете вы. Главное не забывайте тестировать свой продукт и работать над его качеством.
Можно ли получить 100 баллов в Lighthouse?
Максимальная оценка вполне достижима. В сети есть проект Зака Лезермана — рейтинг сайтов с максимальными баллами Lighthouse. На момент подготовки этой статьи в нем было 133 ресурса, набравших сто баллов по каждому из четырёх критериев.
Нужно ли вам добиваться таких показателей — решайте сами. Но помните: главное не сама оценка. Главное — сделать сайт достаточно быстрым, безопасным и удобным для пользователей.
Какие еще есть инструменты для проверки производительности?
Lighthouse далеко не единственный инструмент для оптимизации скорости сайтов. Есть и другие, не менее популярные сервисы. Например, WebPageTest, GTmetrix и Pingdom Tools. Или даже PageSpeed Insights, который использует для проверки алгоритмы Lighthouse, но работает только с сайтами, размещенными в Интернете. Протестировать сайты на локальном сервере с его помощью не получится.
У каждого из таких инструментов есть свои особенности. Например, GTmetrix и Pingdom Tools дают более развёрнутые результаты проверки.
Так выглядят оценки и результаты проверки в WebPageTest
Они также показывают последовательность загрузки ресурсов и учитывают во время проверки местонахождение сервера — параметр, который тоже может влиять на производительность. А в GTmertix можно не только получить результаты тестирования, но и отслеживать их в дальнейшей работе.
Если по какой-то причине вам не подходит Lighthouse, можете остановиться на любом другом инструменте. Ведь главный принцип получения высокой оценки в любом из сервисов — это хороший, качественный код.
Что такое лейнхаус?
Рынок недвижимости активно развивается, предлагает покупателям инновационные решения. Отдельное место в последние годы принадлежит частным домам особой планировки.
Если раньше собственным особняком называли скромную дачу или роскошный коттедж, то сегодня перечень вариантов намного шире. Лейнхаус – что это такое и чем он отличается от других форматов жилья, вы узнаете из обзора.
В 2021 году в коттеджных поселках данный тип домов стал встречаться намного чаще. У него есть свои особенности, преимущества, о которых нужно знать перед покупкой.
Все типы таунхаусов
Таунхаусы в РФ пришли из США и Европы. Они имеют вид загородных домов небольшой этажности. Одна постройка рассчитана на несколько хозяев, но в каждую часть предусмотрены отдельные ходы.
В таунхаусе у каждой семьи есть свой участок земли и отдельный вход в дом. Формат жилья нравится тем, кто ищет возможность жить в комфортных условиях, с минимальным числом соседей, в тихой обстановке за разумную цену.
Собственный дом требует значительных затрат либо будет слишком скромным. Таунхаус – это компромисс в плане стоимости и качества.
Британхаусы
Британхаус – это таунхаус, выполненный в уникальном архитектурном стиле. Дизайн классический английский, отделка фасадов выполняется с применением кирпича красного цвета. Сблокированная постройка рассчитана на несколько семей.
Другие особенности построек:
Дуплексы
Дома на пару семей с отдельными входами для каждой. Идеальный вариант для больших семей, которые хотят жить рядом, но не в одной квартире. На первом этаже удобно размещать старшее поколение, а на втором младшее (или наоборот).
Площади прилегающих участков могут быть разными. В большинстве дуплексов есть террасы, мансарды, гаражи.
Другие особенности построек:
Мезонеты (квадрохаусы)
Следующий тип построек рассматриваемой категории. Дома состоят из четырех равных частей, деление (планировка) продольное либо поперечное. Этажей чаще всего два, хотя возможны варианты.
Другие особенности мезонетов:
Лейнхаусы
Лейнхаусы представляют собой сблокированные загородные дома. Они популярны в европейских странах, возводятся с применением разных архитектурных концепций.
Входы отдельные, площади прилегающих участков обычно скромные. Для каждой половины дома предусмотрены свои инженерные коммуникации.
Другие особенности:
Вилетты
Вилетты – просторные загородные дома, архитектурная стилистика – Италия. Есть навесы, террасы с арками, мансарды, бассейны. Для покрытия кровель используют средиземноморскую черепицу или более прочные и практичные конструкции.
Другие особенности вилетт:
Лейнхаусы в России
Как понятно из написанного выше, лейнхаусы представляют собой сблокированные в ряд особняки со смежными боковыми стенками. От обычного таунхауса их отличает фасад, оформленный в уникальном стиле. Площадь тоже будет больше – от 300 до 500 метров против стандартных 150-200 квадратов. Каждый владелец лейнхауса получает около 6 соток земли.
Для лейнхаусов характерно нелинейное расположение. Оно создает интересные архитектурные решения и уютную атмосферу переулков.
В России концепция нового формата жилья стала приживаться только в последние годы. Развитию ситуации способствовала концепция укрупнения коттеджных поселков и увеличения числа домовладений.
Аудитория – элитные клиенты с доходами выше среднего. Лейнхаусы и другие таунхаусы стоят дороже обычных квартир, но дешевле премиального жилья, покупка которого доступна немногим.
Теперь вы знаете, что такое лейнхаус, какие еще бывают виды таунхаусов, чем они различаются между собой. Для россиян такая терминология в новинку, но по мере популяризации коттеджных поселков она будет становиться более привычной и широко используемой.
Возможности Lighthouse для оптимизации сайта
Непосредственно на скорость загрузки влияет огромное количество факторов, и большинство из них относятся к оптимизации сайта. Когда ресурс попадает к нам, наши специалисты детально его изучают на всех уровнях. Находят ошибки в JavaScript, CSS, построении дерева DOM, изображениях, шрифтах и другом контенте. Исследования базируются на данных сразу нескольких инструментов, что позволяет максимально точно выявить проблемы и решить, как их устранить без вреда для страницы. Наиболее сложная ситуация, когда до нас оптимизировать сайт пытался человек, который не является специалистом. В таких случаях, нам иногда даже приходится полностью его восстанавливать. Проведение всех настроек позволяет не только существенно повысить скорость, но и провести SEO-оптимизацию. Сайт становится полноценным инструментом маркетинга, а поисковые системы повышают его в позициях выдачи.
Одним из инструментов, которые позволяют провести эффективный аудит, является Google Lighthouse. Именно на его данные и опирается поисковая система. Но, при проведении корректных настроек только его не достаточно — это важно учитывать. В данной статье мы рассмотрим, что такое Lighthouse и как им пользоваться.
Что такое Google Lighthouse
Lighthouse ещё называют Маяком, ведь именно так и переводится это слово. Поэтому, увидев в информации о настройках Google Маяк не удивляйтесь. Lighthouse – это автоматизированный инструмент с открытым исходным кодом, который служит для повышения качества веб-страниц. Запустить и протестировать его можно абсолютно на любой странице. Он осуществит аудит производительности, доступности, прогрессивных веб-приложений и прочие данные необходимые для анализа.
По представленным функциям он схож с Google Analytics и PageSpeed Insights. При этом, Lighthouse является самостоятельным инструментом с целым рядом преимуществ:
Одним из минусов является тот факт, что Lighthouse не имеет русскоязычной версии. Но если вы не являетесь веб-разработчиком, то вам она и не нужна. Оценить общее состояние сайта можно по цифрам, а со всем остальным разберутся профессионалы.
Как запустить Lighthouse и начать с ним работать
Запустить Lighthouse можно несколькими способами: в Chrome DevTools, из командной строки или в виде модуля Node. Указав Lighthouse необходимый для проведения тестирования URL, инструмент запускает серию аудитов на странице, после чего генерирует отчет. Проведя анализ успешных и не удавшихся аудитов, выявляется проблематика сайта. С этими данными веб-разработчик уже может работать, чтобы привести сайт в соответствие требованиям.
Итак, каким образом запустить Lighthouse каждый выбирает для себя, исходя из персональных предпочтений и удобства.
Lighthouse является инструментом веб-разработчика и создан для специалистов. Разобраться в нём самостоятельно, а уж тем более сделать на основании его анализа корректные выводы, довольно сложно. Но если использовать его исключительно для получения данных — то с этим справиться каждый.
Запустить Lighthouse в DevTools
Аудит Lighthouse можно выполнить в DevTools. Чтобы выполнить проверку необходимо осуществить ряд простых действий:
Спустя минуту-полторы инструмент выдаст все доступные данные по странице.
Запуск из командной строки Node
Для установки модуля Node Откройте Google Chrome
Для запуска аудита задайте:
lighthouse
Чтобы посмотреть варианты аудита необходимо задать:
lighthouse —help
Также можно запустить Lighthouse программно в качестве модуля Node.
Как просматривать отчёты Lighthouse и поделиться ими онлайн
Для того, чтобы просматривать отчёты и публиковать их онлайн, необходимо воспользоваться инструментом Lighthouse Viewer. Сделать это можно в формате JSON. Экспорт будет зависеть от того, каким именно образом вы используете Lighthouse.
Чтобы посмотреть данные потребуется открыть Свойства просмотра отчётов. Перетащить в него файл JSON и щёлкнуть по любому месту, чтобы открыть навигатор выбора файлов.
Помимо этого, отчётами можно делиться и как секретными списками GitHub. Таким образом, вы сможете бесплатно контролировать все доступные вам версии.
Lighthouse. Руководство по оптимизации сайтов для начинающих
Быстрые сайты любят и пользователи, и поисковики.
С первыми всё просто: если страница долго грузится, пользователь её закроет и перейдёт на другой сайт. С поисковиками похожая история: скорость загрузки влияет на ранжирование сайта в поисковой выдаче.
Проверить производительность сайта можно с помощью разных инструментов. Один из наиболее известных — Lighthouse от компании Google. Он не только тестирует сайт и показывает оценку производительности, но и даёт конкретные рекомендации: что можно улучшить, чтобы сделать сайт быстрее.
Давайте разберём, как с помощью Lighthouse проверить качество сайта и повысить его производительность. Мы не будем углубляться в алгоритмы работы инструмента и принципы подсчёта внутренних метрик: начинающим веб-разработчикам это и не нужно. Однако знать, как работает инструмент, и уметь использовать его в своих проектах — очень важный навык.
Как запустить Lighthouse
Запустить инструмент можно тремя способами:
Через расширение для браузера Chrome или Firefox. Установите расширение, затем откройте свой сайт и запустите проверку с помощью кнопки Generate report.
Пример запуска Lighthouse из браузера Firefox
С помощью инструментов разработчика — Chrome DevTools. Чтобы запустить проверку, откройте инструменты разработчика, переключитесь на вкладку Lighthouse и нажмите на кнопку Generate report.
Мы разберем основы работы с Lighthouse на примере Chrome DevTools. Этого вполне достаточно, чтобы понять возможности инструмента. Для продвинутого использования можно установить npm-пакет и работать с Lighthouse через консоль. Этот способ позволяет более гибко настраивать инструмент и запускать его в автоматическом режиме.
Какие параметры оценивает Lighthouse
Lighthouse анализирует четыре показателя: производительность, доступность, SEO и лучшие практики. Для прогрессивных веб-приложений добавляется пятый параметр — PWA.
Performance — производительность. Анализирует скорость загрузки сайта. На эту оценку влияет время блокировки, отрисовки стилей, загрузки интерактивных элементов, шрифтов и контента.
Progressive Web App — Прогрессивные web-приложения. Проверяет, регистрирует ли сайт Service Workers, работает ли офлайн, возвращает ошибку 200.
Best Practices — лучшие практики. Проверяет безопасность сайта и использование современных стандартов веб-разработки. Оценка зависит от того, используется ли на сайте HTTPS, устаревшие API, правильная кодировка и другие параметры.
Accessibility — доступность. Проверяет, могут ли все пользователи получать доступ к контенту и эффективно перемещаться по сайту. Эта оценка зависит от понятности и воспринимаемости контента, возможности управлять интерфейсом и передвигаться по содержимому без помощи мыши.
SEO — оценивает соответствие страницы советам Google по поисковой оптимизации. Здесь проверяется использование метатегов, доступ к индексации и переобходу роботами, наличие атрибутов alt у изображений, адаптированность к мобильным экранам и другие характеристики.
Каждый параметр оценивается по 100-балльной шкале: чем выше, тем лучше. У каждой группы оценок также есть свой цвет. Зелёный выставляется при 90-100 баллах, он показывает, что с сайтом всё хорошо. Оранжевый можно получить при 50-89 баллах. То есть с сайтом всё хорошо, но можно сделать ещё лучше. Если оценка ниже 49 баллов, она становится красной. Это означает, что над производительностью стоит поработать.
Большой плюс Lighthouse в том, что проверять качество сайта можно как на десктопной, так и на мобильной версии.
Оценки при этом будут отличаться. Порой они различаются и при запуске нескольких тестов для одной версии сайта. В этом случае колебания возможны при:
использовании на сайте анимаций, которые отображаются рандомным образом;
использовании расширений для браузера;
запуске антивирусных программ;
использовании устройств с разной производительностью.
Чтобы оценка была максимально приближена к реальной, рекомендуется запускать проверку в режиме инкогнито. Тестируйте сайт при стабильном интернет-соединении и отключите программы, которые могут повлиять на результаты.
Результаты проверки десктопной версии сайта
Как улучшить производительность сайта с помощью Lighthouse
Lighthouse не только показывает оценку по каждому из четырёх критериев, но и даёт конкретные рекомендации: что можно улучшить.
Например, оценка производительности складывается из шести метрик:
First Contentful Paint — измеряет время, которое понадобится браузеру для отображения первой части содержимого DOM.
Speed Index — проверяет скорость визуального отображения контента во время загрузки страницы.
Largest Contentful Paint — измеряет время загрузки самого большого элемента в области просмотра.
Time to Interactive — проверяет, за какое время страница станет полностью интерактивной.
Total Blocking Time — смотрит, в течение какого времени происходит блокировка страницы в ответ на действия пользователя: клики мышью или нажатия клавиш.
Cumulative Layout Shift — проверяет визуальную стабильность: смещение макета из-за асинхронной загрузки ресурсов.
Показатели метрик — на этом сайте всё хорошо
Ниже под метриками Lighthouse описывает возможности и предложения, которые помогут улучшить показатели.
Давайте разберём, как можно повысить оценки Lighthouse на конкретном примере. Для этого возьмём стандартный сайт, размещённый на бесплатном хостинге, и проверим его производительность. Тестировать будем мобильную версию, так как Google преимущественно использует мобильную версию контента для индексации и ранжирования.
Как видно на скриншоте, у сайта средние показатели производительности: 69 баллов из 100. Это неплохо, но давайте их улучшим. Для этого используем рекомендации, которые даёт Lighthouse. Каждую из них можно раскрыть и посмотреть подробнее, что предлагается изменить:
Если такого описания недостаточно и вы всё равно не понимаете, что нужно делать — нажимайте на ссылку Learn more. В открывшемся окне появится более подробная информация и руководство для разработчиков. Вся информация на английском языке, но даже если вы его не знаете, Google Переводчик поможет вам разобраться.
В нашем случае Lighthouse предлагает использовать современные форматы изображений: WebP и AVIF, так как они весят меньше, чем PNG и JPEG. Мы также можем уменьшить размер изображения с 567 Кб до 500 Кб. На первый взгляд может показаться, что это мелочи. Но если мы оптимизируем изображения на сайте, то браузерам понадобится меньше времени на их загрузку.
Также важно помнить про блокирующие рендеринг ресурсы, такие как стили и скрипты. Lighthouse предупреждает нас о том, что мы можем уменьшить их влияние на скорость, если минифицируем код или встроим критические ресурсы инлайн.
Если соблюдать хотя бы эти рекомендации, мы повысим оценку Lighthouse. Пусть не до 100 баллов, но это уже будет значительный вклад в производительность сайта.
Среди разработчиков нет единого мнения о том, когда лучше проверять производительность сайта. Кто-то этим занимается в процессе разработки, кто-то — в самом конце. Неважно, какой способ выберете вы. Главное не забывайте тестировать свой продукт и работать над его качеством.
Базовые рекомендации для повышения производительности:
Подключайте к документу минифицированные стили и скрипты.
Подумайте, что можно сделать с неиспользуемым кодом. Возможно, его стоит переписать или удалить.
Оптимизируйте изображения. Используйте для этого специальные программы или пакеты npm.
Используйте современные форматы графики, собирайте SVG в спрайты.
По возможности уменьшайте количество подключенных ресурсов;
Подсказывайте браузеру, какие ресурсы самые важные: включайте предзагрузку или наоборот — ленивую загрузку.
Можно ли получить 100 баллов в Lighthouse?
Максимальная оценка вполне достижима. В сети есть проект Зака Лезермана — рейтинг сайтов с максимальными баллами Lighthouse. На момент подготовки этой статьи в нем было 133 ресурса, набравших сто баллов по каждому из четырёх критериев.
Нужно ли вам добиваться таких показателей — решайте сами. Но помните: главное не сама оценка. Главное — сделать сайт достаточно быстрым, безопасным и удобным для пользователей.
Какие еще есть инструменты для проверки производительности?
Lighthouse далеко не единственный инструмент для оптимизации скорости сайтов. Есть и другие, не менее популярные сервисы. Например, WebPageTest, GTmetrix и Pingdom Tools. Или даже PageSpeed Insights, который использует для проверки алгоритмы Lighthouse, но работает только с сайтами, размещенными в Интернете. Протестировать сайты на локальном сервере с его помощью не получится.
У каждого из таких инструментов есть свои особенности. Например, GTmetrix и Pingdom Tools дают более развёрнутые результаты проверки.
Так выглядят оценки и результаты проверки в WebPageTest
Они также показывают последовательность загрузки ресурсов и учитывают во время проверки местонахождение сервера — параметр, который тоже может влиять на производительность. А в GTmertix можно не только получить результаты тестирования, но и отслеживать их в дальнейшей работе.
Если по какой-то причине вам не подходит Lighthouse, можете остановиться на любом другом инструменте. Ведь главный принцип получения высокой оценки в любом из сервисов — это хороший, качественный код. А научиться его писать вы можете на профессиональных курсах «HTML и CSS. Профессиональная вёрстка сайтов» и «HTML и CSS. Адаптивная вёрстка и автоматизация».
