WPO - Alvaro Fontela

WPO

CO-FUNDADOR y ceo

RAIOLA NETWORKS

CONSULTOR WORDPRESSESPECIALIZADO EN WPOy rendimiento web

#RMC19@alvarofontela

@RaiolaNetworks

¿QUÉ ES WPO?

WPO son las siglas de Web Performance Optimization

Son una serie de técnicas y buenas prácticas con las que conseguimos mejorar la velocidad de carga de un sitio web,

alcanzando diferentes objetivos.

#smdayec @alvarofontela

@RaiolaNetworks

¿CUÁL ES EL OBJETIVO DEL WPO?

EXPERIENCIADE USUARIO

MEJORA ENLOS RASTREOS

CONSUMO DERECURSOS

#smdayec@alvarofontela

@RaiolaNetworks

TRES EJEMPLOS REALES DE WPO PARTE I

AliExpress incrementó un 27% la conversión al mejo-rar el tiempo de carga en un 36%.

#smdayec@alvarofontela

@RaiolaNetworks

TRES EJEMPLOS REALES DE WPO PARTE II

Amazon calcula que si su tiempode carga aumentara en tan solo un segundo,

perderían 1.600 millones al año.

#smdayec@alvarofontela

@RaiolaNetworks

TRES EJEMPLOS REALES DE WPO PARTE III

Zalando mejoró sus beneficios un 0,7% al reducir en-100ms su tiempo de carga.

¿Entiendes por qué necesitas aplicar técnicas WPO a tu web?

Page Cache o cache de páginaen aplicaciones web

2

#smdayec@alvarofontela

@RaiolaNetworks

¿QUÉ ES EL PAGE CACHE O CACHÉ DE PÁGINA?PARTE I

El cache de página es una técnica mediante la cual servimos a los visitantes una copia HTML

(pre-procesada) de la página web, mejorando los tiempos de respuesta y reduciendo el consumo

de recursos.

#smdayec@alvarofontela

@RaiolaNetworks

¿QUÉ ES EL PAGE CACHE O CACHÉ DE PÁGINA?PARTE II

El cache de página es la técnica WPO que más se nota y de su correcta implementacióndepende, en muchos casos, el rendimiento general del sitio web.

#smdayec@alvarofontela

@RaiolaNetworks

¿QUÉ ES EL PAGE CACHE O CACHÉ DE PÁGINA?PARTE III

Los resultados al implementar cache de página en zonas estáticas de un sitio web suelenser bastante notables, como se puede observar en esta imagen.

#smdayec@alvarofontela

@RaiolaNetworks

¿QUÉ CONSEGUIMOS CON EL PAGE CACHE?

Con el cache de página se reducen los tiempos de respuesta, lo que también nos va a benefi-

ciar cuando Google rastree nuestra web.

#smdayec@alvarofontela

@RaiolaNetworks

¿CÓMO IMPLEMENTAMOS PAGE CACHE?

Plugin o módulo para el CMSmás utilizado

Implementado como servicioen el servidor

PLUGIN SERVERMÁS DINÁNIMO Y FLEXIBLE MÁS EFICIENTE Y POTENTE

¿Entiendes por qué necesitasun cache de página?

Optimización y uso de JavaScript

3

#smdayec@alvarofontela

@RaiolaNetworks

PARTE IJAVASCRIPT ESTÁ DE MODA

Cada día se extiende más el uso de JavaScript para crear webs dinámicas y que permitan al usuario

interactuar. Ahora mismo, Javascript tiene una cuota de mercado del 95,1% en el terreno de los lenguajes de

programación ejecutados del lado del cliente.

#smdayec@alvarofontela

@RaiolaNetworks

PARTE IIJAVASCRIPT ESTÁ DE MODA

jQuery es la librería Javascript más usada: el 74,1% de los sitios web deInternet utilizan jQuery.

#smdayec@alvarofontela

@RaiolaNetworks

PARTE IIIJAVASCRIPT ESTÁ DE MODA

Sin embargo, debemos tener en cuentaque utilizar mucho Javascript puede ralentizar o incluso

bloquear dispositivos.

#smdayec@alvarofontela

@RaiolaNetworks

BENCHMARK DE JS EN DIFERENTES DISPOSITIVOS

Dependiendo de la potencia de proceso de cada dispositivo obtendremos mayor o menoragilidad al ejecutar e interpretar Javascript en el navegador al entrar a un sitio web.

#smdayec@alvarofontela

@RaiolaNetworks

PARTE I¿CÓMO PODEMOS OPTIMIZAR LA CARGA DE JS?

La fase de desarrollo es muy importante. Debemos tener en cuenta la carga de Javascript para crear una web ágil en

cualquier tipo de dispositivo, ya sea desktop o móvil.

PREVENCIÓN:PLANIFICACIÓN CUIDADA DE DISEÑO Y FUNCIONALIDADES

#smdayec@alvarofontela

@RaiolaNetworks

