Conéctate con TwitterConéctate con Facebook
2

Por qué tu sitio web es tan lento: Carga de navegadores

1113Puntos

hace 2 años

Cuando afrontamos una estrategia de diseño responsivo debemos entender cómo funciona el proceso de carga de una página web con el objetivo de realizar un diseño adaptable al dispositivo. En este artículo vamos a ver, a grandes rasgos, las diferentes etapas por las que podemos pasar cuando visitamos una web. Estas son:
  • Latencia
  • Petición DNS
  • Redirecciones
  • Peticiones HTTP
  • Respuesta HTML
  • Descompresión
  • Carga del DOM
  • Renderizado del HEAD
  • Renderizado del BODY
  • Eventos
Aprende hoy en las clases en vivo a crear sitios web que funcionen en cualquier dispositivo con el curso de Responsive Design en Platzi. Entrar al curso de Responsive Design

Latencia

La latencia o retardo, es el tiempo que tardas en conectarte a tu proveedor de internet. Normalmente en las conexiones de fibra óptica o ADSL este tiempo es mínimo (alrededor de 9ms). Esto es diferente en una red móvil, ya que el smartphone primero debe conectarse a una torre que le proporciona cobertura y en ese momento es cuando se produce la conexión. Dependiendo de las circunstancias, este proceso puede tardar varios segundos antes siquiera de empezar a cargarse la web.

Petición al DNS

Una vez tenemos la conexión establecida, el navegador envía una petición al servidor de nombres (DNS), proporcionado por el proveedor de internet. Esto para conocer la dirección IP a la que apunta el dominio que estamos visitando.

Redirecciones

No siempre la URL que introducimos en el navegador apunta directamente a una dirección IP, muchas veces apunta a otra URL, por ejemplo: http://platzi.com/html redirecciona a https://platzi.com/cursos/html5-css3/ Esto es relevante en nuestra estrategia de diseño Responsive; ya que las redirecciones añaden tiempo al proceso de carga de una web aunque sean dentro del mismo dominio.

Peticiones HTTP

Ya por fin el navegador tiene la dirección IP. En ese momento solicita una petición HTTP al servidor para que éste le envíe la página html relativa a la URL introducida. Cómo carga una web Las peticiones HTTP incluyen también cabeceras, para complementar la información de la petición. Una de estas cabeceras es “user-agent”, donde se guarda la información del navegador utilizado y el sistema operativo. Ésto es útil si queremos desde el servidor envíar una versión diferente al cliente si este se conecta desde un smartphone o desde un laptop.

Envío del fichero HTML

Después de que el servidor reciba la petición HTTP, éste devuelve al navegador la página HTML correspondiente. La respuesta también tiene una cabecera, y en ella puede haber información sobre si se permite “cachear” el recurso y el tiempo que puede ser. Esta información la podemos configurar en el servidor. Las cabeceras HTTP se pueden visualizar en las “Chrome Developer Tools” en la pestaña de Network. En la imagen vemos las cabeceras para la petición y respuesta HTTP a la URL https://platzi.com/cursos/responsive-designCómo carga una web

Descompresión

Los ficheros HTML, JavaScript y CSS pueden enviarse comprimidos desde el servidor usando GZIP. Esto hace que pesen menos y su tiempo de descarga se reduzca. El navegador al enviar la petición HTTP, lleva en sus cabeceras información sobre esto. Le indica al servidor si acepta ficheros comprimidos. De ser así, el servidor los mandará de esta manera, sino los envía sin comprimir lo que afectará al tiempo de carga. Por tanto es una buena práctica habilitar la compresión GZIP en nuestros servidores. El navegador al recibirlos se encargará de descomprimirlos.

Carga del DOM

En el siguiente paso el navegador se encargará de formar el DOM (Document Object Model) a partir del contenido HTML que recibe. El DOM no es más que una representación en forma de árbol de nodos de la estructura de nuestra página HTML.

Renderizado de la etiqueta HEAD

Cuando el DOM está listo, el navegador comienza a renderizar el HTML, elemento a elemento, empezando por el contenido de la etiqueta < head >. Cada vez que el navegador encuentre un enlace a un fichero (como puede ser un fichero CSS, JavaScript, imagen, etc.) se realizará una petición HTTP. Si el navegador tiene algunos recursos cacheados de una anterior visita, no necesitará pedirlos nuevamente. De esta manera la primera visita puede llevar más tiempo de carga que las posteriores.

Ejecución Single-Thread

Tenemos que tener cuidado con los ficheros JavaScript que carguemos. JavaScript es Single-Thread, que significa el navegador sólo puede ejecutar un fichero a la vez. Cada etiqueta < script > que encontremos en el < head > del fichero HTML será ejecuta en el momento que llegue el renderizado. Tanto scripts internos como enlaces a ficheros JavaScript externos. Por tanto, si tenemos varios < scripts > podemos ver cómo la página sigue cargando pero en el navegador aún tenemos un fondo blanco ya que el renderizado no ha llegado todavía al contenido del HTML.

Renderizado del < BODY >

Cuando finaliza el renderizado del < head > comienza la parte del contenido. De igual manera que en el < head > va pintando uno a uno los elementos que va encontrando. También se van aplicando las reglas CSS que tenga cada elemento para poder colocarlo en la pantalla y ver cuál será su aspecto final.

Imágenes

Cuando el navegador encuentra una etiqueta < img > solicita el recurso y comienza a descargar la imagen. Si la imagen es muy pesada esto puede llevar un tiempo.

Imágenes de Background

Si un elemento, debido a su estilo CSS tiene una imagen de fondo, en este momento se empezaría a descargar.

Scripts

Si tenemos código JavaScript dentro de la etiqueta < body >, es en este instante cuando se empieza a ejecutar.

Eventos

Cuando finalmente se ha renderizado el documento, el navegador dispara el evento onload. Si tenemos algún script que escuche ese evento, en este momento se ejecutaría. Si quieres seguir aprendiendo sobre cómo diseñar y maquetar aplicaciones web, no te pierdas el curso de Responsive Design en Platzi. Aprenderás cómo adaptar tus sitios para que funcionen en cualquier pantalla, dispositivo y resolución con HTML5 y CSS3. Entrar al curso de Responsive Design
Carlos
Carlos
@carlosazaustre

1113Puntos

hace 2 años

Todas sus entradas