Проверка на скоростта на сайта през 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), за да може инструментът да отчете данни.
Презаредете страницата (F5), за да може инструментът да отчете данни.

Disable Cache

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

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

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

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

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

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

Времената за зареждане на HTML кода (DOMContentLoaded) и заедно с ресурсите на страницата (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 - създаване на кадри на страницата за отделните фази в зареждането ѝ.
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.

Мадлена Методиева
Мадлена Методиева
Меган е част от СуперМаркетинг екипа. Мисията ѝ е старателно да попълва е-библиотеката на СуперХостинг.БГ с полезни и помощни статии.
0 0 votes
.
Абониране
Уведоми ме при
guest

0 Коментара
Inline Feedbacks
View all comments
Какви са причините за изоставените колички?

7 причини клиентите Ви да изоставят количките си

0
Тъй като множество магазини са афектирани от този феномен, създадохме списък с най-честите причини клиентите да изоставят количките си. Разберете кои са те!

Black Friday: Рано пиле… на Черен петък триумфира или кога и как да започнете...

0
Вижте стъпките по подготовката на онлайн магазина, стоката и служителите Ви за Черен петък (Black Friday). Вземете нещо за писане и запретвайте ръкави!

Black Friday: WooCommerce магазинът ми продава повече от магазина ти!

0
Задаваме 7 въпроса, през които трябва да преминете, за да имате изряден WooCommerce магазин. Типично в наш стил, не Ви спестяваме и отговорите.