Натиснете ENTER, за да видите резултатите или ESC за изход.

Проверка на скоростта на сайта през DevTools в браузъра

Ако имате уебсайт, който искате да се показва на първи позиции в търсачките, да привлича повече и създава постоянни и лоялни посетители, със сигурност сте стигнали до съвета за оптимизация на скоростта му на зареждане.

Скоростта на сайта обаче не е единен показател, универсален за всички негови посетители, който може да се измери само с един инструмент или да се представи само с една метрика.

Най-използваните уеб браузъри като Firefox и Chrome имат вградени инструменти за разработчици, които се наричат Development Tools (инструменти за разработка), или само „DevTools“. С тези инструменти можете да проверите за колко време се зарежда дадена страница от сайта Ви, както и да видите детайлна информация с метрики за времената на отделните фази на зареждането.

Тези инструменти имат много опции и извършат много проверки на процеса по зареждането на страницата. В резултатите от проверките ще получите данни за размера на страницата и отделните ресурси (kb), броя на заявките, времето за зареждане на ресурсите, времето за първия байт от отговора на уеб сървъра (TTFB) и много други. Тези показатели и метрики може да се използват за анализ на нужните оптимизации по сайта.

DevTools се използват предимно от уеб разработчиците за проверки и отстраняване на проблеми с HTML, CSS и JavaScript кода на сайта.

Проверка на скоростта на зареждане през DevTools в Chrome

С инструмента за разработчици (DevTools) в уеб браузъра Chrome може да измерите времето за зареждане на дадена страница в сайта и да видите колко време отнемат отделните фази на зареждането на ресурсите - DNS проверката (DNS Lookup), установяването на връзката със сървъра (Initial connection), изпращането на отделните заявки към сървъра (Request sent), изчакването на първия изпратен байт от сървъра (Waiting - TTFB), изтегляне на ресурсите (Content Download) и други.

Освен за измерване на времето за зареждане на страниците, DevTools в Chrome може да се използва за проверка на производителността на сайта. Резултатите от Performance и Audit ще Ви помогнат да разберете накъде да насочите усилията си за оптимизация и подобряване на сайта.

За Mozilla Firefox има аналогичен инструмент, който може да достъпите от менюто на браузъра Tools » Web Developer » Togle Tools. Опциите са идентични както при инструмента DevTools в Chrome.

За да извършите проверка на времето за зареждане на сайта през DevTools на Chrome, заредете сайта и отворете от опциите на браузъра More tools » Developer tools (или натиснете F12, или клавишна комбинация Ctrl+Shift+I).

Презаредете страницата (F5), за да може инструментът да отчете данни.

Disable Cache

За да анализирате реалното време за зареждане на страницата, без да се използва кеша в браузъра, активирайте опцията Disable cache. По този начин страницата ще се зареди като на посетител, който я зарежда за първи път.

След като деактивирате кеша, презаредете страницата, като натиснете F5 (или Ctrl+R).

В таб Network се виждат всички ресурси, които се зареждат към сайта.

След като страницата е презаредена, в таб Network ще видите всички ресурси към страницата, които са заредени.

Load - времето за зареждане на страницата

Времето за зареждане на страницата се вижда в долната част на инструмента.

Времената за зареждане на HTML кода (DOMContentLoaded) и заедно с ресурсите на страницата (Load).

Има няколко показателя за измерено време:

  • DOMContentLoaded - Това е времето, за което браузърът е получил и обработил HTML кода на страницата. Чрез обработката на кода се генерира DOM дървото на съдържанието в уеб страницата.
  • Load - Това е времето, за което е заредена цялата страница и всички нейни ресурси като стил (CSS) и функционалности (JavaScript).
  • Finish - Това е времето, което е изминало за зареждане на други ресурси, след като страницата вече е заредена. Това време се променя, когато се изпълняват допълнителни заявки за ресурси, след като вече страницата е заредена. Такива заявки може да се инициират от JavaScript.

