Optimitzant el Critical Rendering Path

Com funciona el motor de renderitzat d’un navegador?

  1. DOM (Document Object Model)
  2. CSS Object Model (CSSOM)
  3. Arbre del DOM
  4. Layout
  5. Renderitzat (pintat)

1. DOM (Document Object Model)

  1. Convertir el bytes a caràcters
  2. Identificar tokens
  3. Convertir tokens a nodes
  4. Crear l’arbre de renderitzat

2. CSSOM (CSS Object Model)

  1. Convertir bytes a caràctes
  2. Identificar tokens
  3. Convertir tokens a nodes
  4. Construir el CSSOM

3. L’arbre de renderitzat

4. Layout

5. Renderitzat (Pintat)

El torn del Javascript

  1. Quan els estils son in-line i estan per sobre dels tags <link> i dins del <head>
  2. Els scripts carregats de manera asíncrona

Carregar el javascript de manera asíncrona

Com optimitzar el CRP

Entenent el CRP

Com podem optimitzar-ho?

Proper pas: optimitzar l’entrega

Obtenció del primer render

https://developers.google.com/speed/docs/insights/mobile#delivering-the-sub-one-second-rendering-experience

Conclusions

--

--

--

Currently Front-end developer and perfomance specialist at Mango.com

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Gerard

Gerard

Currently Front-end developer and perfomance specialist at Mango.com

More from Medium

OMG, there is a demon in the house!

Now Comes Eric Weinstein: ‘Some folks are reaching out’ about UAPs

88 Dynasty: My first and final statement

Aloha Aina