Ако имате уебсайт, който искате да се показва на първи позиции в търсачките, да привлича повече и създава постоянни и лоялни посетители, със сигурност сте стигнали до съвета за оптимизация на скоростта му на зареждане.
Скоростта на сайта обаче не е единен показател, универсален за всички негови посетители, който може да се измери само с един инструмент или да се представи само с една метрика.
Най-използваните уеб браузъри като 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).
Disable Cache
За да анализирате реалното време за зареждане на страницата, без да се използва кеша в браузъра, активирайте опцията Disable cache. По този начин страницата ще се зареди като на посетител, който я зарежда за първи път.
След като деактивирате кеша, презаредете страницата, като натиснете F5 (или Ctrl+R).
След като страницата е презаредена, в таб Network ще видите всички ресурси към страницата, които са заредени.
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.
След като активирате опцията, презаредете страницата с 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.
