Rendering

Cum funcționează rendering-ul în browser

Browserul primește răspunsul HTML și îl transformă într-un arbore DOM. CSS-ul este procesat separat pentru construirea CSSOM. DOM și CSSOM sunt combinate într-un arbore de randare, care include conținutul vizibil și stilurile sale.

Urmează etapa de layout, în care browserul stabilește dimensiunea și poziția elementelor. La final, pixelii sunt desenați pe ecran. JavaScript poate modifica DOM, ceea ce poate declanșa actualizări de layout și redesenări.

Cum folosește Google rendering-ul

Google procesează aplicațiile JavaScript în trei faze principale: crawling, rendering și indexing. Googlebot preia mai întâi URL-ul și analizează răspunsul HTML. Dacă pagina folosește un model în care HTML-ul inițial nu conține conținutul propriu-zis, Google trebuie să execute JavaScript pentru a vedea pagina generată.

Paginile care răspund cu status HTTP 200 sunt trimise în coada de rendering, dacă o directivă robots nu împiedică indexarea. Când resursele permit, Google folosește Chromium fără interfață pentru a reda pagina și a executa JavaScript. HTML-ul rezultat este analizat din nou pentru linkuri și este folosit la indexare. Fișierele JavaScript blocate și paginile blocate nu sunt randate de Google.

Tipuri uzuale de rendering

Server-side rendering (SSR) generează HTML-ul complet pe server și îl trimite browserului. Client-side rendering (CSR) folosește JavaScript în browser pentru a modifica DOM. Static rendering produce anticipat câte un fișier HTML pentru fiecare URL. Prerendering-ul rulează aplicația la etapa de construire și capturează starea inițială sub formă de HTML static.

Alegerea implică compromisuri legate de performanță, interactivitate și cantitatea de JavaScript procesată în browser.

Rendering-ul contează în SEO deoarece Google folosește HTML-ul randat pentru indexarea paginii. Dacă titlul, textul principal, linkurile sau directivele apar numai după executarea JavaScript, erorile de cod, resursele blocate ori incompatibilitățile pot împiedica Google să vadă versiunea corectă.

HTML-ul inițial complet reduce dependența de executarea JavaScript. Google consideră în continuare server-side rendering sau prerendering drept abordări utile, deoarece acestea pot face site-ul mai rapid pentru utilizatori și crawlere. Ele sunt relevante și deoarece nu toate programele automate pot executa JavaScript.

Rendering-ul afectează și performanța percepută. Construirea DOM și CSSOM, layout-ul și afișarea pixelilor fac parte din calea critică de randare. Resursele blocante, un DOM foarte mare sau actualizările repetate pot întârzia afișarea și interacțiunea.

Un magazin online românesc are pagina /produse/cafea-boabe. Răspunsul inițial conține doar containerul aplicației:

<div id="app"></div>
<script src="/app.js"></script>

Denumirea produselor, descrierile și linkurile sunt adăugate ulterior prin JavaScript. Dacă scriptul este blocat sau eșuează, conținutul nu apare în DOM-ul final.

O variantă randată pe server trimite direct conținutul principal:

<main>
  <h1>Cafea boabe</h1>
  <p>Selecția disponibilă în magazin.</p>
  <a href="/produse/cafea-boabe-arabica">Cafea boabe Arabica</a>
</main>

JavaScript poate adăuga ulterior filtre și alte funcții interactive. Textul și linkul esențial rămân însă disponibile în răspunsul HTML.

1. Deschide URL-ul în Chrome DevTools și verifică răspunsul HTML din fila Network.
2. Compară răspunsul HTML cu DOM-ul final din fila Elements.
3. Verifică dacă titlul, conținutul principal, linkurile și URL-ul canonical există înainte de executarea JavaScript.
4. Dezactivează JavaScript în Chrome DevTools și reîncarcă pagina. Verifică ce informații și legături rămân disponibile.
5. Analizează fila Console pentru erori JavaScript care pot opri generarea conținutului.
6. Confirmă că resursele necesare nu sunt blocate prin robots.txt.
7. Verifică statusul HTTP al URL-ului și folosește un status relevant pentru paginile inexistente, protejate sau mutate.
8. Folosește limitarea rețelei din Chrome DevTools pentru a vedea cât JavaScript este descărcat înainte ca pagina să devină interactivă.

• Include în HTML-ul inițial conținutul principal, titlurile și linkurile importante atunci când arhitectura permite.
• Folosește linkuri HTML <a> cu atribut href, inclusiv în aplicațiile cu rutare pe client.
• Nu bloca paginile sau fișierele JavaScript necesare randării.
• Păstrează aceeași adresă canonical în HTML-ul inițial și în versiunea modificată prin JavaScript.
• Folosește statusuri HTTP relevante pentru pagini valide, inexistente, mutate sau protejate.
• Redu resursele critice și amână resursele care nu sunt necesare pentru afișarea inițială.
• Testează separat răspunsul HTML și DOM-ul rezultat după executarea JavaScript.
• Alege SSR, CSR, static rendering sau o abordare hibridă în funcție de conținut și de interactivitatea necesară.