Ако времето в Load е около или над 3 секунди, може да помислите за оптимизиране и ускоряване на сайта. Един от начините за ускоряване е чрез използване на технология за кеширане. Можете да приложите кеширане на ниво уеб сървър с инструмента в cPanel SuperCache. На ниво приложение ускоряване се прилага с технологии като Memcached и Redis.

Бележка: Измереното време през инструмента в браузъра е реално само за Вашето устройство, браузър, интернет свързаност и локация. Ако направите същото измерване с инструмента, но промените локацията, интернет връзката и устройството, резултатите ще са различни.

Детайли на заявката към сървъра (Timing)

За всеки ресурс на страницата можете да видите детайли за заявката към сървъра и времето за получаване и изтегляне от браузъра.

Детайли за ресурса, отделните стъпки до изтеглянето в браузъра.

В детайлите за ресурса можете да видите колко време отнемат отделните фази на зареждането му - DNS проверката (DNS Lookup), установяване на връзката със сървъра (Initial connection), изпращането на заявката към сървъра (Request sent), изчакването на първия байт от сървъра (Waiting - TTFB) и изтеглянето на ресурса (Content Download) и други.

Network » Capture screenshots

С опцията Capture screenshots ще можете да видите как е изглеждала страницата в отделните моменти по време на зареждането ѝ. Опцията се намира в настройките (зъбното колело) на таба Network.

Capture screenshots - създаване на кадри на страницата за отделните фази в зареждането ѝ.

След като активирате опцията, презаредете страницата с Ctrl+R.

Скрийншоти на страницата, направени по време на зареждането ѝ.

Audits

Тествайте и опцията Audits в DevTools, с която можете да получите доклад за представянето на сайта на десктоп или мобилно устройство, с предложения за оптимизиране на критичните точки в зареждането.

Преди да стартирате проверката, изберете желаните опции. Ако искате да се тества мобилното представяне на сайта, маркирайте опцията Mobile и изберете да има ограничение в интернет скоростта и CPU възможностите - Applied Slow 4G, 4x CPU Slowdown.

Одит (проверка) на представянето на сайта с препоръки и съвети за подобрения.

В резултатите от одита ще видите много данни за представянето на сайта и метрики за скоростта на сайта.

Можете да видите скрийншоти от моментите на зареждането на сайта.

Performance

Друга интересна възможност, която Ви предоставя DevTools, е да симулирате как се зарежда страницата на потребител, който има слаба интернет връзка (2G, 3G и др.). Това става през таб Performance.

От настройките на таба (зъбното колело) » Network: можете да изберете скоростта на интернет връзката. Има различни предварително зададени настройки като „Fast 3G“ или „Slow 3G“, или можете да добавите Ваши собствени персонализирани настройки в Custom » Add.

Избор на скоростта на интернет връзката.

С тази проверка можете да разберете за колко време ще се зарежда сайта за потребителите, които използват интернет през мобилната мрежа.

Повече за това как да работите с DevTools в Chrome и всички възможности, които Ви предлага, ще откриете тук: Chrome DevTools.

С инструмента DevTools в Chrome можете бързо да направите проверка на времето за зареждане на дадена страница от сайта. А за да разберете какво може да се подобри и оптимизира в процеса по зареждане, може да използвате допълнителните опции в инструмента - Audit и Performance.

Можете да ускорите времето за зареждане на сайта си до 100 пъти със SuperCache Manager - изцяло разработен от нас инструмент в cPanel, който кешира информацията на ниво уеб сървър.
Вижте още: Тест с ускоряване на фирмен WordPress сайт - резултати и графики и По-бърз и по-издръжлив WooCommerce магазин - с подкрепата на SuperCache.

Специалист Техническа Поддръжка

Меган е една от нашите super-support-гурута. СуперСилите ѝ се крият в таланта ѝ да разказва за технически „неща“ по разбираем и достъпен начин.

500px270px
SuperHosting.BG

Оставете коментар

avatar
  Абониране  
Уведоми ме при