WPO para WordPress

WPOWPO
parapara
WordPressWordPress
oscar
ZARAGOZA. 16 de DICIEMBRE de 2015
ETOPIA_
http://zaragozawp.es/ https://oscargascon.es/
LOVEHACKS
freelancers joint venture

WPOWPO para WordPressWordPress
Parte I
¿Qué es WPO?¿Qué es WPO?
oscar

● Crédito y agradecimientos a Javier Casares y su Guía WPO 2011 (70 pág.)
● Término acuñado por Steve Souders (ex-Yahoo, ex-Google)
● La velocidad como elemento diferenciador: muchas de las decisiones que
se tomarán sobre Internet se basarán en el rendimiento. Cuando alguien
adquiera un dispositivo, elija un proveedor, se revise un sitio web, la lealtad
de los usuarios será un factor importante a la hora de hacer mediciones.
● Cuanto MÁS RÁPIDO es un sitio MEJOR a todos los niveles pues afecta al
posicionamiento (SEO) y a la experiencia de usuario (UX): Todo se puede
comprar menos el TIEMPO
LOVEHACKS

Datos de EMPRESAS que hablan por sí solos:
– Amazon (2006): 0,1 segundos de retraso
implican una pérdida del 1% de los ingresos
– Google (2009): 0,4 segundos de retraso causan una caída del
0,59% de las búsquedas por usuario; 0,5 segundos más en
cargar implica un 25% menos de búsquedas.
– Facebook: 0,5 segundos más lento provoca una caída de
tráfico del 3%; 1 segundo provoca una caída del 6%.
oscar

¿Y los USUARIOS?
– El 47% de los usuarios esperan que una página cargue en
menos de 2 segundos.
– El 14% cambia de tienda online si la página tarda en cargar.
– El 40% de los usuarios abandona una página que tarda más
de 3 segundos en cargar.
– El 64% de los compradores que no están satisfechos cambia
de sitio para su próxima compra.
– El 52% de los compradores afirman que un sitio que carga
rápido los fideliza.
Fuente: Guía WPO. Javier Casares, 2011. LOVEHACKS

● La mejora en la rapidez de una aplicación web no afecta a un
sólo campo, sino que afecta a todas las capas y niveles web:
DISEÑO
FRONTEND RED
HARDWARE
WEB SERVER
APLICACION
BD
DATOS

FRONTEND
Imágenes
HTML
Contenido
Javascript
CSS
RWD
Plugins
RED/HARD
Conectividad
Ubicación
Servidor HW
Hosting
WEB/APP
Lenguaje
Backend
Servidor
Web
BD/DATOS
BBDD
REST
APIs
Etc...
LOVEHACKS

Parte II
El diagnósticoEl diagnóstico
oscar

Deberemos de analizar el estado de nuestra web ANTES
de iniciar ningún tipo de acción para detectar:
– Puntos débiles y carencias en optimización
– Puntuaciones obtenidas en distintos apartados
– Comparar con la competencia
– Obtener consejos de mejora
– Detectar los cuellos de botella
– Observar el timeline de carga de nuestra web
LOVEHACKS

Herramientas más comunes
● Herramientas de desarrollo de los navegadores
● Google PageSpeed
● GTMetrix (PageSpeed + YSlow)
● Pingdom Speed Test
● Dotcom Website Speed
● WebPageTest
oscar

Parte III
Optimización delOptimización del
FrontendFrontend
LOVEHACKS

Parte III.1
Optimizar códigoOptimizar código
oscar

Uno de los retos más frecuentes es REDUCIR EL
NÚMERO DE PETICIONES HTTP.
Una conexión en HTTP 1.1 con suele resolver hasta 8
conexiones simultáneamente por host.
A más número de conexiones más tiempo de
comunicación con el servidor y más ficheros a
descargar.
LOVEHACKS

¿CÓMO REDUCIR EL NÚMERO DE PETICIONES
HTTP EN WORDPRESS? (I)
– Evitar los errores 404 que dan timeout
– Eligiendo plantillas ligeras, observando el código
– Evitar temas multipropósito y one-page
– Elegir temas optimizados para WPO y/o SEO
como los basados em Génesis Framework
– Cargar desde CDNs librerías JS y/o CSS
– Cacheando contenido estático
oscar

¿CÓMO REDUCIR EL NÚMERO DE PETICIONES
HTTP EN WORDPRESS? (y II)
– Utilizar <link> en vez de @import para los CSS
– Combinando y minificando ficheros CSS y JS
– Reorganizando la carga de ficheros JS y
eliminando duplicados
– Detectando la incidencia de los plugins por
medio de los timeline en la carga de componentes
de nuestra página
oscar

