Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
#wccantabria
dariobf.com
Optimiza WordPress y a correr
https://www.flickr.com/photos/tjc/8282425687/
dariobf.com
Optimiza WordPress y a correr
WPO
WEB PERFORMANCE OPTIMIZATION
dariobf.com
WPO o Web Performance Optimization es el proceso de
optimización de sitios web tanto a nivel usuario como a ni...
dariobf.com
“
“WPO es similar al SEO en términos de que optimizar el
tiempo de carga genera mayor tráfico hacia tu sitio w...
dariobf.com
¿POR QUÉ WPO?
El tiempo de carga del sitio influye en las métricas de negocio.
Pérdidas:
• Bing: una página do...
dariobf.com
NO TAN RÁPIDO
dariobf.com
¿POR DÓNDE EMPIEZO?
1. ¿Qué es el WPO y por qué?
2. FEO.
3. SSO.
4. Herramientas.
5. Imágenes.
6. WordPress.
dariobf.comhttps://www.flickr.com/photos/sagesolar
FEO
FRONT END OPTIMIZATION
dariobf.com
Front End Optimization u Optimización del lado cliente
• Reducir peticiones HTTP:
• Combinar JS y CSS en un ún...
dariobf.com
FEO
Combinar JS y CSS en un único fichero. Mejor uno grande que
muchos pequeños.
dariobf.com
FEO
Combinar imágenes: CSS Sprites.
Tutorial sobre CSS Sprites
dariobf.com
Front End Optimization u optimización del lado cliente.
•Reducir peticiones HTTP:
•Combinar JS y CSS en un úni...
dariobf.comhttps://www.flickr.com/photos/kewl/8475764430
SSO
SERVER SIDE OPTIMIZATION
dariobf.com
SSO
dariobf.com
Server-Side Optimization u optimización del lado servidor.
•Compresión Gzip.
•Caché: php-APC, php-Xcache (opco...
dariobf.com
SSO
Compresión Gzip.
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEF...
dariobf.com
SSO
Expiración con mod_expires
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif "access plus ...
dariobf.com
Server-Side Optimization u optimización del lado servidor.
•Compresión Gzip.
•Caché: php-APC, php-Xcache (opco...
dariobf.com
HERRAMIENTAS
• Google pagespeed Insights: http://goo.gl/WpfBZ
• GTMetrix: http://gtmetrix.com/
• Webpagetest: ...
dariobf.com
IMÁGENES
Domain sharding
www.dominio.ext/estilos.css
www.dominio.ext/scripts.js
ww1.dominio.ext/imagen1.png
ww...
dariobf.com
IMÁGENES
Geolocalización de contenidos (CDN)
• Se replica en centros de datos de todo el mundo y el sistema
re...
dariobf.com
¿Y EN WORDPRESS?
dariobf.com
MEJORA EL THEME
dariobf.com
MEJORA EL THEME
• Reducir el número de peticiones HTTP: para ello, debemos minificar y
reducir ficheros javasc...
dariobf.comhttp://www.20minutos.es/noticia/215880/0/menores/frontera/eeuu/
CACHEA
dariobf.com
CACHEA
• A nivel cliente. Incrementar cabeceras de expiración.
• El Browser caching es un parámetro que se esp...
dariobf.com
CACHEA CLIENTE
# ------------------------------------------------------------------------------
# | Expires he...
dariobf.com
BASE DE DATOS
• Elimina las revisiones de entradas.
• Elimina los comentarios no aprobados o spam.
• Elimina l...
dariobf.com
IMÁGENES, CSS Y JS
• Optimizar con Photoshop y pasar por ImageOptim si son
elemento de diseño.
• Utilizar WP S...
dariobf.com
CONCLUSIONES
• ¿Es bueno optimizar todo, siempre?
• Consejo: NO OS VOLVÁIS LOCOS; Optimiza lo básico y ve
puli...
dariobf.com
EXTRA: +PLUGINS
Plugins WPO
• WP Super Cache o W3 Total Cache.
• Lazy load. (carga imágenes de forma asíncrona...
¡MUCHAS GRACIAS!
¿PREGUNTAS?
Optimiza WordPress y a correr - WordCamp Cantabria 2015 - @DarioBF
Optimiza WordPress y a correr - WordCamp Cantabria 2015 - @DarioBF
Upcoming SlideShare
Loading in …5
×

0

Share

Download to read offline

Optimiza WordPress y a correr - WordCamp Cantabria 2015 - @DarioBF

Download to read offline

Iniciación de WPO para WordPress, optimízalo para que cargue mucho más rápido.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Optimiza WordPress y a correr - WordCamp Cantabria 2015 - @DarioBF

  1. 1. #wccantabria
  2. 2. dariobf.com Optimiza WordPress y a correr https://www.flickr.com/photos/tjc/8282425687/
  3. 3. dariobf.com Optimiza WordPress y a correr
  4. 4. WPO WEB PERFORMANCE OPTIMIZATION
  5. 5. dariobf.com WPO o Web Performance Optimization es el proceso de optimización de sitios web tanto a nivel usuario como a nivel servidor para reducir el tiempo de carga del mismo. Hagamos sitios web más rápidos. ¿QUÉ ES WPO?
  6. 6. dariobf.com “ “WPO es similar al SEO en términos de que optimizar el tiempo de carga genera mayor tráfico hacia tu sitio web. Sin embargo, WPO no termina ahí. Existe clara evidencia de que WPO mejora, además, la experiencia de usuario, aumenta las ganancias y reduce costos operativos.” Steve Souders, encargado del equipo de WPO en Google
  7. 7. dariobf.com ¿POR QUÉ WPO? El tiempo de carga del sitio influye en las métricas de negocio. Pérdidas: • Bing: una página dos segundos más lenta resulta en una reducción de un 4,3% en ganancias por usuario. • Yahoo: Una demora de 400 milisegundos supone una pérdida del 5% al 9% en toda la página. • Google: Una demora de 400 milisegundos genera una bajada del 0,59% de búsquedas por usuario. • Amazon: 100 milisegundos de demora en el tiempo de carga les hace perder un 1% de ventas. Ganancias: • Mozilla: Hizo su página de descargas 2,2 segundos más rápida e incrementó el número de descargas en el 15,4%. • Google Maps: Aligeró los ficheros que conformaban la página en un 30% y la consulta al sitio aumentó en un 30%. • Netflix: Al habilitar la compresión Gzip hizo que su web fuese entre el 13 y el 25% más rápida; redujo su volumen de tráfico a la mitad.
  8. 8. dariobf.com NO TAN RÁPIDO
  9. 9. dariobf.com ¿POR DÓNDE EMPIEZO? 1. ¿Qué es el WPO y por qué? 2. FEO. 3. SSO. 4. Herramientas. 5. Imágenes. 6. WordPress.
  10. 10. dariobf.comhttps://www.flickr.com/photos/sagesolar FEO FRONT END OPTIMIZATION
  11. 11. dariobf.com Front End Optimization u Optimización del lado cliente • Reducir peticiones HTTP: • Combinar JS y CSS en un único fichero. Mejor uno grande que muchos pequeños. • Combinar imágenes: CSS Sprites. • CSS en la parte superior. • JS en la parte inferior. • Evitar 404. • Cachear, cachear y CACHEAR el contenido estático (imágenes, css, js, etc) • Evitar redirecciones. • Compresión Gzip. FEO
  12. 12. dariobf.com FEO Combinar JS y CSS en un único fichero. Mejor uno grande que muchos pequeños.
  13. 13. dariobf.com FEO Combinar imágenes: CSS Sprites. Tutorial sobre CSS Sprites
  14. 14. dariobf.com Front End Optimization u optimización del lado cliente. •Reducir peticiones HTTP: •Combinar JS y CSS en un único fichero. Mejor uno grande que muchos pequeños. •Combinar imágenes: CSS Sprites. •CSS en la parte superior. •JS en la parte inferior. •Evitar 404. •Cachear, cachear y CACHEAR el contenido estático (imágenes, css, js, etc) •Evitar redirecciones. •Compresión Gzip. FEO
  15. 15. dariobf.comhttps://www.flickr.com/photos/kewl/8475764430 SSO SERVER SIDE OPTIMIZATION
  16. 16. dariobf.com SSO
  17. 17. dariobf.com Server-Side Optimization u optimización del lado servidor. •Compresión Gzip. •Caché: php-APC, php-Xcache (opcode) •Expiración. •Minimizar peticiones externas (peticiones DNS). SSO
  18. 18. dariobf.com SSO Compresión Gzip. <ifmodule mod_deflate.c> AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE font/truetype AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/eot </ifmodule>
  19. 19. dariobf.com SSO Expiración con mod_expires <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/gif "access plus 1 year" ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/png "access plus 1 year" AddType image/x-icon .ico ExpiresByType image/x-icon "access plus 1 year" ExpiresByType text/css "access plus 1 year" ExpiresDefault "access plus 2 days" </IfModule>
  20. 20. dariobf.com Server-Side Optimization u optimización del lado servidor. •Compresión Gzip. •Caché: php-APC, php-Xcache (opcode) •Expiración. •Minimizar peticiones externas (peticiones DNS). SSO
  21. 21. dariobf.com HERRAMIENTAS • Google pagespeed Insights: http://goo.gl/WpfBZ • GTMetrix: http://gtmetrix.com/ • Webpagetest: http://www.webpagetest.org • LoadImpact page analyzer: http://loadimpact.com/page-analyzer • LoadImpact: http://loadimpact.com/ • Loads.in: http://loads.in/ • Yslow: http://developer.yahoo.com/yslow/ • Pingdom: http://tools.pingdom.com/fpt/
  22. 22. dariobf.com IMÁGENES Domain sharding www.dominio.ext/estilos.css www.dominio.ext/scripts.js ww1.dominio.ext/imagen1.png ww1.dominio.ext/imagen2.png ww1.dominio.ext/imagen3.png ww2.dominio.ext/imagen4.png ww2.dominio.ext/imagen5.png ww2.dominio.ext/imagen6.png ww1.dominio.ext/imagen7.png www.dominio.ext/estilos.css www.dominio.ext/scripts.js www.dominio.ext/imagen1.png www.dominio.ext/imagen2.png www.dominio.ext/imagen3.png www.dominio.ext/imagen4.png www.dominio.ext/imagen5.png www.dominio.ext/imagen6.png www.dominio.ext/imagen7.png
  23. 23. dariobf.com IMÁGENES Geolocalización de contenidos (CDN) • Se replica en centros de datos de todo el mundo y el sistema redirecciona al contenido geolocalizado que ha de descargarse. • Recomendado para sitios grandes, con cierto tamaño y proyección internacional. • Caro. Photon de Jetpack
  24. 24. dariobf.com ¿Y EN WORDPRESS?
  25. 25. dariobf.com MEJORA EL THEME
  26. 26. dariobf.com MEJORA EL THEME • Reducir el número de peticiones HTTP: para ello, debemos minificar y reducir ficheros javascript, CSS y, siempre que nos sea posible, usar Sprites CSS. WP Minify • Paralelizar peticiones HTTP: Los navegadores descargan contenidos simultáneamente, podemos aprovecharnos de esto utilizando un CDN o un sistema de Domain Sharding. Photon • Cuidar el tamaño y orden de los componentes: A veces es mejor uno grande que muchos pequeños y otras es mejor muchos medianos que uno grande. Además, influye el orden en que llamamos a estos componentes; mejor CSS en la cabecera y javascript en el pié de página. • Evitar 404. • Sobre CSS y JS: Intenta externalizar algunos de ellos, haz que sean cacheables y minifícalos (haz que sólo sean un fichero).
  27. 27. dariobf.comhttp://www.20minutos.es/noticia/215880/0/menores/frontera/eeuu/ CACHEA
  28. 28. dariobf.com CACHEA • A nivel cliente. Incrementar cabeceras de expiración. • El Browser caching es un parámetro que se especifica en las cabeceras de los ficheros como tal (cualquier imagen, fichero CSS, JS y demás). ¿Podemos modificar estas cabeceras? Poder… se puede, pero no es recomendable. Lo suyo es decirle al navegador web en cuestión el tiempo de caducidad que va a tener ese tipo de fichero, pero desde el servidor. • A nivel servidor. • Cacheo de las páginas. • Cacheo de la base de datos. • Cacheo de objetos (Object Caching). • Opcode Caching.
  29. 29. dariobf.com CACHEA CLIENTE # ------------------------------------------------------------------------------ # | Expires headers | # ------------------------------------------------------------------------------ # Serve resources with far-future expires headers. # IMPORTANT: If you don't control versioning with filename-based cache # busting, consider lowering the cache times to something like one week. <ifmodule mod_expires.c> ExpiresActive on ExpiresDefault "access plus 1 month" # CSS ExpiresByType text/css "access plus 1 year" # Data interchange ExpiresByType application/json "access plus 0 seconds” … .htaccess en http://dariobf.com/wordpress-wpo/
  30. 30. dariobf.com BASE DE DATOS • Elimina las revisiones de entradas. • Elimina los comentarios no aprobados o spam. • Elimina los comentarios de la papelera. • Elimina los metadatos de Akismet para comentarios (son muchos, creeme). • Elimina otros metadatos de los comentarios que son prescindibles. • Limpia los autoguardados en borradores. • Limpia la papelera de entradas. • Aplica acciones predeterminadas de WordPress para optimizar las tablas de la base de datos. WP-Optimize
  31. 31. dariobf.com IMÁGENES, CSS Y JS • Optimizar con Photoshop y pasar por ImageOptim si son elemento de diseño. • Utilizar WP Smush.it para optimizar las subidas. • EWWW Image Optimizer • Minificar CSS y JS con WP Minify Fix.
  32. 32. dariobf.com CONCLUSIONES • ¿Es bueno optimizar todo, siempre? • Consejo: NO OS VOLVÁIS LOCOS; Optimiza lo básico y ve puliendo poco a poco. • No siempre, hay que encontrar el equilibrio perfecto para nuestra instalación y sus medios (servidor y demás componentes)
  33. 33. dariobf.com EXTRA: +PLUGINS Plugins WPO • WP Super Cache o W3 Total Cache. • Lazy load. (carga imágenes de forma asíncrona; según el usuario hace scroll). • EWWW Image Optimizer – Optimiza multimedias cuando se suben al panel). • WP Minify. • WP Parallel Loading System – Automatiza (bastante) el domain sharding de imágenes.
  34. 34. ¡MUCHAS GRACIAS! ¿PREGUNTAS?

Iniciación de WPO para WordPress, optimízalo para que cargue mucho más rápido.

Views

Total views

461

On Slideshare

0

From embeds

0

Number of embeds

14

Actions

Downloads

10

Shares

0

Comments

0

Likes

0

×