Cómo optimizar tu Wordpress: consejos, trucos y plugins para mejorar el rendimiento de tu Wordpess tanto en servidor como en cliente. Se habla del plugin de cache W3 Total Cache,Google Page Speed, YSlow, optimización de imágnes, CSS y JS. Dentro de las sesiones de formación de Artvisual en el 2012.

1. Optimización de
Wordpress
Artvisual Formación 2012
sesión 7

2. Índice
1.¿Por qué es importante?
2.Server / Cliente
3.Server
4.Caché - W3 Total Cache
5.Cliente
6.Page Speed & YSlow
7.Tratamiento de imágenes
8.CSS & JS
9.Más

3. 1. ¿Por qué es importante?
1. Pasta
- Gasto en servidores
- Más lento, menos usuarios/clientes
Google.com: +500 ms (speed decrease) -> -20%
traffic loss [1]
2. Móvil
3. Para no tener que llamar a los
compañeros de sistemas un domingo
porque se ha caído el servidor
4. Porque molamos y queremos
hacer las cosas bien

4. 2. Server / Cliente
2 niveles de optimización
Servidor: optimizar el uso de
CPU de Wordpress
Cliente: Optimizar la carga de la
página, JS, CSS, imágenes,...

5. 3. Server
Objetivo:
mejorar el tiempo de respuesta del servidor - uso de CPU -
TIPS
●define ('WP_DEBUG', true);
●Consultas lentas mysql
●Log de errores LIMPITO
●Actualizar, actualizar, actualizar! (wp y plugins)
●Instalar sólo los plugins necesarios, menos plugins, menos
consultas a BBDD
●Evitar plugins como el YARP
●Usar sistema de caché (siguiente slide)

6. 4. Caché - W3 Total Cache
W3 Total Cache http://wordpress.org/extend/plugins/w3-total-cache/
Framework TOTAL para mejorar el rendimiento.MÁS FÁCIL
IMPOSIBLE!!
- Caché de BBDD
- Caché de objectos
- Caché de página (HTML)
- Caché de navegador (.htaccess)
- Minificador de CSS/JS/HTML
- Varnish
- CDN
Muy Fácil de configurar: http://abrahamlaria.com/acelera-
wordpress-con-w3-total-cache/
w3c
total
cache

7. 5. Cliente
Velocidad real de carga de la Web, con imágenes, JS y CSS
80-90% of the end-user response time is spent downloading all
the components in the page: images, stylesheets, scripts,
Flash, etc

8. 6. Google Page Speed y Yahoo YSlow
Son dos addons de Firefox que miden y te ayudan a
optimizar la velocidad de carga de tu Web

9. 7. Tratamiento de imágenes
- Optimizar imágenes (plugins)
- Reducir a ser posible el
número de imágenes
- Cargar las imágenes más
tarde (lazyload)
- Redimensión de las imágenes
con los tamaños de
Wordpress add_image_size
( $name, $width, $height, $crop
)
- Redimensión con thumbGen
- Nunca redimensionar por
HTML o CSS
- CSS Sprites YA
- Especificar el tamaño de las
imágenes

10. 8. CSS & JS
JS
- Cargar en el footer
- Reducir llamadas, llamar sólo donde haga falta
- Unir todos en uno y minificar (w3 total cache)
CSS
● Validar
● Unir todos en uno y minificar (w3 total cache)
● Sprites
● Serve CSS of a rarely visited component in its own file. Serve the file only when that
component is requested by a user.
● Don't use CSS @import from a CSS file.
HTML
- Corregir errores, intentar validar
- Minificar (w3 total cache)

11. 9. Más
.htaccess
https://github.com/h5bp/html5-boilerplate/blob/master/.htaccess
- Especificar caché del navegador (expiry date) para las
peticiones de recursos estáticos (w3 total cache)
- Quitar ETags
TODOS
- mod_pagespeed de Google. Filtros
- CDN/static domain
- Peticiones en paralelo (sólo 5 simultaneas por dominio)
- Cookieless (peticiones menos pesadas)
- Varnish cache https://www.varnish-cache.org/