ALGUNOS PLUGINS DESTINADOS A LA
OPTIMIZACIÓN DE CSS Y JS
– Better WordPress Minify Permite minificar y
agrupar la carga de ficheros CSS y JS, permitiendo
además cambiar su orden y posición de carga.
– Autoptimize Agrupa y minimiza JS, CSS y HTML.
Siempre que sea posible eliminar duplicados,
cargar JS desde repositorios externos y realizar
la carga de JS al final de la página.
LOVEHACKS

Parte III.2
Optimizar imágenesOptimizar imágenes
LOVEHACKS

Otro reto muy importante REDUCIR EL PESO DE
LAS IMÁGENES (O EVITAR SU USO) (I)
– Elegir tanto el formato como el tamaño adecuado
para cada tipo de imagen: (PNG, JPEG...) así como
la compresión
– Eliminar datos de autoría, geolocalización, EXIF...
– En el caso de imágenes muy pequeñas
plantearnos incluirlas en base64 en el código
– Utilizar Lazy load en páginas com muchas
imágenes
oscar

Otro reto muy importante REDUCIR EL PESO DE
LAS IMÁGENES (O EVITAR SU USO) (y II)
– Utilización de técnicas como CSS Sprites
combinando imágenes de mismo tamaño y/o
propósito para reducir el número de peticiones
– Evitar el uso de imágenes utilizando WebFonts y
CSS como Font Awesome para imágenes e iconos
comunes
– Generar nuestros propios repertorios de WebFonts
LOVEHACKS

ALGUNOS PLUGINS DESTINADOS A LA
OPTIMIZACIÓN DE IMÁGENES
– EWWW Image Optimizer Permite la optimización
de imágenes al añadirlas a la biblioteca. También
permite la optimización en bloque.
– WP Smush Permite la optimización de imágenes.
Cuenta com límites en la versión free.
oscar

ALGUNOS PLUGINS DESTINADOS A UTILIZAR
LAZY LOAD
– Lazy Load Las imágenes sólo son visibles cuando
se muestran em la ventana del navegador.
– BJ Lazy Load Más avanzado que el anterior se
aplica también a Iframes, widgets. No sólo a
imágenes.
LOVEHACKS

ALGUNOS PLUGINS DESTINADOS AL USO DE
WEBFONTS
– Font Awesome Icons Permite añadir a nuestro
contenido iconos (link)
– Font Awesome for menus Permite añadir iconos a
nuestros menús
oscar

Parte III.3
Optimizar el contenidoOptimizar el contenido
(plugins)(plugins)
LOVEHACKS

EL CONTENIDO
HA DE SER VISIBLE Y MANTENER LA MISMA
FUNCIONALIDAD EN CUALQUIER TIPO DE
DISPOSITIVO Y CONEXIÓN
Debemos de pensar que nuestro usuario utiliza el
nivel más bajo de tecnología.
¿Pero dónde está el límite?
ANALÍTICASANALÍTICAS
oscar

¿CÓMO ELEGIR UN PLUGIN POR SU FIABILIDAD?
– Por su velocidad de actualización
– Por su compatibilidad con nuestra versión
– Puntuación y opiniones
– Número de descargas
– Soporte al usuario
LOVEHACKS

¿CÓMO ELEGIR UN PLUGIN POR SU
OPTIMIZACIÓN?
– El que ofrezca una solución concreta al problema
– Más sencillo de configurar
– No cargue (a ser posible) librerías externas o
frameworks a WP (Zend, Symfony, etc)
– Ocupe menos memoria y ofrezca mayor
rendimiento
oscar

¿CUAL ES EL NÚMERO DE PLUGINS A
INSTALAR?
– No existe un número mínimo o máximo de plugins
– Es la necesidad para cubrir el objetivo de nuestra
web el que justifica su instalación
– Desactiva aquellos que necesites sólo
puntualmente
LOVEHACKS

PLUGINS DESTINADOS A MONITORIZAR Y
PERSONALIZAR EL USO DE PLUGINS (I)
– P3 (Plugin Performance Profiler) Plugin que
permite de forma precisa realizar un análisis del
funcionamiento de la web y de sus diferentes
secciones.
Diferencia la carga de cada uno de los plugins, el
WP-core, el tema y el uso de la Base de Datos.
oscar

PLUGINS DESTINADOS A MONITORIZAR Y
PERSONALIZAR EL USO DE PLUGINS (y II)
– Plugin Organizer Permite seleccionar en cada tipo
de post, página, custom post o admin de
WordPress queremos activar (o desactivar) un
plugin en la carga.
También permite cambiar el orden em el que se
mostrarán em el área de administración.
LOVEHACKS

