wpo para wordpress
TRANSCRIPT
WPOWPO para para
WordPressWordPress
oscar
ZARAGOZA. 16 de DICIEMBRE de 2015ETOPIA_
http://zaragozawp.es/ https://oscargascon.es/
LOVEHACKSfreelancers 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
WPOWPO para WordPressWordPress
LOVEHACKSfreelancers joint venture
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%.
WPOWPO para WordPressWordPress
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.
WPOWPO para WordPressWordPress
Fuente: Guía WPO. Javier Casares, 2011. LOVEHACKSfreelancers joint venture
● 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:
WPOWPO para WordPressWordPress
DISEÑOFRONTEND RED
HARDWAREWEB SERVERAPLICACION
BDDATOS
FRONTEND
Imágenes
HTML
Contenido
Javascript
CSS
RWD
Plugins
WPOWPO para WordPressWordPress
RED/HARD
Conectividad
Ubicación
Servidor HW
Hosting
WEB/APP
Lenguaje
Backend
Servidor
Web
BD/DATOS
BBDD
REST
APIs
Etc...
LOVEHACKSfreelancers joint venture
WPOWPO para WordPressWordPress
Parte II
El diagnóstico El 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
WPOWPO para WordPressWordPress
LOVEHACKSfreelancers joint venture
Herramientas más comunes
● Herramientas de desarrollo de los navegadores
● Google PageSpeed
● GTMetrix (PageSpeed + YSlow)
● Pingdom Speed Test
● Dotcom Website Speed
● WebPageTest
WPOWPO para WordPressWordPress
oscar
WPOWPO para WordPressWordPress
Parte III
Optimización delOptimización delFrontend Frontend
LOVEHACKSfreelancers joint venture
WPOWPO para WordPressWordPress
Parte III.1
Optimizar código Optimizar 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.
WPOWPO para WordPressWordPress
LOVEHACKSfreelancers joint venture
¿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
WPOWPO para WordPressWordPress
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
WPOWPO para WordPressWordPress
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.
WPOWPO para WordPressWordPress
LOVEHACKSfreelancers joint venture
WPOWPO para WordPressWordPress
Parte III.2
Optimizar imágenesOptimizar imágenes
LOVEHACKSfreelancers joint venture
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
WPOWPO para WordPressWordPress
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
WPOWPO para WordPressWordPress
LOVEHACKSfreelancers joint venture
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.
WPOWPO para WordPressWordPress
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.
WPOWPO para WordPressWordPress
LOVEHACKSfreelancers joint venture
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
WPOWPO para WordPressWordPress
oscar
WPOWPO para WordPressWordPress
Parte III.3
Optimizar el contenidoOptimizar el contenido(plugins)(plugins)
LOVEHACKSfreelancers joint venture
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
WPOWPO para WordPressWordPress
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
WPOWPO para WordPressWordPress
LOVEHACKSfreelancers joint venture
¿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
WPOWPO para WordPressWordPress
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
WPOWPO para WordPressWordPress
LOVEHACKSfreelancers joint venture
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.
WPOWPO para WordPressWordPress
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.
WPOWPO para WordPressWordPress
LOVEHACKSfreelancers joint venture
Cachear el contenido estático es FUNDAMENTAL para la mejora del rendimientoSe 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.
WPOWPO para WordPressWordPress
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.
WPOWPO para WordPressWordPress
LOVEHACKSfreelancers joint venture
WPOWPO para WordPressWordPress
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
WPOWPO para WordPressWordPress
LOVEHACKSfreelancers joint venture
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
WPOWPO para WordPressWordPress
oscar
WPOWPO para WordPressWordPress
Parte V
Servdidor Web & AppServdidor Web & App
LOVEHACKSfreelancers joint venture
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 JavaScript(24/11/2015)
WPOWPO para WordPressWordPress
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
WPOWPO para WordPressWordPress
LOVEHACKSfreelancers joint venture
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
WPOWPO para WordPressWordPress
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
WPOWPO para WordPressWordPress
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...
WPOWPO para WordPressWordPress
oscar
WPOWPO para WordPressWordPress
Parte VI
Bases de Datos yBases de Datos yOrígenes de datosOrígenes de datos
LOVEHACKSfreelancers joint venture
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
WPOWPO para WordPressWordPress
oscar
WPOWPO para WordPressWordPress
¡¡¡Gracias!!!¡¡¡Gracias!!!
oscar
LOVEHACKSfreelancers joint venture
http://zaragozawp.es/
https://oscargascon.es/
https://www.facebook.com/groups/zaragozawp/
@zaragozawp