Cuando conocemos a alguien, la primera impresión es importante. En Internet la velocidad de carga es esa primera impresión en la experiencia de usuario. También es importante para posicionar tu página en los primeros resultados de búsqueda. En 2010 Google incluyó la velocidad de carga en su algoritmo para las búsquedas Desktop, y en 2018 lo extendió a las búsquedas móviles.
Mayor velocidad de carga, mejor posición en los resultados de búsqueda.
Cuando buscamos una página web se inicia un proceso de 5 fases:
- Resolver las DNS, esto es traducir el hostname (www.mipaginaweb.com) en una dirección IP
- Establecer conexión TCP con el servidor
- Enviar petición HTTP (transferencia del navegador al servidor)
- Esperar a que el servidor responda
- Descargar la respuesta HTTP del servidor, (transferencia del servidor al navegador)
Cuando el navegador recibe el HTML, comienza a analizar el código y por cada recurso adicional que necesita, como imágenes, scripts o CSS, se repite el mismo proceso: resolver DNS, establecer conexión, envío, espera y descarga.
Por este motivo, cuántos menos recursos necesite nuestra página web, mejor.
4 KPIs para medir la velocidad de tu página web
1. Time to First Byte (TTBF)
Tiempo que pasa hasta que el navegador recibe la primera respuesta del servidor. El tiempo de respuesta depende de la configuración del servidor, carga de tráfico del servidor, procesos backend y la velocidad de la red.
200ms es un buen resultado. Más de 500ms es mala señal, algo está mal.
2. DOM Content Loaded
Indica cuando el HTML se ha cargado y analizado. En ese momento el navegador puede empezar a “pintar” la página en la pantalla. Ten en cuenta que: imágenes, scripts o CSS no tienen por qué haberse cargado en esta fase ya que no todos son necesarios para comenzar a mostrar la página.
Cuando DOM Content Loaded sucede, el navegador envía el evento DOMContentLoaded para informar a los scripts. En jQuery es $(document).ready()
3. First Paint (FP)
Es el momento en el que navegador renderiza (pinta) algo por primera vez, sin importar que sea útil para el usuario. Puede ser simplemente el background de la página.
4. First Meaningful Paint (FMP)
Es cuando se carga el contenido importante. Por ejemplo, en este blog el contenido primario es el texto e imágenes que están “above the fold”, pero no el logo, el menú de navegación o el formulario de búsqueda.
YouTube es un buen ejemplo de cómo priorizar el FMP.
Si cargas YouTube emulando una conexión 3g, verás que lo primero que se carga es el vídeo, el contenido útil, y sólo después se cargan elementos secundarios como la barra de búsqueda, menú o el sidebar sugiriendo otros vídeos.
Si quieres mejorar el performance de tu página web, te recomiendo este curso gratuito que ofrece Google: https://developers.google.com/web/fundamentals/performance/critical-rendering-path