Rendimiento y velocidad, acelera tu sitio WordPress

Rendimiento y velocidad, acelera tu WordPress

[email protected] � Dani Reguera Bakhache � @dreguera

2

Cuanto mas rápido vaya un si2o web mejor

¿Qué es el WPO? •  Labores que hacemos para que nuestro sitio web sea mas

rápido •  Esas labores pueden ser en diferentes ámbitos: Plataforma,

base de datos, maquetaciones, servidores, peticiones… •  Podemos Debemos hacer WPO en:

–  Frontend –  Backend

•  En definitiva, WPO o Web Performance Optimization es el proceso de optimización de sitios web tanto a nivel usuario como a nivel servidor para reducir el tiempo de carga del mismo.

¿Por qué es tan importante que un si2o web carge rápido?

•  Cuanto más rápida vaya una web, el usuario estará más tiempo en la página

•  Cuanto más rápida vaya una web, habrá menos porcentaje de rebote

•  Cuanto más rapida vaya una web, habrá más conversiones

•  Cuanto más rápida vaya una web, mejoraremos la experiencia de usuario

•  Cuanto más rápida vaya una web, tendremos menos coste de infraestructura.

5

Para Amazon, 0.1 segundos de retraso implican una pérdida del 1% de los ingresos

6

Según AOL.com, los sitios web que funcionan rápido tienen 7-8 pag. vistas por

usuario mientras que las lentas 3-4 pag. vistas.

7

Para Bing, un segundo de retraso implica una caída del 2,8% de los ingresos, 2 segundos de

retraso implica una bajada del 4,3% de los ingresos por usuario

8

Para Google, 0,4 segundos de retraso causan una caída del 0,59% de las

búsquedas por usuario

9

Para Facebook, 0.5 segundos más lento provoca una caída de tráfico del 3%, 1

segundo provoca una caída del 6%

10

Google Maps, redujo un 30% del tamaño de sus ficheros y el número de peticiones

aumentó un 30%

11

Para Outlook.com, 6 segundos de retraso, implica 40 millones de anuncios menos al mes, lo que supone 6.000.000$ menos al

año

12

Netflix, activó el sistema gzip en sus servidores consiguiendo un aumento de entre el 13% y 25% de velocidad de carga y reducción de un 50% del

volumen de tráfico

13

Para Yahoo!, 0.4 segundos de retraso causan una caída entre el 5% y el 9% del

tráfico

Por lo general hablamos de… •  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.

14

¿Y qué pasa con las versiones para dispositivos móviles?

Navigation timing – w3c

http://www.w3.org/TR/navigation-timing/

¿Qué herramientas disponemos?

GtMetrix

•  Herramienta web gratuita que nos analiza en función de Google y Yahoo y nos evalua en función de la velocidad.

•  Nos aporta un listado de aspectos a mejorar tanto en la web como en el servidor para mejorar estas valoraciones.

•  http://gtmetrix.com

19

Pingdom Tools

•  Herramienta gratuita y muy potente que nos permite saber los tiempos de carga, el tamaño de las páginas

•  Nos permite testear desde múltiples localizaciones

•  Compartir los resultados •  Guardar históricos para saber las mejoras que

hemos ido haciendo •  http://tools.pingdom.com/fpt/

¿Qué imagen tiene Google de la velocidad de nuestro site?

Estadísticas de rastreo

Estadísticas de rastreo con WebMasterTools

•  Lo que nos dice es el tiempo en milisegundos, que tarda GoogleBot en entrar en nuestra página, indexarla y salir. No son datos de usuarios

•  Un tiempo normal sería entre 250 y 500 milisegundos

•  Un tiempo óptimo sería entre 150 y 250 •  A partir de 1seg (1000mseg) ya sería un tiempo

malo y deberíamos tomar medidas

Tiempos de carga en Google Analytics

Tiempos de carga en Google Analytics

•  Son datos sacados el 1% de nuestras visitas. •  Si quisieramos que nos sacara de todos:

