Majoritatea oamenilor au un PC și un internet rapid. Dar nu mai puțin decât utilizatorii care se află în condiții diferite. Chiar și o conexiune rapidă de 4G pe drum nu rezolvă toate problemele - există o problemă în ceea ce privește salvarea traficului și viteza de redare pe dispozitivele mobile.
Toate acestea conduc la o nouă legătură cu viteza încărcării paginilor și optimizarea acestora. Google ridică în paginile de problemă care încarcă mai repede secunde. 1 secundă este timpul de răspuns optim al paginii (10 ms este instantaneu, 3 secunde pentru ca site-ul să fie anulat și 10 secunde de așteptare pentru a speria pentru totdeauna vizitatorii departe).
Dar cum poate fi atins acest lucru fără a reduce funcționalitatea și fără a agrava aspectul?
Ideea nu este numai de a muta site-ul pe un server rapid și de a minimiza dimensiunea paginilor. Este necesar să se optimizeze întregul lanț de evenimente care apar atunci când pagina este redată în fereastra browserului. Acest lanț este numit calea de redare critică.
De la încărcarea paginii până la randare
Google definește calea de redare critică ca un lanț de pași ai browserului de la încărcarea codului și a resurselor la afișarea acestuia pe ecran până la pixeli individuali.
Acest lucru schimbă complet conceptul de "viteză de încărcare a paginii". Nu este suficient doar să încărcați rapid pagina - importanța decisivă, în special pentru utilizatorii de dispozitive mobile, are viteza de apariție vizuală a paginii pe ecran. O importantă este calea critică - pentru că nu tot codul din pagină produce ceva în fereastra browserului.
Pentru a optimiza traseul critic de redare și, respectiv, viteza de redare, să examinăm mai atent pașii pentru redarea paginii și a interacțiunii dintre ele.
De la pagina necompletată la conținut
Imaginați-vă în locul utilizatorului care vizitează site-ul. După introducerea adresei URL, browserul trimite o solicitare serverului și primește ca răspuns răspunsul HTML:
Browserul analizează acest flux de octeți de cod în modelul obiect de documente (DOM). DOM este o vizualizare arborescentă completă a marcajului HTML:
Notă: browserul construiește DOM încet. Aceasta înseamnă că poate începe parsarea imediat ce primește primele fragmente de cod, adăugând treptat noduri în copac. Și acest lucru poate fi folosit în unele tehnici de optimizare avansate, dar eficiente.
În acest moment, fereastra browserului este goală. Observați cum este gestionat CSS de la
. Aplicarea stilurilor este unul dintre momentele cele mai importante ale redării, astfel încât stilurile ar trebui încărcate imediat ce parserul ajunge la etichetă .Acest mic fragment CSS este analizat în modelul obiect CSS sau CSSOM.
Din păcate, CSSOM nu poate fi construită treptat, ca DOM. Imaginați-vă că în foaia de stil de mai sus, există oa treia linie, de exemplu p
Odată ce browserul primește un aspect și o foaie de stil, se poate construi un arbore de redare - o structură care combină DOM și CSSOM pentru toate elementele vizibile:
Rețineți că eticheta Span nu face parte din arborele de redare (un alt motiv pentru care redarea nu pornește fără CSS - numai CSS are informații despre afișarea / afișarea elementelor pe pagină).
Calea de redare complet critică pentru exemplul nostru simplu arată astfel:
Ce zici de imagini
Bara verticală albastră este evenimentul DOMContentLoaded. care începe după construirea DOM. Imaginile sunt încărcate mai târziu și, prin urmare, nu blochează parsarea. Acestea blochează evenimentul Load (bara verticală roșie) - acest eveniment înseamnă că toate resursele pentru pagină au fost descărcate și procesate. Desigur, imaginile trebuie optimizate - dar ele nu fac parte din calea critică de redare.
JS din exemplu solicită culoarea elementului, ceea ce înseamnă că CSSOM trebuie să fie gata înainte de a executa scriptul. CSS trebuie să fie încărcat înainte de scripturi.
Acum, când am dat seama care părți ale site-ului sunt importante pentru redarea paginilor și modul în care acestea afectează reciproc, vom examina tehnicile de optimizare specifice.
Trei pași pentru optimizarea căii critice de redare
Există trei moduri în care putem optimiza calea de redare critică prin creșterea vitezei de apariție în browser a unui rezultat vizibil pentru utilizator. Rețineți că optimizarea este mereu atentă la calcule și compromisuri. Și, din păcate, nu există scenariu de optimizare universală. Este important să luați în considerare informațiile din instrumentele de dezvoltare în browsere și să utilizați și alte instrumente.
1. Minimizați cantitatea de trafic trimisă site-ului.
Acesta este cel mai evident sfat, dar veți fi surprins să aflați câte site-uri încă nu utilizează această optimizare mai simplă - deoarece cu cât este mai mic site-ul dvs., cu atât este mai rapid încărcat și redat.
Compresia reduce timpul de încărcare a paginii și cache-ul salvează lățimea de bandă. În locul descărcării prin rețea, resursele critice sunt stocate în copia locală.
Notă: Când minimizați marcajul HTML, aveți riscul ca conținutul și stilurile să nu fie afișate corect. De exemplu, dacă ați separat elementele blocului de linie cu spații, după minizare, spațiile dispar cu indentare. Aplicați cu atenție marcajul HTML cu mini-etichetare.
2. Minimizați blocarea redării prin încărcarea CSS
Procesarea CSS este o parte importantă a procesului de redare. CSS blochează nu numai redarea, ci și executarea scripturilor. Prin urmare, regula principală de încărcare este destul de evidentă: cât mai repede posibil - conectăm legătura cu stilurile din cap. De asemenea, puteți reduce dimensiunea CSS utilizând interogările media. De exemplu, pentru site-ul nostru există stiluri standard, stiluri pentru orientare portret și stiluri pentru imprimare. Este logic să spargeți codul în mai multe fișiere și să le conectați dacă este necesar:
Fișierul de stil principal va scădea, ceea ce înseamnă că timpul de blocare a redării va scădea și el. Stilurile pentru tipărire vor fi utilizate numai în timpul imprimării și nu vor fi încărcate în alte cazuri. Fișierul CSS pentru orientarea portretului va fi încărcat numai atunci când dispozitivul mobil este rotit. Evident, putem folosi interogările media pentru a încărca separat stilurile necesare numai în situații speciale. Aceasta reduce dimensiunea blocării CSS prin plug-in și, prin urmare, reduce timpul petrecut de browser în parsare. Notă: browserul va încărca încă stiluri suplimentare, dar acest lucru va avea loc cu o prioritate scăzută, paralelă cu procesul de redare. De asemenea, în anumite situații, aveți posibilitatea să blocați în mod inerent CSS - aceasta vă permite să salvați cererile și să restricționați browserul la parsarea HTML.
După cum am menționat, toate acestea sunt măsuri de compromis. Uneori, acest lucru poate ajuta și uneori mărește în mod inutil dimensiunea CSS critic care este inserat în fișiere diferite.
Există mai multe instrumente automate pentru optimizarea CSS:
În cel mai bun caz, nu conectați JS înainte de încărcarea inițială a paginii. Dacă acest lucru nu este posibil, încercați să întârziați executarea lui JS înainte de evenimentul de încărcare.
De asemenea, verificați cu atenție scripturile dvs. și altele. Dacă nu interacționează cu DOM sau CSSOM, le puteți încărca în mod asincron. Acest lucru se face simplu:
concluzie
Cea mai mare parte a articolului este extrasă din următoarele surse:
Utilizați mai activ instrumentele, cum ar fi Chrome DevTools. PageSpeed Insights sau WebPagetest. Pentru a înțelege ce optimizare este posibilă și necesară.
Viteza redării paginilor poate fi critică pentru vizitatorii dvs., care nu sunt obișnuiți să aștepte mult timp. Luați în considerare acest lucru atunci când dezvoltați și întrețineți site-ul, veți beneficia, de asemenea, de îmbunătățirea performanței sale.
Trimiteți-le prietenilor: