Spanish, Mexican subtitles

← 02-32 Cameron's Netflix Optimizations

Get Embed Code
6 Languages

Showing Revision 3 created 09/30/2014 by Fran Ontanaya.

  1. He decidido echar un vistazo a una de
    mis páginas web favoritas, Netflix.
  2. Voy a abrir DevTools
    presionando Cmd+opción+I.
  3. Activamos la emulación.
  4. Y vamos a Timeline.
  5. Haré una actualización forzosa haciendo
    Cmd+Shift+R.
  6. Podemos ver los eventos que aparecen
    cuando la página está cargando.
  7. Vamos a echar un vistazo a los primeros.
  8. Se puede enviar una solicitud
    para la página principal aquí.
  9. Este es el archivo HTML que usamos
    para cargar la página.
  10. Vamos a desplazarnos hacia abajo.
  11. Podemos ver que cuando la página HTML
    termina de cargar, analizamos el HTML.
  12. Abramos esto.
  13. Y podemos ver una solicitud
    para dos archivos diferentes,
  14. ambos llamados include.
  15. Dándole click en la primera
    nos da un archivo CSS.
  16. Nos desplazamos abajo
  17. y pienso que podemos hacer dos
    optimizaciones bastante obvias
  18. con solo ver este archivo.
  19. La primera optimización
    es disminuir el CSS
  20. o deshacernos de todos
    los espacios en blanco.
  21. El espacio blanco solo nos ayuda
    a leer el archivo,
  22. no ayuda al navegador a analizarlo.
  23. De hecho, si nos deshacemos de
    todos los espacios en blanco,
  24. removeríamos una cantidad significativa
    de bytes de nuestra información.
  25. La segunda optimización es
    enlinear CSS crítico,
  26. y no tendríamos que enviar
    otra solicitud para este archivo CSS
  27. para designar esta página.