El pasado día 16 de diciembre celebramos la tercera Meetup del grupo de ZaragozaWP en el edificio Etopia_ . En ella tratamos a nivel básico el tema de la optimización (WPO) de WordPress haciendo una introducción a las herramientas de diagnóstico existentes y la optimización principalmente del FrontEnd por medio de plugins y tećnicas sencillas.
A lo largo de la tarde y durante casi dos horas hicimos una breve y rápida introducción sobre qué es la Web Performance Optimization (WPO) y poco a poco fuimos avanzado en el concepto hasta llegar a tratar algunos de los plugins más conocidos (y otros no tanto) relacionados con la optimización del rendimiento de WordPress. Si os interesa aquí tenéis un enlace a la presentación del meetup:
¿En qué consiste el WPO?
Recopilamos algunos datos de cómo la velocidad de respuesta puede hacer que nuestra tasa de conversión tanto en ventas como en visitas (según nuestros objetivos) se vea favorecida o perjudicada según el rendimiento. Para ello nos basamos en la Guia WPO de Javier Casares del año 2011
- El 47% de los usuarios esperan que una página cargue en menos de 2 segundos.
- El 14% cambia de tienda online si la página tarda en cargar.
- El 40% de los usuarios abandona una página que tarda más de 3 segundos en cargar.
- El 64% de los compradores que no están satisfechos cambia de sitio para su próxima compra.
- El 52% de los compradores afirman que un sitio que carga rápido los fideliza.
El WPO afecta a todos los niveles de la web: Diseño / Frontend, Red y Hardware, Servidor y Backend, y Bases de Datos y API por lo que cuando se tienen problemas de rendimiento no cabe achacar a un sólo aspecto sino que pueden existir muchos factores que mejorar.
Herramientas de diagnóstico
Existen numerosas herramientas de diagnóstico de cara a detectar los cuellos de botella y optimizar el rendimiento de nuestra web, pudiendo recomendar algunos de ellos, comparándonos además con nuestra competencia.
- Google PageSpeed
- GTMetrix (PageSpeed + YSlow)
- Pingdom Speed Test
- Dotcom Website Speed
- WebPageTest
Si os interesa una explicación mas pormenorizada os invito a que consultéis otro de las entradas de mi blog dedicada precisamente a herramientas de diagnóstico del rendimiento web.
Optimización del código HTML, JS y CSS
Probablemente uno de los mayores problemas que plantea WordPress es la gran cantidad de peticiones de ficheros que realiza. Ficheros de estilos CSS, librerías JS, etc. Es conveniente reducir estas peticiones por lo que recomendamos aplicar estos consejos para reducir el número de peticiones:
- Evitar los errores 404 que dan timeout
- Eligiendo plantillas ligeras, observando el código
- Evitar temas multipropósito y one-page
- Elegir temas optimizados para WPO y/o SEO como los basados em Génesis Framework
- Cargar desde CDNs librerías JS y/o CSS
- Cacheando contenido estático
- Utilizar <link> en vez de @import para los CSS
- Combinando y minificando ficheros CSS y JS
- Reorganizando la carga de ficheros JS y eliminando duplicados
- Detectando la incidencia de los plugins por medio de los timeline en la carga de componentes de nuestra página
Plugins de WordPress destinados a optimizar la carga de JS y CSS
Algunos de los plugins relacionados con WPO que comentamos de cara a facilitar la puesta en marcha de estos consejos son los siguientes:
Better WordPress Minify. Permite minificar y agrupar la carga de ficheros CSS y JS, permitiendo además cambiar su orden y posición de carga.
Autoptimize. Agrupa y minimiza JS, CSS y HTML
Optimización de imágenes
Estos son algunos de los consejos más simples y recurrentes no sólo en WordPress sino en el tratamiento en general de imágenes para la web. Las imágenes son unos de los puntos más importantes en la optimización WPO de nuestra web:
- Elegir tanto el formato como el tamaño adecuado para cada tipo de imagen: (PNG, JPEG…) así como la compresión.
- Eliminar datos de autoría, geolocalización, EXIF…
- En el caso de imágenes muy pequeñas plantearnos incluirlas en base64 en el código
- Utilizar Lazy load en páginas com muchas imágenes
- Utilización de técnicas como CSS Sprites combinando imágenes de mismo tamaño y/o propósito para reducir el número de peticiones
- Evitar el uso de imágenes utilizando WebFonts y CSS como Font Awesome para imágenes e iconos comunes
- Generar nuestros propios repertorios de WebFonts
Algunos de los plugins de optimización e imágenes y gráficos de WordPress
EWWW Image Optimizer. Permite la optimización de imágenes al añadirlas a la biblioteca. También permite la optimización en bloque.
WP Smush. Permite la optimización de imágenes. Cuenta com límites en la versión free.
Lazy Load. Las imágenes sólo son visibles cuando se muestran em la ventana del navegador.
BJ Lazy Load. Más avanzado que el anterior se aplica también a Iframes, widgets. No sólo a imágenes.
Font Awesome Icons. Permite añadir a nuestro contenido iconos.
Font Awesome for menus. Permite añadir iconos a nuestros menús.
Optimización y elección de plugins a cargar
Como todos ya sabemos la utilización de plugins en sí es el método más común y sencillo de aportar funcionalidades y herramientas a nuestra web para conseguir nuestros objetivos de conversión. Sin embargo para ello es posible que una inadecuada selección de los mismos o un excesivo número de plugins cargados puede que nos penalicen en el rendimiento. A continuación incluiremos algunos plugins que nos permitirán analizar el rendimiento de nuestra web desde la ejecución del código.
P3 (Plugin Performance Profiler). Plugin que permite de forma precisa realizar un análisis del funcionamiento de la web y de sus diferentes secciones. Diferencia la carga de cada uno de los plugins, el WP-core, el tema y el uso de la Base de Datos.
Plugin Organizer. Permite seleccionar en cada tipo de post, página, custom post o admin de WordPress queremos activar (o desactivar) un plugin en la carga. También permite cambiar el orden em el que se
mostrarán en el área de administración.
Plugins de caché y multipropósito en WordPress
Cachear el contenido estático es FUNDAMENTAL para la mejora del rendimiento. Tal y como define la WikiPedia: Se llama caché web a la caché que almacena documentos web (es decir, páginas, imágenes, etcétera) para reducir el ancho de banda consumido, la carga de los servidores y el retardo en la descarga. Un caché web almacena copias de los documentos que pasan por él, de forma que subsiguientes peticiones pueden ser respondidas por el propio caché, si se cumplen ciertas condiciones.
Para ello existen varios plugins multipropósito que nos permiten configurar y optimizar distintos aspectos de nuestra web:
W3 Total Caché. Plugin multipropósito que optimiza, comprime contenidos estáticos, cachea consultas y contenidos.
WP Super Caché. Genera HTML estático para servirlo en lugar de generarlo dinámicamente.
WordFence. Aparte de un magnífico sistema de protección frente ataques y vulnerabilidades cuenta con su propio motor de caché de contenidos.
Optimización del tráfico de red, redirecciones y uso de CDNs
Siempre deberemos de tener en cuenta los siguientes consejos o premisas:
- Adecuar el contenido servido al ancho de banda.
- Evitar redirecciones 301, 304, 307 siempre que sea posible.
- Reducir el uso de CNAMEs pues implican redirecciones.
- Encontrarnos físicamente (ms) cerca de nuestros usuarios por lo que siempre es recomendable que los servidores se encuentran en zonas próximas.
- Utilizar hostings especializados/fiables en WordPress como WebEmpresa o DinaHosting.
Al margen de la utilización de CDNs de librerías y repositorios públicos, deberemos de distribuir nuestro contenido estático (imágenes y CSS) en servidores de alto rendimiento.
- Amazon CloudFront
- MaxCDN
- CloudFlare Un CDN para aquellos que ya tienen CDN
Optimización de bases de datos
Por último tratamos muy brevemente la depuración y optimización de Bases de Datos con el uso de plugins. Para ello recomendamos un plugin bastante conocido WP-Optimize que nos permitirá optimizar el contenido que ya no es necesario en nuestra base de datos.
Próxima meetup
Fue una meetup realmente divertida en la que disfruté y agradezco enormemente la asistencia de todos a pesar de la «paliza» de casi dos horas. Nos vemos en la próxima meetup que es unos pocos días y está dedicada a la Seguridad en WordPress. Nos vemos allí.
Miércoles 27 de enero de 2016. 19:30 h
Etopía_
Avenida Ciudad de Soria, 8, Zaragoza
Edificio E3. Planta 2. Aula 1. (Sigue la línea azul)
