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)

(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

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.

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

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/

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

Checklist Antidesastres WordPress - WordCamp Bilbao 2016 #WCBilbao

Plugins SEO para WP - Wordcamp Lima 2013

15.04 - Cómo alcanzar el éxito. A/B Testing para WordPress (WordCamp Barcelona)

¡Hola - WordCamp Madrid 2018 · ¡Hola !! Jepser Bernardino . Front End Developer. Conversational Data Collection. Sitios web estáticos con WordPress & React Typeform Public Site

WordCamp Central...WordPress y Moodle. También me manejo bastante bien en el campo de la accesibilidad web, por razones obvias. He realizado formación sobre accesibilidad web y llevo

Wordpress como framework - DarioBF en WordCamp Barcelona

WPO PARA WORDPRESS - SEODAY · EL HOSTING O SERVIDOR Y LA VERSIÓN DE PHP PARTE II Un hosting o servidor con un webservice basado en Nginx o LiteSpeed en lugar de Apache es indispensable

WordCamp Bilbao - De HTML a WordPress - @DarioBF

DRASSANES 52 Horario CONTRIBUTOR DAY …...WPO en WordPress para reducir costes y aumentar beneficios A sustainable business serving low-budget customers DESCANSO Time management (time

WordCamp Cantabria - Código mantenible con WordPress

SÍ, SOY MUJER - WordCamp Madrid 2018...SÍ, SOY MUJER y no nací sabiendo WordPress Ana Cirujano | 21-abr-2018 #WCMadrid Ana Cirujano Diseñadora visual y de interacción especializada

WPO - Alvaro Fontela

SEO Case Studies - WordCamp Irun 2018En WordPress 571 Nuevas webs 204.000.000 Correos electrónicos 2.000.000 Búsquedas en Google. Una receta SEO

Taller de WordPress sobre SEO, WPO y fidelización en Congreso Web

WordCamp Taller Seguridad WordPress

WordCamp Cantabria 2015 : Como hacer un Smart Theme

JavaScript WordPress y - WordCamp Central · WordPress ya utiliza JavaScript Customizr. La Librería Multimedia. Las Revisiones de los Posts. Administración de Menús. Gutenberg.

Wordcamp Lima 2014

Introducción a flexbox - WordCamp Sevilla 2016

Seminario SEO SEOPRO Bilbao 2013 WPO Miguel López