PUNTOS CLAVE PARA TENER UN WORDPRESS

RÁPIDOÁlvaro Fontela Sánchez

Raiola Networks

OPTIMIZACIÓN DE WORDPRESS

¿Quién soy y qué hago?

Mi nombre es Alvaro Fontela

Soy consultor Wordpress especializado en seguridad y rendimiento.

También soy uno de los co-fundadores de Raiola Networks.

Wordpress…¿Qué es Wordpress?

¿Qué es Wordpress?

• Wordpress es el CMS más usado del mercado actualmente, tanto para crear webs, blogs o tiendas online.

• La gran cuota de mercado de Wordpress hace que tenga una comunidad muy grande y bastante participativa.

• Wordpress está desarrollado en PHP y está preparado para ampliar sus funcionalidades con plugins y themes.

Wordpress y su rendimiento

• Wordpress está desarrollado en PHP, ese código PHP hay que procesarlo, y consume recursos del servidor.

• Para que una web creada con Wordpress cargue rápido, el PHP debe procesarse rápido o no procesarse.

• También tenemos que intentar que se realice el menor número de peticiones posibles y de la forma más optimizada posible.

• Plugin o sistema de cache.1

• Optimizar el HTML, JS y CSS.2

• Optimización de las imágenes.3

• Implementación de un CDN.4

Puntos clave para optimizar Wordpress

• Plugin o sistema de cache.1

• Existen múltiples plugins de cache para Wordpress, además existen sistemas de cache a nivel servidor.

• Un sistema de cache guarda una copia procesada de la web para servirla sin tener que ejecutar todo el código.

• Con un plugin o sistema de cache ahorramos recursos de proceso del servidor, pero también mejoramos los tiempos de carga.

• Algunos de los plugins de cache más conocidos y recomendados son W3 Total Cache o WP Rocket.

• Plugin o sistema de cache.1

En el siguiente ejemplo podemos ver la mejora de velocidad de carga simplemente implementando WP Rocket con un OPCache a nivel servidor:

ANTES

DESPUES

• Optimizar el HTML, JS y CSS.2

• Optimizar el HTML, JS y CSS consiste en reducir el tamaño de los archivos y combinarlos para reducir las peticiones necesarias para cargar la web.

• Minificar es el proceso de limpiar los archivos HTML, JS y CSS para hacer que pesen menos.

• Combinar es el proceso de unir varios archivos HTML, JS y CSS del mismo tipo en 1 archivo.

• Minificar y combinar es un proceso complejo y con algunos themes para Wordpress da problemas.

• Optimizar el HTML, JS y CSS.2

• Existen múltiples plugins para minificar y combinar código HTML, CSS y JS en Wordpress.

• Autoptimize es una excelente opción para cubrir estas necesidades, pero otros plugins de cache como W3 Total Cache o WP Rocket también incluyen este tipo de funcionalidades.

• En algunos casos, realizar este proceso puede dar problemas, debemos revisar que todo está correcto al realizarlo, normalmente en los themes complejos no se puede minificar ni combinar el CSS ni el JS.

• Optimización de imágenes.3

• Cuanto más pequeño sea el tamaño de las imágenes, menos pesará la página en conjunto y más rápido cargará.

• Las imágenes se pueden optimizar bastante sin llegar a perder calidad.

• Para Wordpress existen plugins como EWWW Image Optimizer o WP Smush que permiten optimizar las imágenes desde el back-end o al subirlas.

• Existen plugins de optimización más potentes como Imagify, TinyPNG o Kraken.io, que permiten obtener imágenes mucho más optimizadas, pero son soluciones Premium.

• Optimización de imágenes.3

En el siguiente ejemplo puedes ver la diferencia entre el antes y el después de optimizar las imágenes de una web.

En este caso la optimización se realizó con EWWW Image Optimizer y con Imagify.

ANTES DESPUÉS

• Sistemas de CDN4

• Un CDN es un sistema de distribución de contenidos que se encarga de servir archivos estáticos (imágenes, vídeos, documentos) de una web desde servidores ubicados en una zona geográfica cercana al visitante.

• Un CDN es la solución perfecta para mejorar la velocidad de carga de una web en TODO EL MUNDO.

• Existen cientos de servicios CDN, algunos de pago y algunos gratuitos, evidentemente los mejores son los de pago: a destacar Amazon CloudFront y CloudFlare

• Sistemas de CDN4

Este es un ejemplo de una web con el CDN de CloudFlare. El servidor se encontraba en Madrid y el test de carga se hizo desde California, con y sin CDN:

Además los servicios CDN por proxy inverso como CloudFlare, hacen optimizaciones para reducir el número de peticiones y reducir el peso de la web.

¿Qué hemos conseguido?

Resumen y conclusiones

Siguiendo 4 puntos básicos, hemos conseguido reducir drásticamente el tiempo de carga y el consumo de recursos de una web:

Antes Después