PARTE II¿CÓMO PODEMOS OPTIMIZAR LA CARGA DE JS?

Mediante procesos de limpieza, podemos hacer que el peso delos archivos Javascript se reduzca al eliminar los saltos delínea, los espacios, los comentarios y todos los caracteres

no interpretables.

MINIFICACIÓN Y LIMPIEZA DE JAVASCRIPT

#smdayec@alvarofontela

@RaiolaNetworks

PARTE III¿CÓMO PODEMOS OPTIMIZAR LA CARGA DE JS?

Combinar varios archivos Javascript en uno solo puede ayudarnos a simplificar y agilizar la carga de Javascript en el navegador.

COMBINADO DE JAVASCRIPT

#smdayec@alvarofontela

@RaiolaNetworks

PARTE IV¿CÓMO PODEMOS OPTIMIZAR LA CARGA DE JS?

Cargar de forma asíncrona el Javascript de una web puedeayudarnos a mostrársela al usuario antes de que se acabe de car-

gar todo el Javascript de la página.

CARGA ASÍNCRONA DE JAVASCRIPT

#smdayec@alvarofontela

@RaiolaNetworks

PARTE V¿CÓMO PODEMOS OPTIMIZAR LA CARGA DE JS?

En webs creadas con CMS podemos hacer carga condicional de JS para evitar que ciertas libre-rías Javascript, como jQuery, se carguen en partes de la página donde no se necesitan.

CARGA CONDICIONAL DE JAVASCRIPT

Javascript es un arma de doble filo…

MENOS PESO DE PÁGINA =

4

#smdayec@alvarofontela

@RaiolaNetworks

¿PESO DE PÁGINA? ¿TAMAÑO DE PÁGINA?

El peso de una página es la suma de todos los archivos que la conforman y que sedescargan en el navegador del usuario.

#smdayec@alvarofontela

@RaiolaNetworks

¿POR QUÉ TU WEB DEBE PESAR POCO?

Cada vez está más extendido el uso de conexiones de datos móviles (3G, 4G y ahora 5G), que son bastante

veloces pero dependen en gran medida de ladisponibilidad y la cobertura móvil.

#smdayec@alvarofontela

@RaiolaNetworks

RED MÓVIL DE DATOS POR PAÍSESPARTE I

Velocidad media de descarga en redes móviles (países hispanohablantes)

#smdayec@alvarofontela

@RaiolaNetworks

RED MÓVIL DE DATOS POR PAÍSESPARTE II

Disponibilidad e implantación de 4G (países hispanohablantes)

#smdayec@alvarofontela

@RaiolaNetworks

¿CÓMO REDUCIR EL PESO DE UNA WEB?PARTE I

El 99% de los sitios web de internet tienen las imágenes sin optimizar en lo que se refiere a compresión y escalado.

#smdayec@alvarofontela

@RaiolaNetworks

¿CÓMO REDUCIR EL PESO DE UNA WEB?PARTE II

No se tarda lo mismo en servir una imagen de 361,9 kB que una imagen de66,7 kB, aunque la diferencia en tiempos no es proporcional.

#smdayec@alvarofontela

@RaiolaNetworks

¿CÓMO REDUCIR EL PESO DE UNA WEB?PARTE III

Reducir el numero de peticiones y el tamaño de los recursos HTML, CSS y JSnecesarios para cargar la página también ayuda a reducir el tamaño

general de la web.

Crear y mantener una web ligera y poco pesada es una de las necesidades básicas para que cargue bien en cualquier dispositivo y con cualquier co-

nexión a Internet.

CDN para reducir latencias

5

#smdayec@alvarofontela

@RaiolaNetworks

MENOR LATENCIA = MEJOR DESCARGA

Cuanto más baja sea la latencia entre el servidor de la web y el navegador del usuario, más rápida-

mente se descargará la web, ya que los tiempos derespuesta serán mucho menores.

#smdayec@alvarofontela

@RaiolaNetworks

¿CÓMO MEJORAMOS LA LATENCIA?

Con cada vez más tráfico intercontinental, surge la necesidad de mejorar las altas latencias

provocadas por la distancia geográfica.

Ahí es donde aparecen los servicios CDN.

#smdayec@alvarofontela

@RaiolaNetworks

¿QUÉ ES UN CDN?

Un CDN es un servicio que se encarga de servir los contenidos estáticos de una web (imágenes, vídeos, PDFs, JS, CSS, etc.) desde los servidores (POPs) más

cercanos geográficamente al visitante.

#smdayec@alvarofontela

@RaiolaNetworks

EJEMPLO DE MEJORA CON UN CDN EN IMÁGENES

Misma petición realizada desde California (EE. UU.) con Pingdom Tools a unservidor ubicado en España. Test realizado con CDN y sin CDN (CloudFlare).

#smdayec@alvarofontela

@RaiolaNetworks

SERVICIOS CDN PARA UNA WEBPARTE I

