10 consejos para mejorar la WPO en WordPress - Ponencia Wordcamp Alicante 2017

#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.


¿Por qué mejorar el rendimiento?● 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


¿Por qué mejorar el rendimiento?¿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● No utilizaré todo los plugins que existen● No utilizaré todo los plugins que existen● No utilizaré todo los plugins que existen● No utilizaré todo los plugins que existen● No utilizaré todo los plugins que existen● No utilizaré todo los plugins que existen● No utilizaré todo los plugins que existen● No utilizaré todo los plugins que existen● No utilizaré todo los plugins que existen

● No utilizaré todo los plugins que existen● No utilizaré todo los plugins que existen● No utilizaré todo los plugins que existen● No utilizaré todo los plugins que existen● No utilizaré todo los plugins que existen● No utilizaré todo los plugins que existen● No utilizaré todo los plugins que existen● No utilizaré todo los plugins que existen● No utilizaré todo los plugins que existen● No utilizaré todo los plugins que existen


2. Reducir carga web: plugins

¿Y por qué no?

Por Seguridad

Por Rendimiento

Por no perder el control

Porque muchosno son necesarios


2. Reducir carga web: plugins

● 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 thumbnailsRegenerate 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


4. Activar compresión servidorCombinar el uso de Apache y Nginx

POTENCIA VELOCIDAD


4. Activar compresión servidorCombinar 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.


4. Activar compresión servidorActivar compresión GZIP


4. Activar compresión servidor: Apache .htaccess

<ifModule mod_gzip.c>mod_gzip_on Yesmod_gzip_dechunk Yesmod_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: ApacheSi no funciona bien directamente en htaccess, podemos aplicarlo en la configuración de Apache.

AddOutputFilterByType DEFLATE text/plainAddOutputFilterByType DEFLATE text/htmlAddOutputFilterByType DEFLATE text/xmlAddOutputFilterByType DEFLATE text/cssAddOutputFilterByType DEFLATE application/xmlAddOutputFilterByType DEFLATE application/xhtml+xmlAddOutputFilterByType DEFLATE application/rss+xmlAddOutputFilterByType DEFLATE application/javascriptAddOutputFilterByType DEFLATE application/x-javascript


4. Activar compresión servidor: Nginxgzip 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;


4. Activar compresión servidorGzip 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


5. Utilizar cache

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


5. Utilizar cache


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


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 SSLHTTP2 es aproximadamente el doble de rápido que la versión anterior.


8. Utilizar HTTP2 y SSLA día de hoy alrededor del 11% de sitios web soportan HTTP2


8. Utilizar HTTP2 y SSL

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.


10. Comprobar mejorasExtensiones 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 Toolshttps://tools.pingdom.com/

https://tools.pingdom.com/

https://tools.pingdom.com/


10. Comprobar: Pingdom Tools


10 consejos1. Analizar web2. Reducir carga web3. Optimizar imágenes4. Activar compresión servidor5. Utilizar cache

Por supuesto, esto no acaba aquí, pero es un buen comienzo ;)

6. Minificar (Minify)7. Utilizar un CDN8. Utilizar HTTP2 y SSL9. Cargar de forma diferida10. Comprobar mejoras


No hay que obsesionarse en conseguir un 100 en PageSpeed,

pero sí en conseguir que la web vuele.


Muchas gracias

10 consejos para mejorar la WPO en WordPress - Ponencia Wordcamp Alicante 2017

Internet

Transcript of 10 consejos para mejorar la WPO en WordPress - Ponencia Wordcamp Alicante 2017