wpo para wordpress

43
WPO WPO para para WordPress WordPress oscar ZARAGOZA. 16 de DICIEMBRE de 2015 ETOPIA_ http://zaragozawp.es/ https://oscargascon.es/ LOVEHACKS freelancers joint venture

Upload: oscar-gascon-arjol

Post on 15-Jan-2017

1.451 views

Category:

Internet


0 download

TRANSCRIPT

Page 1: WPO para WordPress

WPOWPO para para

WordPressWordPress

oscar

ZARAGOZA. 16 de DICIEMBRE de 2015ETOPIA_

http://zaragozawp.es/ https://oscargascon.es/

LOVEHACKSfreelancers joint venture

Page 2: WPO para WordPress

WPOWPO para WordPressWordPress

Parte I

¿Qué es WPO?¿Qué es WPO?

oscar

Page 3: WPO para WordPress

● 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

Page 4: WPO para WordPress

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

Page 5: WPO para WordPress

¿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

Page 6: WPO para WordPress

● 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

Page 7: WPO para WordPress

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

Page 8: WPO para WordPress

WPOWPO para WordPressWordPress

Parte II

El diagnóstico El diagnóstico

oscar

Page 9: WPO para WordPress

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

Page 10: WPO para WordPress

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

Page 11: WPO para WordPress

WPOWPO para WordPressWordPress

Parte III

Optimización delOptimización delFrontend Frontend

LOVEHACKSfreelancers joint venture

Page 12: WPO para WordPress

WPOWPO para WordPressWordPress

Parte III.1

Optimizar código Optimizar código

oscar

Page 13: WPO para WordPress

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

Page 14: WPO para WordPress

¿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

Page 15: WPO para WordPress

¿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

Page 16: WPO para WordPress

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

Page 17: WPO para WordPress

WPOWPO para WordPressWordPress

Parte III.2

Optimizar imágenesOptimizar imágenes

LOVEHACKSfreelancers joint venture

Page 18: WPO para WordPress

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

Page 19: WPO para WordPress

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

Page 20: WPO para WordPress

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

Page 21: WPO para WordPress

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

Page 22: WPO para WordPress

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

Page 23: WPO para WordPress

WPOWPO para WordPressWordPress

Parte III.3

Optimizar el contenidoOptimizar el contenido(plugins)(plugins)

LOVEHACKSfreelancers joint venture

Page 24: WPO para WordPress

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

Page 25: WPO para WordPress

¿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

Page 26: WPO para WordPress

¿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

Page 27: WPO para WordPress

¿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

Page 28: WPO para WordPress

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

Page 29: WPO para WordPress

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

Page 30: WPO para WordPress

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

Page 31: WPO para WordPress

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

Page 32: WPO para WordPress

WPOWPO para WordPressWordPress

Parte IV

Network, Hosting y CDNsNetwork, Hosting y CDNs

oscar

Page 33: WPO para WordPress

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

Page 34: WPO para WordPress

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

Page 35: WPO para WordPress

WPOWPO para WordPressWordPress

Parte V

Servdidor Web & AppServdidor Web & App

LOVEHACKSfreelancers joint venture

Page 36: WPO para WordPress

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

Page 37: WPO para WordPress

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

Page 38: WPO para WordPress

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

Page 39: WPO para WordPress

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

Page 40: WPO para WordPress

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

Page 41: WPO para WordPress

WPOWPO para WordPressWordPress

Parte VI

Bases de Datos yBases de Datos yOrígenes de datosOrígenes de datos

LOVEHACKSfreelancers joint venture

Page 42: WPO para WordPress

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

Page 43: WPO para WordPress

WPOWPO para WordPressWordPress

¡¡¡Gracias!!!¡¡¡Gracias!!!

oscar

LOVEHACKSfreelancers joint venture

http://zaragozawp.es/

https://oscargascon.es/

https://www.facebook.com/groups/zaragozawp/

@zaragozawp