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

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-EventosLatenciaLa 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 DNSUna 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.RedireccionesNo 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 ahttps://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 HTTPYa 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.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 HTMLDespué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 deNetwork. En la imagen vemos las cabeceras para la petición y respuesta HTTP a la URLhttps://platzi.com/cursos/responsive-designDescompresiónLos 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 DOMEn 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 HEADCuando el DOM está listo, el navegador comienza a renderizar el HTML, elemento a elemento, empezando por el contenido de la etiqueta .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-ThreadTenemos 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 que encontremos en el 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 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 Cuando finaliza el renderizado del comienza la parte del contenido. De igual manera que en el 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ágenesCuando el navegador encuentra una etiqueta solicita el recurso y comienza a descargar la imagen. Si la imagen es muy pesada esto puede llevar un tiempo.Imágenes de BackgroundSi un elemento, debido a su estilo CSS tiene una imagen de fondo, en este momento se empezaría a descargar.ScriptsSi tenemos código JavaScript dentro de la etiqueta , es en este instante cuando se empieza a ejecutar.EventosCuando 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.

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

Bienvenidos

Materiales

Descarga el código del proyecto

Introducción a HTML5 y CSS3

Preguntas antes de la clase

Diferencias entre Backend y Front-end

¿Qué es un Frontend?

¿Qué es HTML y CSS?

Semántica en HTML5

Metodología BEM

Introducción a CSS I

Introducción a CSS II

Developer Tools en navegador I

Developer Tools en navegador II

Preguntas Y Respuestas

Selectores CSS y flexbox

Preguntas antes de la clase

Flexbox

Imports en CSS

Retícula

Selectores en CSS y Pseudo selectores

Páginas internas

Preguntas y respuestas en clase

Listas Ordenadas, Float y Display

Preguntas antes de la clase

Listas ordenadas

Float y display

Preguntas y respuestas en clase

SASS y workflow profesional

Status HTTP

Counter Increment y pseudoSelectores

Textos y estilos con CSS3 Parte I

Textos y estilos con CSS3 Parte II

Animaciones con CSS

SASS

Preguntas y respuestas en clase

Contenido complementario

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

Preprocesadores CSS

Dibujando con CSS

Cómo acceder a la cámara de un dispositivo con la API de HTML5

Cómo crear filtros en CSS

Reticulas en CSS

Proyecto: Creando un App de Clima

HTML, CSS básico y uso de selectores

Estructura y etiquetas en HTML

Introducción a CSS

Selectores en CSS

Atributos del Selector

Selectores de Atributo

Sesión de preguntas y respuestas

Metodología BEM en HTML5 y CSS3

Float vs Display

Unidades de medida

Metodología BEM

Pseudo selectores

Sesión de preguntas y respuestas

CSS y workflow profesional

Progressive Enhancement

Fuentes y tipografías web

Responsive Media Queries

Imagenes Responsive y Retina

Preprocesadores CSS y SASS

Herramientas

Conceptos Básicos de JS y JQuery

Bases de desarrollo web moderno

Definición de JSON y API Rest

¿Qué es JSON?

DOM, BOM, JSON, AJAX

DOM: Document Object Model

Etiqueta Template en HTML5

Geolocation

Closures, Jquery y Local Storage en nuestra aplicación

Closures

Introduccion a GIT

Conectando con API Externa

Inyectando Datos en nuestro template

Añadiendo más ciudades a nuestra app

Guardando datos en LocalStorage