•  Importancia de analizar bien los datos: –  Por país –  Por navegador –  Porcentaje de rebote –  Tiempo de estancia en página

•  https://www.youtube.com/watch?v=vWMAsIHbB5g

¿Qué tenemos que tener en cuenta con WordPress?

•  Instalación de WordPress •  Configuración de WordPress •  Plan2lla •  Los plugins (plugini's)

Instalación de WordPress

•  Lo primero el Hos2ng, ¿Qué necesitamos? – Uno de “men2ra” – Hos2ng compar2do – Dedicado

•  Hay que ser realistas con el número de visitas que tenemos, tráfico y lo más importante… ¿Cuantas visitas esperamos tener?

Si quieres que te recomiende uno…

•  Pensemos qué base de datos necesitamos… “No sólo de MySQL vive WordPress”

•  Si nos decantamos por MySQL optimicemos al máximo. (WP Optimize plugin)

•  ¿MariaDB? –  Para cargas mas complejas su optimizador trabaja mejor –  El acceso mediante views aligera el proceso de carga –  https://mariadb.com/blog/how-install-and-run-wordpress-

mariadb –  http://es.wikipedia.org/wiki/MariaDB

Nuestra base de datos

Nuestro servidor Web

•  Si nos decantamos por Apache (como la mayoría de mortales) intentemos op2mizar al máximo: –  h`ps://www.digitalocean.com/community/tutorials/how-‐to-‐op2mize-‐apache-‐web-‐server-‐performance

–  Redirecciones: del .htaccess al h`pd.conf •  Montando WordPress sobre nginx, “No sólo de Apache vive WordPress” –  h`p://mukom.mondragon.edu/socialmedia/como-‐instalar-‐wordpress-‐usando-‐nginx-‐como-‐servidor-‐web/

Optimizando caché de PHP con OPCache

•  OPcache mejora el rendimiento de PHP almacenando el código de bytes de un script precompilado en la memoria compartida, eliminando así la necesidad de PHP de cargar y analizar los script en cada petición.

•  Esta extensión está incluída en PHP 5.5.0 y posteriores, y está » disponible en PECL para las versiones de PHP 5.2, 5.3 y 5.4.

Optimizando caché de PHP con OPCache

•  $ sudo gedit /etc/php5/fpm/php.ini

–  ;opcache.enable=0 à opcache.enable=1 –  ;opcache.memory_consumption=64 à opcache.memory_consumption=128

–  ;opcache.max_accelerated_files=2000 à opcache.max_accelerated_files=4000

–  ;opcache.revalidate_freq=2 à opcache.revalidate_freq=60

•  $ sudo service php5-fpm restart

Instalación óptima de WordPress

•  Instalar la ul2ma versión siempre – $ wget h`p://wordpress.org/latest.tar.gz

•  Permisos: – Carpetas (wp-‐content, wp-‐admin, wp-‐includes) con permisos 755 (rwx r-‐x r-‐x)

– Ficheros con permsiso 644 (rw-‐ r– r–)

Instalación perfecta de WordPress

•  Optimizando el wp-config.php –  Activar la caché de WordPress:

•  define('WP_CACHE', true); //El triple de rápido –  Incrementar el autoguardado, por defecto es a 60

segundos: •  define('AUTOSAVE_INTERVAL',160);

–  Quitar las revisiones (limpieza en bbdd): •  define('WP_POST_REVISIONS', false);


•  Habilitar la compresión gzip | deflate para nuestro WordPress: –  Comprimir al máximo los contenidos:

•  U2lizar compresión gzip/deflate.

–  Lo que hacemos con este modo es comprimir los contenidos, enviarlos y descromprimirlos al ser recibidos.

– De esta manera ahorramos 2empo de transferencia. –  Si ac2vamos deflate en nuestro servidor web, todos los ficheros par2rán con la compresión ac2vada.

•  $ sudo a2enmod deflate; •  $ sudo gedit /wp-‐admin/op#ons.php;

– Gzipcompression = 1



•  Sacando partido a WP_Query –  WP_Query es una clase, una de las más importantes

del núcleo de WordPress. Se encarga de determinar la consulta necesaria a la base de datos de acuerdo a la información que se está solicitando y, además, guarda este tipo de consultas frecuentes para optimizar la carga de la página.

•  Op2mizando con WP_Query: –  h`p://dariobf.com/wp_query-‐wordpress/

Loop normal de WordPress

Loop modificado de WordPress

¿Qué es la pluginitis?

•  La dependencia extrema que tenemos de los plugins

•  Los plugins nos relentizan al máximo nuestro WordPress puesto que modifican la funcionalidad.

•  Site-Builders vs Programadores •  “Yo tengo un plugin…” “Conozco un plugin…”

“He oído hablar de un plugin que te…” “Pues con WordPress mi sobrino te lo hace gratis”

Para empezar…

Analizar los plugins

•  ¿Qué plugin me relen2za? – Por mal funcionamiento – Porque me sobreescribe código – Porque me relen2za la base de datos – Etc…

•  Op2micemos esos plugins – SEO Yoast vs Add Meta Data – WP Touch Demonio – Mul2lingüismo: mqTranslate vs WMPL/Polylang

¿Qué plugins “deberíamos” instalar?

•  Tratamiento de imágenes


•  Asincronía de carga


•  Caché: WP Super Caché, WP Total Caché

W3 Total cache

Page Caché

De esta manera sirvo a mis visitantes páginas estáticas del contenido dinámico, por lo que la carga de servidor es menor. Con esto consigo que WP no cree la página en cuanto es solicitada y al usuario le muestro la página que he guardado en memoria

Minificado de css y js

Database caché

Con esta opción lo que consigo es cachear las querys a la base de datos cada vez que hago una petición y así no pedir cada vez.

Object cache

Con esta opción lo que consigo es cachear los objetos de MySQL. Esto no siempre baja el 2empo de carga.

Browser caché

Defino de esta manera la caché del navegador para decirle cuanto tiempo tiempo deben usar ese contenido.

Reverse proxy

Vamos a introducir aquí nuestra configuración de Varnish para que funcione correctamente

Resultados – contenido cacheado

WP Otimizer

Eliminar las transacciones muertas de la base de datos

¿Algo más? Apunta…

•  U2liza HTTP 1.1 •  U2liza CSS-‐Sprites •  JetPack y su Photon para el tema de distribuir imágenes •  HyperDB para distribuir la Base de Datos •  Cookies pocas y muy pequeñas •  Domain sharing, paralelización (6 pe2ciones) •  CSS en el <header>, para el DOM •  Como mucho dos archivos CSS •  Ges2onar las DNS (root53) •  Contrata hos2ng de calidad •  Evita redirección, por favor. •  Fuentes en vez de imágenes •  Ges2ón de las fonts, siempre es mejor in da jaus (Google Fonts?) •  Especifica heigth y width en el HTML •  Ul2mos posts? Ojo cargar todo… •  …

Punto de partida

Punto de llegada

El mejor WPO es hacer las cosas bien

Con MUCHO sentido común, que es el

menos común de los sentidos…

Créditos •  Iñaki Arenaza www.slideshare.net/iareneza •  Increased frecuency by Enrie http://ernie-e.deviantart.com/art/increased-frequency-132219750 •  Móvil: http://commons.wikimedia.org/wiki/File:Personal_Health_Apps_for_Smartphones.jpg •  Fast train moving: http://commons.wikimedia.org/wiki/File:Fast_Moving_Train_India.jpg •  WPO por Javier Casares: https://dl.dropboxusercontent.com/u/19964073/Guia-WPO.pdf •  WordPress Performance http://codex.wordpress.org/WordPress_Optimization •  Blog de Darío Balbotín http://www.dariobf.com

Eskerrik asko! Dani Reguera

Mondragon Unibertsitatea [email protected]

h8ps://twi8er.com/dreguera h8ps://linkedin.com/in/danireguera

Rendimiento y velocidad, acelera tu sitio WordPress

Technology

Transcript of Rendimiento y velocidad, acelera tu sitio WordPress