Cómo mejorar la velocidad de una web

En el día de hoy empezaré una serie de artículos en los que voy a hablar de la optimización de sitios web o WPO (Web Performance Optimization), iremos viendo como mejorar la velocidad, como detectar el problemas del tiempo de carga, fallos más comunes, como afecta al posicionamiento en buscadores… En resumen entender el contexto de la optimización, un tema que se ve afectado por demasiados factores y no tenemos demasiado en cuenta en el día a día, siendo uno de los pilares fundamentales de la web.

¿Por qué es importante la optimización web?

Muchas veces cuando hacemos una web, no nos damos cuenta que lo más importante es crear una sensación acogedora para el usuario, mejorando el tiempo de carga conseguimos una mejor experiencia de usuarios y unos usuarios felices :D. También es muy importante a la hora del posicionamiento, los buscadores ya implementan en sus algoritmos el tiempo en el que una web tarda en enviar su primer byte (TTFB - Time To First Byte), así que si eres más rápido que la competencia tienes más "puntos" para estar en los primeros puestos.

¿Qué influye en la velocidad de carga de una web?

Cuando decimos que una web carga lenta se pueden ver afectados muchos factores por eso voy a clasificarlo en 3 bloques:

  • Front-end
  • Back-end
  • Servidor

en los que vamos a ver a través de una serie de artículos todos los puntos importantes que tenemos que tener en cuenta a la hora de mejorar la velocidad de nuestra web, listados a continuación:

Front-end (Mucho más fáciles de identificar)

Minificar Javascript y CSS

Es buena practica pero a la hora, aunque ralentizar no afecta mucho pero todo suma y no nos cuesta nada.

Unificar Javascript y CSS

Si no estamos usando HTTP/2 es una buena opción para evitar muchas peticiones para solicitar los recursos.

CSS con muchos imports

Llegan a afectar mucho la velocidad de la web.

Orden de los css y javascript (Para que no bloqueen la carga de la web)

Excepto en casos excepcionales todo el JS debería cargarse antes de y evitar modificar el css con JS en la carga de la página.

Imágenes sin escalar ni optimizar

Puede llegar a ser muy engorroso, pero existen herramientas que veremos cuando profundicemos en el tema.

Muchas librerías

Cuantas menos librerías de terceros implementemos que ralentiza la velocidad de carga, conseguiremos que el tiempo que está el usuarios esperando con la página en blanco sea menor.

Cache de navegador

Precargar contenido (Preconnect, Prefetch, Prerender)

Con estas opciones de html podemos indicar que el navegador cargue los assets o página específicas antes de visitarlas.

Un pequeño ejemplo de como agregar de manera asíncrona un elemento desde javascript:

var linkElement =  document.createElement("link");  
linkElement.setAttribute("rel", "prerender");  
linkElement.setAttribute("href", "next-page.html");

document.getElementsByTagName('head')[0].appendChild(linkElement);  

AMP

Framework HTML, que permite implementar webs mas rápidas, pensado para páginas de publicaciones visitadas desde móvil.

Back-end

Optimizar consultas a base de datos

Uno del los puntos más importantes, si detectamos una consulta lenta hay que solucionar cuanto antes.

Compresión de archivos

Cuanto más reduzcamos los datos que tenemos que enviar va a ser mejor.

TTFB (Time to First Byte)

El tiempo que tarda el servidor en empezar a enviar el contenido que se ve afectado por la infraestructura del hosting o problemas de programación (cálculos costosos, consultas a base de datos …).

Servidor

Hardware

Por ejemplo un disco SSD - 600 veces más rápido que uno HDD, mejora la velocidad en consultas de base de datos, acceso a disco …

Cambiar de servidor web

Migrar de apache a nginx (servidor web de alto rendimiento).

Balanceador de carga (hardware/software)

Apache FPM (FastCGI Process Manager)

En el caso de usar apache tener bien configurado el gestor de procesos de php bien configurado, lo que puede mejorar hasta 10% la velocidad respecto a la version estándar CGI.

*Sistema cache de servidor *

HTTP/2

Nueva versión de HTTP del que he hablado en http://miguelra.com/como-funciona-el-protocolo-http/ en el que vimos que recibe todos los recursos con una sola petición y mantiene la conexión abierta con el servidor en todo momento.

CDN (Content Delivery Network)

Como indica el nombre es una red que distribuye el contenido por todo el mundo para estar mas cerca de lo solicitud del usuario, consiguiendo así una aceleración del sitio.

Seguiremos avanzando en estos temas en próximos artículos, por el momento os dejo unas herramientas con las que poder analizar posibles problemas de nuestra web.

Herramientas para analizar rendimiento web

Iremos viendo más herramientas en cada uno de los artículos de esta serie para cada tema, de todos modos dejo esta pequeña lista de herramientas básicas.

Front-end

PageSpeed Insights (enlace)

Detecta errores tanto de rendimiento como experiencia de usuario, en función de las reglas que establece google a la hora de posicionar una web.

Opmitimización de elementos google page insight

Y como vemos en esta captura, nos ofrece los recursos ya optimizados para subir a nuestro servidor.

Gtmetrix (https://gtmetrix.com/) - Analiza una web y te dice donde mejorar.

Webpagetest (http://www.webpagetest.org/) - Analiza la carga de la web y como mejorar.

Back-end

Blackfire (https://blackfire.io/)

Agente que sirve para testear cuanto tiempo tarda cada proceso de php (Conectarse a la base de datos, controlador, vista) y detectar cuellos de botella.

Servidor

HAProxy - Balanceador de carga

Varnish cache - Sistema cache de servidor