Инструменты для анализа скорости сайта. Chrome DevTools, Google Lighthouse, Page Speed Insights & Co

• Новая рубрика "Оптимизируй это" посвящена оптимизации сайта.  

• Видео могут пересекаться с лайфхаками программиста.  

• Начинаем с анализа производительности сайта.  

• Пример сайта точка.ком.  

• Использование консоли разработчика Google для анализа.  

• Консоль разработчика помогает анализировать структуру страницы и логи скриптов.  

• Вкладка "Дом" показывает структуру страницы и порядок подключения скриптов.  

• Вкладка "Консоль" позволяет читать логи клиентских скриптов и писать свой код.  

• Вкладка "Сорс" показывает список ресурсов, подключенных к странице.  

• Вкладка "Ливери Нетворк" показывает сеть серверов для быстрой доставки контента.  

• Вкладка "Дебагер" позволяет ловить баги в коде.  

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

• Вкладка "Медленный интернет" эмулирует медленную сеть.  

• Вкладка "Поворот экрана" показывает страницу в пейзажной ориентации.  

• Вкладка "Пифоманс" анализирует потребление ресурсов и утечки памяти.  

• Проверка SSL сертификата.  

• SSL сертификат обязателен для оптимизации сайта.  

• Вкладка "Аудит" предоставляет отчет для оптимизации страницы.  

• Отчет предоставляется инструментом Google Lighthouse.  

• Оценка скорости страницы при ранжировании.  

• Рекомендации по улучшению показателей страницы.  

• Использование атрибута трел для оптимизации загрузки файлов.  

• Удаление неиспользуемых стилей и изображений.  

• Использование асинхронной загрузки ресурсов.  

• Использование реальных DNS-серверов для экономии времени.  

• Обновление изображений для улучшения восприятия.  

• Продолжение серии видео по оптимизации сайта.  

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

• Избегайте слишком большого количества элементов на странице.  

• Используйте кэширование для статических ресурсов и минимизируйте работу в основном потоке.  

• Улучшайте восприятие контента для людей с ограниченными возможностями.  

• Проверяйте безопасность ссылок и избегайте небезопасных ссылок.  

• Оптимизируйте мобильную версию сайта для лучшего ранжирования.  

• Используйте Google PageSpeed Insights для анализа страницы.  

• Используйте Google Lighthouse для оценки производительности страницы.  

• Анализируйте результаты и устраняйте блокирующие ресурсы и неиспользуемые CSS.  

• Используйте Jetpack для анализа производительности страницы.  

• Убирайте блокирующие ресурсы и улучшайте кэширование.  

• Проверяйте разметку на валидаторе W3C.  

• Используйте валидатор микроразметки для оценки оптимизации.  

• Используйте различные инструменты для анализа производительности сайта.  

• Пишите в комментариях о своих инструментах и задавайте вопросы.