Optimizando el perímetro de WordPress - WordCamp Santander 2016

Optimizando el perímetro de WordPress

Fernando Puente @fpuenteonline

0

BIO

Soy informático de vocación y de profesión, formador frustrado y beginner de comer y beber. 20 años de experiencia en TI, los últimos 10 años en medios de comunicación online. WordPress desde 2007, versión 2.1, activo en WP Madrid y ponente en WC desde WCSevilla2016. CTO de La Estrategia de Chapman: nuestros medios son visitados por +10MM/mes en 5 idiomas. @fpuenteonline

Optimizando el perímetro de WordPress – WC Santander 2016 - @fpuenteonline

Sumario optimizado

¿Por qué?, ¿para qué? y ¿cuándo?

Influencia del hosting y servidor

Tamaño y diseño

Lenguaje de optimización

Herramientas y test

Resumen


1

¿Por qué?


1

¿Por qué?


Optimizar para:

Mejorar o reducir el tiempo de carga

Reducir el número de recursos utilizados, atendiendo un mayor número de peticiones

Mejorar nuestro ranking SEO

Mejorar la experiencia de usuario en nuestro sitio

Aprovechar los avances tecnológicos

Obtener lo mejor de cada entorno

1


¿Este es el momento de optimizar? No, tarde. ¡Adelántate!


¿Cuándo?

Desde el momento que se empieza a

diseñar el proyecto

Sumario optimizado



Tamaño y diseño


Herramientas y test

Resumen


Hosting Por fuera, todos iguales


La importancia del hosting

Compara. Elige bien el plan, ¿sabes lo que necesitas? ¿Puedes crecer?

¿Limitaciones de tráfico o ancho de banda? Última tecnología hardware y software

Administración, mantenimiento y soporte. Pide un Restore

mensualmente. ¿Tiempos de respuesta?

Busca otros proyectos de ejemplo

Extras: balanceo de carga, escalado vertical y horizontal

2.1


¿Dónde están tus usuarios?


.htaccess

Limpieza y orden

Hacerlo permanente en el config de Apache

Sólo lo necesario: tamaño y mantenimiento

Global o de un directorio

Busca en Internet lo que necesites: todo se puede hacer

Cuidado: fuente de errores

2.2


Software de servidor

Linux

NGINX para estáticos frente a Apache Reverse proxy: NGINX, Varnish

Mínimo PHP7 o HHVM

HTTP/2 y SSL incluidos

Software de administración: Plesk, cPanel, WHM, Cozy

Extra: WP-CLI

2.3


Servidor MySQL

Local, dedicado o compartido con otros (centralizado)

Escalado: master, slave, replicación, ….

Optimización de acceso desde WP: ProxySQL, Cluster DB, Hyper DB plugin

Configuración y mantenimiento (limpieza)

2.4


Ajustes

Logs de sistema: ¿suficientes, sobran, limpieza? ¿Necesarios?

Tareas de mantenimiento y backup. ¿Cuando hacerlas? Automatización o manual. Actualizaciones de software. ¿Desde la misma plataforma?

Elimina parásitos: chupadores de contenido, image hotlinking, robots que no aportan…

Sistemas de suscripción o externos: intentar no cargar el servidor

2.5


Sumario optimizado



Tamaño y diseño


Herramientas y test

Resumen


Tamaño

El tamaño importa: compresión de archivos y minify, tamaño de imágenes, tamaño de la página

Síndrome de Diógenes: pruebas, archivos olvidados, miniaturas que no usamos

Menor número de peticiones HTTP: combinar JS y CSS, imágenes e iconos en Sprites, cacheo

Carga de scripts sólo en las páginas necesarias

3.1


Los recursos, ¿en tu casa o en la mía? CDN intermedia: cerca de tus usuarios

CDN externa: volumen y rendimiento

Repositorios: YouTube, Facebook, Flickr, etc…

Estrategias de caché

3.2


Diseño visual y lógico

Diseño 100% responsive o desktop + mobile. Ahora mismo, “Mobile first”

¿Dominio especifico para mobile?

Precarga de recursos en cliente: o dns-prefetch o preconnect o prefetch o prerender o preload

3.3


Terceros: publicidad, contenidos, utilidades… Lazy load

Sync vs. Async

Orden de carga

3.4


Sumario optimizado



Tamaño y diseño


Herramientas y test

Resumen



Robots.txt

Sitemaps específicos por tipo y por buscador

Permisos de acceso

Metaetiquetas y Microformatos

Formatos específicos: AMP

Mixed content (no SSL)

4


Sumario optimizado



Tamaño y diseño


Herramientas y test

Resumen


Test

Fija un objetivo cuantificable

Aprende a medir

Simula a un usuario: o Incógnito o Segunda visita o Dispositivos o Velocidad de conexión o Múltiples accesos

• Repite el proceso periódicamente

5.1


Herramientas

Básico: o Navegador o Google Analytics y Google Search Console

Test velocidad:

o Google PapeSpeed Insights o Pingdom: Website Speed Test y Page Speed Monitoring o GTmetrix (PageSpeed + Yslow) o Website speed test (Dotcom-Tools) o DareBoost o Webpagetest.org

Test código:

o Google Structured Data Testing Tool

5.2


Herramientas: futuro cercano


Sumario optimizado



Tamaño y diseño


Herramientas y test

Resumen


Estrategias de optimización

Desde el propio código, y antes

Servidor: tecnología y configuración

Técnicas de caché

Tamaño y compresión

Diseño visual y lógico

Integración de terceros

Apoyado en herramientas y utilidades

6


Y recuerda: ¿optimizado 100%?

Nunca, lo siento


Gracias

Fernando Puente @fpuenteonline

Technology

Optimizando el perímetro de WordPress - WordCamp Santander 2016