Как измерить скорость загрузки сайта?

Скорость загрузки сайта можно измерить несколькими способами:

1. Инструменты разработчика в браузере:

   • Открыть вкладку "Network" (Сеть) в инструментах разработчика (F12).
   • Обновить страницу.
   • Анализировать временные показатели для каждого ресурса (HTML, CSS, JS, изображения):
     • Waiting (TTFB): Время до получения первого байта от сервера.
     • Content Download: Время загрузки содержимого.
     • Total: Суммарное время загрузки ресурса.
   • Обратить внимание на Waterfall (водопад) диаграмму для визуализации последовательности загрузки ресурсов.
   • Анализировать Summary (Сводка) внизу вкладки для общего времени загрузки и количества запросов.

2. Online-сервисы для измерения скорости:

   • Google PageSpeed Insights: Анализирует производительность для мобильных и десктопных устройств, предоставляет рекомендации по оптимизации.
   • GTmetrix: Предоставляет метрики PageSpeed and YSlow, детализированный отчет о загрузке, производительность и рекомендации.
   • Pingdom Website Speed Test: Измеряет скорость из разных локаций, предоставляет подробный анализ производительности.
   • WebPageTest: Позволяет тестировать из различных локаций и браузеров, предоставляет множество метрик и визуализацию.

3. Метрики, на которые стоит обратить внимание:

   • Time to First Byte (TTFB): Время до получения первого байта от сервера.
   • Largest Contentful Paint (LCP): Время появления самого большого элемента контента в видимой части экрана.
   • First Input Delay (FID): Время от первого взаимодействия пользователя с сайтом до ответа браузера.
   • Cumulative Layout Shift (CLS): Суммарный показатель смещения макета страницы во время загрузки.
   • DOMContentLoaded: Время, когда браузер полностью загрузил и распарсил HTML-документ.
   • Load: Время полной загрузки всех ресурсов страницы.

4. Автоматизация с помощью фреймворков:

   • Lighthouse (инструмент Google): Можно использовать как CLI-инструмент или интегрировать в CI/CD пайплайн.

   # Пример использования Lighthouse CLI
   lighthouse https://www.example.com --output json,html --output-path ./report.json
   

   • Selenium/WebDriver: Можно использовать для загрузки страницы и получения времени загрузки через JavaScript Performance API.

   # Пример получения времени загрузки с помощью Selenium и Performance API
   from selenium import webdriver
   import time
   
   driver = webdriver.Chrome() # Или другой браузер
   driver.get("https://www.example.com")
   
   # Ждем полной загрузки страницы
   time.sleep(5) # Можно использовать более надежные ожидания
   
   # Получаем PerformanceTiming object
   performance_timing = driver.execute_script("return window.performance.timing")
   
   # Рассчитываем время загрузки
   load_time = performance_timing['loadEventEnd'] - performance_timing['navigationStart']
   print(f"Время загрузки: {load_time} мс")
   
   driver.quit()
   

   • Cypress: Также предоставляет доступ к Performance API.

5. Real User Monitoring (RUM) системы:

   • Инструменты, которые собирают данные о производительности непосредственно от реальных пользователей, находящихся на сайте. Примеры: Sentry, New Relic Browser.

Выбор метода зависит от целей: для быстрой оценки подойдут онлайн-сервисы, для детального анализа и отладки – инструменты разработчика, для регулярного мониторинга и интеграции в процессы разработки – автоматизация и RUM-системы.