Google Lighthouse — важный инструмент в вашем рабочем процессе как разработчика. Убедиться в том, что производительность, доступность, лучшие практики и показатели SEO вашего сайта находятся на должном уровне, крайне важно для создания отличного пользовательского интерфейса, удержания клиентов и ранжирования в поисковых системах. Но с постоянно расширяющимся набором инструментов в нашем распоряжении в быстро меняющейся рабочей среде, может быть сложно уследить за всем этим!
Сколько раз вы забывали просмотреть показатели Google Lighthouse перед тем, как выпустить новую функцию? Если вы ответили: «По крайней мере, один раз!», то вы в надежных руках с Netlify. С помощью плагина Lighthouse Scores Visualizations вы можете просматривать показатели Google Lighthouse — по каждому развертыванию — прямо в пользовательском интерфейсе Netlify. Давайте включим его.
А если вы новичок в Lighthouse Scores или хотите узнать больше о том, как они рассчитываются, ознакомьтесь с вводной статьей разработчика о Core Web Vitals.
Установка плагина Lighthouse на ваш сайт
Прежде чем мы сможем включить визуализацию, нам необходимо установить плагин Lighthouse. Пропустите этот шаг, если вы уже используете его! В противном случае перейдите в раздел Plugins и найдите Lighthouse. Нажмите кнопку Установить.
Выберите сайт, на который вы хотите установить плагин, и подтвердите.
Теперь вы будете видеть показатели Google Lighthouse в журналах для каждого развертывания, даже если вы не активируете визуализацию. Но ведь мы здесь именно для этого, верно? 😎
Активируйте плагин Lighthouse Scores Visualizations в Netlify Labs
Нажмите на аватар вашего пользователя, чтобы открыть меню настроек, и нажмите на Netlify Labs.
Прокрутите вниз до области Экспериментальные функции, найдите Визуализации баллов Lighthouse и нажмите Включить. Внимание! Каждый член вашей команды должен будет активировать эту функцию в Labs индивидуально.
Затем начните развертывание. Когда сборка будет завершена, вы увидите новое событие onPostBuild от @netlify/plugin-lighthouse в журналах.
После завершения развертывания прокрутите страницу вверх, и вы увидите сводку показателей Google Lighthouse, красиво отображенную в верхней части страницы! Больше никогда не пропустите неожиданное изменение показателей — даже если вы забыли проверить их перед развертыванием. Потрясающе.
Дополнительная информация
Ознакомьтесь с нашей документацией для дальнейшего чтения и информацией о дополнительных функциях, доступных для платных аккаунтов Netlify. Мы многое запланировали для этой функции и будем регулярно добавлять функциональность — но мы также хотели бы услышать ваши мысли! Пожалуйста, поделитесь своими отзывами об этой экспериментальной функции и расскажите нам, что вы думаете. Счастливой работы! 👩🏽💻