Как да измерим скоростта на зареждане на сайт?

Скоростта на зареждане на уебсайт може да бъде измерена по няколко начина:

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

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

2. Онлайн услуги за измерване на скоростта:

   • Google PageSpeed Insights: Анализира производителността за мобилни и десктоп устройства, предоставя препоръки за оптимизация.
   • GTmetrix: Предоставя метрики PageSpeed и 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 pipeline.

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

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

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

   • Cypress: Осигурява достъп до Performance API.

5. Системи за мониторинг в реално време (RUM):

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

Изборът на метод зависи от целите: за бърза оценка са подходящи онлайн услугите, за детайлен анализ и отстраняване – инструментите за разработка, за редовен мониторинг и интеграция в процесите на разработка – автоматизация и RUM системи.