Aligerando WordPress: optimizando el rendimiento

Aligerando WordPress: optimizando

el rendimiento

Córdoba Meetup 2012

@fjcarazo - Carazo Gil, Francisco Javier

¿Quién soy?

• Administrador de sistemas y desarrollador de

software en IAS-CSIC

• Cofundador y administrador de Linux Hispano,

Red De Autores y Geometrio

• Consultor WordPress en WPQuestions

• Emprendedor junto con @ahornero

¿Qué os voy a contar?

• Cómo conseguir el mejor rendimiento posible

con unos recursos determinados: alojamiento

web en servidor compartido

• No trataré:

– Mejoras a nivel de servidor

– Cambios de servidor web

– Inclusión de software como Varnish

– Modificaciones de la arquitectura de los servidores

• ¿Por qué? Experiencia y popularidad

WordPress y yo

' 04 2004

jul

2005

ago

2006

sep

2007

oct

2008

nov

2009

dic

2011

ene

2012

feb ' 13

Nace Geometrio (mis primeros CPT) 23/11/12

Segunda WordPress Meetup Córdoba 6/10/12

Descubro WPQuestions 1/12/11

WordCamp Sevilla 2011 8/10/11

Primera WordPress Meetup Córdoba 1/10/11

Nace RedDeAutores (BuddyPress) 25/3/11

Mi libro Domine WordPress: Manual Práctico 1/2/11

Linux Hispano se pasa a WordPress 15/10/09

Nace el blog de juegos de Linux Hispano 7/2/08

Conozco WordPress 1/1/05

Nace Linux Hispano 1/7/04

¿Por qué importa el rendimiento?

• SEO: +500ms 20% pérdida tráfico Google

• Económico: ampliar infraestructura

• Impresión del usuario

• Ventas: menor grado de conversión

• Rápido es mejor

• Ecológico: menos cómputo, menos energía

• Pérdida del servicio

¿Cómo funciona WordPress?

1. Usuario: introduce URL

2. Servidor web ejecuta WordPress

3. WordPress recopila datos de MySQL

4. Compone resultado

5. Lo envía

6. El usuario lo recibe

7. Navegador lo visualiza

¿Dónde puedo mejorar?

• Comunicaciones usuario-servidor

– Tamaño de los ficheros a transmitir

– Cantidad de ficheros transmitidos

• Tiempo de ejecución

– Cantidad y calidad de los plugins

– Llamadas PHP innecesarias

• Base de datos

– Cantidad y complejidad de las consultas

• Visualización en el cliente

– Complejidad interpretación CSS y JavaScript

Comunicaciones usuario-servidor

• Peso de los ficheros

– Activar compresión de Apache: Mod_Deflate

– WP Smush.it: reduce tamaño de las imágenes

– favicon pequeño y cacheable

– Compresión JPG y PNG

– Escalar imágenes con WordPress

Comunicaciones usuario-servidor

• Cantidad de peticiones:

– Un fichero una petición HTTP

– WP Minify: unifica ficheros JS y CSS

– Una sola imagen para todo el tema (sprites)

• CSS qué parte mostrar con background-position

– Integrar contenido multimedia dentro del texto en

Base64 cuando sea posible

Tiempo de ejecución

• Cantidad y calidad de los plugins

– P3 (Plugin Performance Profiler): datos sobre carga

– Actualización

– Sustituye su funcionalidad por algo más simple

Tiempo de ejecución

• Llamadas PHP innecesarias

– Sustituye funciones PHP por código estático

• get_bloginfo('name') ¿el nombre va a cambiar?

• get_bloginfo(charset') ¿y el juego de caracteres?

• … especialmente en el header.php y el footer.php

– En el escritorio, ¿por qué cargar todo?

• Quitar los widgets inútiles dentro del functions.php

Base de datos

• Cantidad y complejidad de las consultas

– ¿Nº de consultas para rellenar N entradas?

• 51 consultas para 8 entradas en Linux Hispano

• Usando CPT con muchos metadatos crece la complejidad

• ¡Evitar plugins mal diseñados!

• Necesidad de cachear

– WP Super Cache

• Facilidad

• Estabilidad

• Compatibilidad con vista móvil de WPtouch

– Mejor aún Varnish: otro concepto

Visualización en el cliente

• Navegador: intérprete de HTML, CSS y JS

– Facilitar interpretación

– Reglas CSS sin usar

– Optimizar JavaScript

• jQuery: acceder directamente por identificador

• Árbol DOM bien estructurado y lo más reducido posible

• Mejor cambiar clases a elementos que cambiar N

propiedades de estilo

• Minimizar número de líneas

– Usar encadenamiento

– Aprovechar partes incrementales bucle

– …

¿Cómo medir todo esto?

• En WordPress

– P3 (Plugin Performance Profiler): grandes números

– Debug Queries: lista detallada de peticiones a BBDD

– Manualmente: get_num_queries() y timer_stop(1)

• En el cliente

– Chrome/Chromium: herram. para desarrolladores

– Firefox: Firebug + Yslow

• En la nube

– Google PageSpeed Tools

Para terminar

• Conclusiones

– WordPress poco optimizado por defecto…

– … pero fácil de optimizar

– Atención al alojamiento

– Factor diferenciador

– Escalabilidad

– No olvidar otros factores

• Situación geográfica

• Estado de la red

• Efecto Menéame/Barrapunto/Digg

Preguntas

@fjcarazo

jcarazo.com