Existen cientos de servicios CDN para sitios web, pero podemos separarlosen dos grupos: CloudFlare y el resto.

#smdayec@alvarofontela

@RaiolaNetworks

PARTE IISERVICIOS CDN PARA UNA WEB

Número y distribución geográfica de POPs.

Funcionalidades e innovación tecnológica.

Uptime y eficiencia de los POPs.

#smdayec@alvarofontela

@RaiolaNetworks

PARTE IIISERVICIOS CDN PARA UNA WEB

Latencia media de algunos servicios CDN (agosto 2019)

#smdayec@alvarofontela

@RaiolaNetworks

PARTE IVSERVICIOS CDN PARA UNA WEB

Latencia media de algunos servicios CDN en Europa (agosto 2019)

Un CDN nos ayudará a mantener latencias bajaspese a la distancia geográfica.

SERVIDOR WEB EFICIENTE6

#smdayec@alvarofontela

@RaiolaNetworks

SERVIDOR WEB EFICIENTEPARTE I

Cuando hablamos de un servidor web eficiente nonos referimos al hardware o la máquina, sino al servi-

cio de servidor web.

#smdayec@alvarofontela

@RaiolaNetworks

SERVIDOR WEB EFICIENTEPARTE II

¿Por qué razón un servicio de servidor web no iba a ser eficiente?

Arquitectura del software Innovación tecnológica

#smdayec@alvarofontela

@RaiolaNetworks

¿QUÉ SERVIDORES WEB EXISTEN?

43,9% 30,8% 8,2% 4,7%

Estos son los principales servidores web existentes por cuota de mercado:

#smdayec@alvarofontela

@RaiolaNetworks

¿CUÁL ES EL SERVIDOR MÁS EFICIENTE?PARTE I

Pese a no tener la cuota de mercado de Apache (más veterano), Nginx y LiteSpeedson más eficientes y tienen mejor desempeño que Apache.

#smdayec@alvarofontela

@RaiolaNetworks

PARTE II¿CUÁL ES EL SERVIDOR MÁS EFICIENTE?

Ejecutando un simple archivo PHP 100 veces con “Hello World”, LiteSpeed esel más eficiente, Nginx es el segundo y Apache el tercero.

En los tres casos se ejecuta PHP como PHP-FPM.

#smdayec@alvarofontela

@RaiolaNetworks

PARTE III¿CUÁL ES EL SERVIDOR MÁS EFICIENTE?

Ejecutando 100 usuarios concurrentes contra dos configuraciones igualescon WordPress + WP Rocket, conseguimos dos tasas de req/sec

completamente diferentes.

CONSEJOEvitar proveedores de hosting que aún utilicen Apache como servidor web.

POTENCIA DE PROCESO7

#smdayec@alvarofontela

@RaiolaNetworks

¿QUÉ ES LA POTENCIA DE PROCESO?PARTE I

La potencia de proceso en servidores web(también llamada “ciclos de CPU”)

es la potencia necesaria para ejecutar el código de un sitio webdel lado del servidor y “crear” la página HTML con recursos

que se envía al visitante.

#smdayec@alvarofontela

@RaiolaNetworks

PARTE II¿QUÉ ES LA POTENCIA DE PROCESO?

En la mayoría de los casos, el código que se ejecuta en el servidor web es PHP, ya que este lenguaje de

programación tiene una cuota de mercado del 79%en el terreno web.

#smdayec@alvarofontela

@RaiolaNetworks

MÁS O MENOS POTENCIA, ¿DE QUÉ DEPENDE?

Versión de PHPOverselling del

servidorHardware o límites

de recursos

En el caso de PHP, la velocidad con la que el intérprete PHP ejecuta el código y elconsumo de recursos resultante depende de:

#smdayec@alvarofontela

@RaiolaNetworks

PHP 7.3 MEJOR QUE PHP 7.1 Y MEJOR QUE PHP 5.6

Benchmark de PHP ejecutado en el mismo entorno con distintas versiones de PHP. Cuanto menor es el tiempo de ejecución, mejor es la velocidad.

#smdayec@alvarofontela

@RaiolaNetworks

PARTE ILÍMITES Y RECURSOS DISPONIBLES EN UN HOSTING

Para que un sitio web cargue rápido, siempre debe iren un hosting que cubra sus necesidades a nivel de recursos.

No todos los servicios y planes de hosting tienen la mismapotencia de proceso.

#smdayec@alvarofontela

@RaiolaNetworks

PARTE IILÍMITES Y RECURSOS DISPONIBLES EN UN HOSTING

Prueba realizada con un benchmark de PHP sobre un servidor vacío con los límites de CPU asignados con CloudLinux. CPU Intel Xeon E5-1650v4 y PHP 7.3.

Benchmark: php-benchmark-script.com

gracias

@alvarofontela - @RaiolaNetworks

@alvarofontela - @raiolanetworks.es

Álvaro Fontela - Raiola Networks

Alvaro Fontela - Raiola Networks