Cachear el contenido estático es
FUNDAMENTAL para la mejora del
rendimiento
Se llama caché web a la caché que almacena documentos
web (es decir, páginas, imágenes, etcétera) para reducir el
ancho de banda consumido, la carga de los servidores y el
retardo en la descarga. Un caché web almacena copias de
los documentos que pasan por él, de forma que
subsiguientes peticiones pueden ser respondidas por el propio
caché, si se cumplen ciertas condiciones.
Fuente: Wikipedia oscar

PLUGINS MULTIPROPÓSITO QUE OPTIMIZAN LA
CACHÉ DE CONTENIDOS
– W3 Total Caché Plugin multipropósito que optimiza,
comprime contenidos estáticos, cachea consultas y
contenidos
– WP Super Caché Genera HTML estático para
servirlo em lugar de generarlo dinámicamente
– WordFence Aparte de un magnífico sistema de
protección frente ataques y vulnerabilidades cuenta
com su própio motor de caché de contenidos.
LOVEHACKS

Parte IV
Network, Hosting y CDNsNetwork, Hosting y CDNs
oscar

A NIVEL DE NETWORKING/SERVIDORES
– Adecuar el contenido servido al ancho de banda
– Evitar redirecciones 301, 304, 307
– Reducir el uso de CNAME
– Encontrarnos físicamente (ms) cerca de nuestros
usuarios
– Algunos hostings especializados/fiables en
WordPress WebEmpresa o DinaHosting
LOVEHACKS

Utilización de CDNs
Al margen de la utilización de CDNs de librerías y
repositorios públicos, deberemos de distribuir
nuestro contenido estático (imágenes y CSS) en
servidores de alto rendimiento.
– Amazon CloudFront
– MaxCDN
– CloudFlare Un CDN para aquellos que ya tienen
CDN
oscar

Parte V
Servdidor Web & AppServdidor Web & App
LOVEHACKS

LA ELECCIÓN DEL SERVIDOR WEB / TECNOLOGÍA
ES FUNDAMENTAL
Las tecnologías basadas en JS y peticiones
asíncronas desbancarán paulatinamente la
tradicional arquitectura cliente/servidor. WP ya
comienza a investigar dicha tecnología.
Six Things You Should Know About WordPress Moving to J
avaScript
(24/11/2015)
oscar

Apache Vs Nginx
Aunque los hosting compartidos siguen ofreciendo el
servidor Apache por su solidez, Ngnix comienza a
ser una opción interesante como alternativa.
Ngnix utiliza PHP FastCGI como alternativa al
tradicional uso de PHP como módulo en Apache.
9 Tips for Improving WordPress Performance
LOVEHACKS

Algunos módulos para Apache
Si tenemos la posibilidad de configurar nuestro próprio servidor
Apache estos son algunos de los módulos más interesantes.
– Mod_Deflate Activa la compresión GZIP.
– Mod_Cache Implementa el RFC 2616 que permite cachear
los contenidos.
– Mod_Disk_Cache: Permite que la caché se almacene en el
disco local
– Mod_Mem_Cache Permite que la caché se almacene en
la memoria de una mejor forma
– Htcacheclean Utilidad que permite optimizar el tamaño de
la caché y su mantenimiento

Algunos módulos para Apache / Nginx
PageSpeed Module Google ha desarrollado su
próprio módulo para la optimización automática de
sites.
– Permite la optimización según el ancho de banda
– Generar estadísticas de uso de caché
– Parseado del HTML y optimización de recursos
(JavaScript, CSS)
– Soporte HTTPS
– Cacheado y configuración de contenidos

Varnish
Varnish Cache es un acelerador de aplicaciones web,
también conocido como caché de proxy HTTP
inversa. Se instala delante de cualquier servidor
HTTP y se configura para almacenar en el caché del
servidor una copia del recurso solicitad. Está ideado
para aumentar el rendimiento de aplicaciones web con
contenidos pesados y APIs altamente consumidas.
Utilizado por NY Times, The Guardian, Wikipedia,
Facebook, Twitter, Vimeo...
oscar

Parte VI
Bases de Datos yBases de Datos y
Orígenes de datosOrígenes de datos
LOVEHACKS

PLUGINS DE MEJORA DE CONSULTAS Y
CACHEADO CON MYSQL
● WP- Optimize Permite optimizar el contenido
de nuestras tablas, optimizarlas (MyISAM),
programar tareas...
● Next Level Cache Cachea a nivel interno las
consultas de MySQL más frecuentes,
sustituyendo el método nativo de WP
oscar

¡¡¡Gracias!!!¡¡¡Gracias!!!
oscar
LOVEHACKS
http://zaragozawp.es/
https://oscargascon.es/
https://www.facebook.com/groups/zaragozawp/
@zaragozawp

WPO para WordPress

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

Viewers also liked

Viewers also liked (20)

Similar to WPO para WordPress

Similar to WPO para WordPress (20)

Recently uploaded

Recently uploaded (6)

WPO para WordPress