Optimización de
Wordpress
Artvisual Formación 2012
sesión 7
Índice
1.¿Por qué es importante?
2.Server / Cliente
3.Server
4.Caché - W3 Total Cache
5.Cliente
6.Page Speed & YSlow
7.Tra...
1. ¿Por qué es importante?
1. Pasta
- Gasto en servidores
- Más lento, menos usuarios/clientes
Google.com: +500 ms (speed ...
2. Server / Cliente
2 niveles de optimización
Servidor: optimizar el uso de
CPU de Wordpress
Cliente: Optimizar la carga d...
3. Server
Objetivo:
mejorar el tiempo de respuesta del servidor - uso de CPU -
TIPS
●define ('WP_DEBUG', true);
●Consultas...
4. Caché - W3 Total Cache
W3 Total Cache http://wordpress.org/extend/plugins/w3-total-cache/
Framework TOTAL para mejorar ...
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 downloa...
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...
7. Tratamiento de imágenes
- Optimizar imágenes (plugins)
- Reducir a ser posible el
número de imágenes
- Cargar las imáge...
8. CSS & JS
JS
- Cargar en el footer
- Reducir llamadas, llamar sólo donde haga falta
- Unir todos en uno y minificar (w3 ...
9. Más
.htaccess
https://github.com/h5bp/html5-boilerplate/blob/master/.htaccess
- Especificar caché del navegador (expiry...
Upcoming SlideShare
Loading in …5
×

Optimización de Wordpress

1,089 views

Published on

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.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,089
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Optimización de Wordpress

  1. 1. Optimización de Wordpress Artvisual Formación 2012 sesión 7
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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/

×