В дома, повечето са с компютър и високоскоростен интернет. Но не по-малко потребители в различни условия. Дори и бързо 4G връзка към пътя решава проблема с не всички - има проблем с трафика, както и спестяване на скоростта на рендиране на мобилни устройства.

Всичко това води до една нова връзка със скоростта на зареждане на страници и да ги оптимизирате. Google увеличава в доставката страница, gruzyaschiesya секунди по-бързо. Милиардсекунда е приемането на най-добрите времена уеб страница отговор (10ms го веднага, 3 секунди, принудени да отменят сайта за изтегляне, и чакат 10 секунди могат да възпрат посетители завинаги).

Но как да се постигне това без обрязване и функционалност без да се нарушава външния вид?

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

От страницата за изтегляне преди да се изобрази

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

Това напълно променя концепцията за "скорост на зареждане на страницата." Не е достатъчно просто да се бързо да се зареди страницата - от решаващо значение, особено за потребителите на мобилни устройства, има честота на възникване на страницата се показват на екрана. Важно е критичния път - тъй като не всички от кода на страницата произвежда нещо в прозореца на браузъра.

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

От празен лист в съдържанието на

Представете си, че на мястото на потребителя при посещение на сайт. След като въведете URL, браузърът изпраща заявка към сървъра и получава като отговор на следния HTML:

Браузърът анализира този поток кодови байта в обектния модел на документа (DOM). DOM е пълен изглед дърво HTML-маркиране:

Забележка: Браузърът DOM изгражда постепенно. Това означава, че тя може да започне анализирането веднага щом се получи първите парчета код, постепенно добавяне на възли на дърветата. И това може да се използва в някои напреднали, но ефективен метод на оптимизация.

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

Тази малка част от CSS се анализира в обектен модел CSS или CSSOM един.

За съжаление, CSSOM не може да бъде изграден постепенно, тъй като DOM. Представете си, че в нашата стилове, по-горе е третият низ, например р . Пренаписване на първата декларация. И точно заради каскаден и пренаписване, ние трябва да се изчака CSS е напълно заредена, преди да тръгнете да се изобрази. Докато CSS не е зареден - оказване блокиран.

След като браузърът получи машинно четима представителството на маркирането и стилове, той отива в изграждането на изобразяването на едно дърво - структура, която съчетава DOM и CSSOM за всички видими елементи:

Имайте предвид, че етикетът на педя не е част от дървото рендиране (още една причина за предоставяне не започва без CSS - CSS има само информация за показване / не показва елементите на страницата).

Напълно направи критичен път за нашия прост пример, изглежда така:

Какво ще кажете за снимки

синя вертикална лента това събитие DOMContentLoaded. тичам след изграждането на DOM. Изображенията се зареждат по-късно и, следователно, не блокира разбор. Те блокират събитието Load (червена линия) - това събитие означава, че всичко, което трябва да изтеглите и обработва за страница ресурси. Изображение, разбира се, трябва да се оптимизира - но те не са част от критичната пътека оказване.

JS Пример поиска цвят елемент, което означава, че CSSOM трябва да е готов да стартирате скрипта. CSS трябва да се зареждат преди сценария.

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

Три стъпки за оптимизиране на критичния път оказване

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

1. Намалете количеството трафик изпраща на сайта.

Това е най-очевидно, съветите, но вие ще бъдете изненадани колко много сайтове все още не използват тази проста оптимизация - защото по-малко вашия сайт, толкова по-бързо се изтегля и да се направи.

Компресията намалява зареждане на страниците, както и кеширане да спестите трафик. Вместо да се зарежда от мрежата, критични ресурси, се съхраняват в локалното копие.

Забележка: Ако Минификация HTML маркиране рискувате, че съдържанието и стила не се показват правилно. Например, ако споделяте линия блокови елементи пространства след пропуски Минификация изчезват с разчленена. Използвайте внимателно HTML маркиране Минимизиране.

2. Минимизиране Блокиране CSS рендиране натоварване

обработка на CSS е важна част от процеса на изобразяване. CSS блокове не само прави, но също така и изпълнението на скриптове. Поради това е ясно, основното правило за сваляне: възможно най-бързо - свързване на връзката с стиловете в главата. Можете също така да се намали размерът на СГО, използвайки медийни заявки. Например, нашият сайт е със стандартни стилове, стилове за портретна ориентация и печат на стилове. Логично е да се прекъсне код в множество файлове, както и да ги свърже в случай на нужда:

Основният файл от стилове се намалява, което означава да намалява и блокиране на времето за изобразяване. Стилове за печат ще бъдат използвани само за отпечатване и няма да бъдат заредени в останалите случаи. CSS файл за портрета, който да бъде заредена само когато мобилното устройство е завъртян. Очевидно е, че ние можем да използваме медийни заявки за изтегляне отделно стиловете необходими само в специални ситуации. Това намалява размера на блокирането на приставки CSS, и по този начин се намалява времето, необходимо на браузъра да анализираме. Забележка: Браузърът ще продължи да изтеглите допълнителни стилове, но това ще бъде в нисък приоритет успоредно с процеса на изобразяване. Също така, в някои ситуации, можете да inlaynirovat блокиране CSS - Това ви позволява да запишете заявки и да ограничи браузър разбор HTML в.

Както споменах, това е компромис мярка. Това понякога може да ви помогне, а понякога ненужно увеличаване на размера на критичната CSS, поставена в различни файлове.

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

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

Също така проверете внимателно скриптове собствените си и на други хора. Ако те не взаимодействат с DOM или CSSOM, можете да ги заредите асинхронно. Това се прави просто:

заключение

Повечето от статиите, получени от следните източници:

Активно се използват инструменти като Chrome Инструментите за програмисти. PageSpeed ​​Insights или WebPageTest. да се разбере какво е възможно и необходимо оптимизиране.

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