WPO - Alvaro Fontela
Transcript of 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