10 consejos WPO WordPress

#youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui
Juan Seguí - @juansegui
10 consejos para mejorar la WPO en WordPress

¿Qué es WPO?
Web Performance Optimization - Optimización de rendimiento

¿Qué es WPO?

¿Por qué mejorar el rendimiento?
● Porcentaje de conversión.
● SEO.
● Adwords.
● Ahorrar costes.

● 47% de los consumidores esperan que la web cargue en 2 segundos o menos.
● 40% de los usuarios abandonan un sitio web si tarda más de 3 segundos en cargar.
● Un segundo de retardo en la carga de una página puede suponer una reducción de la
conversión de un 7%
● Si un e-commerce factura $100,000 al día, 1 segundo de retardo puede costarle $2,5
millones en pérdida de ventas cada año.
Fuente: KISSMETRICS

¿Cuánto debe tardar en cargar una web?
Lo normal sería entre 500 milisegundos a 2 segundos como mucho.
● Tiempo medio de carga: 5 segundos;
● Tamaño medio de página: 3Mb;
● Número medio de imágenes: 42;
● Número medio de JavaScripts: 21;
● Número medio de peticiones http: 89.
Fuente: Pingdom 2015 Stats

10 consejos WPO

1. Analizar web

1. Analizar web: wordpress, plugins y temas

¿Me cargo Jetpack?

Lightweight themes - Temas ligeros:
Buscar temas simples, muchas características
pueden complicar la carga.

¿Versión AMP?

1. Analizar web: servidor y versión PHP
Sin un buen servidor,
por mucha optimización que haya
la web seguirá siendo lenta.

Fuente: Fluent - San Francisco: http://talks.php.net/fluent15#/

● Comprobar si wordpress, plugins y themes son compatibles.

1. Analizar web: velocidad carga actual

2. Reducir carga web

2. Reducir carga web: plugins
● No utilizaré todo los plugins que existen

¿Y por qué no?
Por Seguridad
Por Rendimiento
Por no perder
el control
Porque muchos
no son necesarios

● Analizar plugins actuales y eliminar los innecesarios.
● Eliminar aquellos que consumen más de lo normal.

2. Reducir carga web: Plugins

2. Reducir carga web: configuración
● Menos artículos por página (de 10 a 7 por ejemplo).
● Limitar número de comentarios por página.
● Reducir los widgets externos (FB, twitter, etc.) y iframes.
● Segmentar páginas demasiado largas.

3. Optimizar imágenes

Servir imágenes correctamente escaladas

Loseless
(sin pérdida)
vs
Lossy
(con pérdida)

3. Optimizar imágenes: plugin regenerar thumbnails
Regenerate thumbnails

3. Optimizar imágenes: utilizar compresor imágenes

3. Optimizar imágenes: plugin
● Versión gratuita y de pago.
● Optimización sencilla / permite redimensionar.

● Bulk Edit
● WebP

● Permite especificar Lossy o Lossless.
● Permite concretar cómo será el resize.

● Gratuito.
● Muy simple.

4. Activar compresión servidor

VENTAJA: Potencia
DESVENTAJA: Consume muchos recursos

VENTAJA: Velocidad
DESVENTAJA: Necesita de otros módulos
para servir contenido dinámico

Combinar el uso de Apache y Nginx
POTENCIA VELOCIDAD

Combinar el uso de Apache y Nginx:
Juntos consiguen mejor rendimiento: Nginx como servidor estático en el front-end
y Apache como servidor dinámico en back-end.

Activar compresión GZIP

4. Activar compresión servidor: Apache .htaccess
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

4. Activar compresión servidor: Apache
Si no funciona bien directamente en htaccess, podemos aplicarlo en la
configuración de Apache.
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

4. Activar compresión servidor: Nginx
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/x-javascript text/xml
application/xml application/xml+rss text/javascript;

Gzip Compression Test: https://varvy.com/tools/gzip/

5. Utilizar cache

5. Utilizar cache
Agiliza la carga de diferentes tipos de archivos. ( disco,
navegador, bd, etc.)
¡Cuidado con la caché y los usuarios registrados!

5. Utilizar cache
● Probablemente el más completo.
● Muchas opciones, en algunos casos demasiadas.

5. Utilizar cache
● Plugin de cache de Automattic.
● Muy popular y potente.

6. Minificar (Minify)

6. Minify
¿Qué es minificar?
Eliminar todo lo innecesario del código sin que esto
afecte al funcionamiento del mismo.

6. Minify
¿Qué se elimina?
● Espacios en blanco.
● Comentarios.
● Otros caracteres innecesarios.

6. Minify
● Ejemplo
CÓDIGO ORIGINAL CÓDIGO MINIFICADO

6. Minify
● Minify HTML
● Minify CSS
● Minify JavaScript
W3 Total Cache
WP Fastest Cache

6. Minify: Autoptimize
● Mejora HTML, JavaScript y CSS.
● Combinar CSS.

6. Minify: Autoptimize

6. Minify: Fast Velocity Minify

7. Utilizar un CDN

7. Utilizar un CDN
Conjunto de servidores que contienen copias de una misma serie de
contenidos.
Están ubicados en puntos diversos de una red para poder servir sus
contenidos de manera más eficiente, según la
ubicación más cercana.

7. Utilizar un CDN: Cloudflare
● Existe una versión gratuita, para pequeñas webs personales.
● Versión de pago desde $20 / mes.

7. Utilizar un CDN: Cloudflare
● Web copiada en los servidores de cloudflare.
● Plugin muy sencillo.

7. Utilizar un CDN: MaxCDN
● Desde $20 / mes

7. Utilizar un CDN: MaxCDN
● Web replicada en varios servidores con sistema de cache.
● Se puede utilizar con cualquier plugin de cache (W3, WP Fastest Cache, etc.)

8. Utilizar HTTP y SSL

8. Utilizar HTTP2 y SSL
HTTP2 es aproximadamente el doble de rápido que la versión anterior.

A día de hoy alrededor del 11% de sitios web soportan HTTP2

Actualmente todos los navegadores soportan el protocolo
HTTP2, aunque siempre sobre HTTPS.
Se necesita un certificado SSL como Let’s Encrypt para
poder utilizar HTTP2.

9. Cargar de forma diferida

10. Comprobar mejoras

● Extensiones de chrome Page Speed Insight and checklist

No es ninguna tontería, puede que la propia
optimización se haya cargado nuestra web.

Extensiones de Chrome para medir el tiempo de carga.

10. Comprobar: app.telemetry Page Speed Monitor

10. Comprobar: Page Speed Insights and Checklist

10. Comprobar: Pingdom Tools
https://tools.pingdom.com/

10. Comprobar: Pingdom Tools

10 consejos
1. Analizar web
2. Reducir carga web
5. Utilizar cache
Por supuesto, esto no acaba aquí, pero es un buen comienzo ;)
6. Minificar (Minify)
7. Utilizar un CDN
9. Cargar de forma diferida

No hay que obsesionarse en conseguir un 100 en PageSpeed,
pero sí en conseguir que la web vuele.

Muchas gracias

10 consejos WPO WordPress

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à 10 consejos WPO WordPress

Similaire à 10 consejos WPO WordPress (20)

Plus de Juan Seguí Moreno

Plus de Juan Seguí Moreno (20)

Dernier

Dernier (17)

10 consejos WPO WordPress