Optimización velocidad de carga

Velocidad de carga
●
El 40% de los usuarios abandonan la página si excede los
3 segundos de carga.
●
El 85% por ciento de los usuarios de movil esperan que
los sitios se cargen tan rapido como en el ordenador.
●
El 75% de los compradores no comprarán en un sitio
que con elevado tiempo de carga o con un proceso de
checkout confuso.
●
La velocidad de carga es uno de los factores que tiene
en cuenta Google en su ranking de busquedas. Puedes
leerlo aqui

2
Peticiones

3
Terminología

●
La latencia ( tiempo que tardan los datos en hacer un recorrido) es
mas importante que el ancho de banda ( cantidad de datos que
pueden llegar juntos) .
●
El TTFB ( Time To First Byte ) es un indicador que se usa para
evaluar la rapidez del backend en procesar peticiones y
mandar contenido para el navegador.

4
Terminología

5
Cascada de renderizado

WebPageTest: www.cifpvirgendegracia.com

6
Ejercicio

●
Sube la pagina de los itinerarios a 000webhost.
●
Haz un test con www.webpagetest.com y analiza la cascada de
llamandas:
● ¿Que recursos se cargan los primeros?
●¿Cuales tienen que esperar?
●¿Cuales se cargan al mismo tiempo?
●¿Cuales necesitan una nueva petición DNS ?
●¿Que tipo de recursos tardan mas en cargar?
●¿Cuanto tarda en cargarse por completo la pagina?
●¿Cuanto tarda en verse algo?
●¿A que recursos corresponde la mayoría de los bytes? ¿Y de las conexiones?

7
Herramientas de analisis

Firefox: profiler
Chrome dev: rendimiento
https://www.webpagetest.org/
https://gtmetrix.com/
https://pagespeed.web.dev/

8
Parámetros a tener en cuenta

●
Optimización de la aplicación
●
Minificación de archivos
●
Almacenamientos externos para contenidos multimedia y CDN
●
Minimizar la cantidad de conexiones
●
Cargar primero lo esencial para la visualización
●
Optimizar la carga de la parte superior
●
Imágenes.
●
Calidad de la imagen
●
Cantidad de colores ( Hay colores que sobran?)
●
Tamaño de la imagen ( Cual es el tamaño optimo?)

9
Optimización: minificación de archivos

●
El tamaño de los archivos de código influye en la carga inicial de la
pagina.
●
Se puede optimizar el tamaño mediante la extracción de
caracteres innecesarios para la maquina ( todos aquellos
necesarios para formatearlo visualmente para los humanos, como
tabuladores o retornos de carro, al igual que los comentarios )
●
Podemos usar minificadores online
●
Actualmente, muchos frameworks, al compilar para producción
minifican automáticamente.
●
Aquí puedes consultar una pequeña referencia de Google

10
Optimización: Alojamientos externos

Alojar imagenes y videos en servidores externos a nuestra aplicación

puede mejorar nuestra velocidad de carga por dos motivos:
●
Los servidores externos pueden ser mas rápidos que el servidor en
el que tengo alojada la web.
●
Reparto la carga de conexiones entre servidores, lo que favorece al
servidor y por lo tanto a mi carga.
Un CDN es una red de distribución de contenidos. Se trata de un
conjunto de servidores, que almacenan cache principalmente,
ubicados en diferentes zonas geográficas del mundo. De esta forma,
aunque algunos usuarios de tu web estén en otro país, el contenido
les llegará rápidamente, por la proximidad del servidor.

11
CDN

12
Optimización: minimizar conexiones

Todas las conexiones TCP consumen un tiempo extra, aparte de la

descarga, debido al protocolo de tres vías.
Además, todos los recursos que estén ubicados en diferentes URLs
suman una resolución DNS al inicio de todas las descargas.
Una de las técnicas relacionadas para resolver el numero de
conexiones son los sprites ( una imagen que contiene varias
imagenes, de las que solo se muestra una parte especifica en ciertas
regiones de la pagina ). Los sprites permiten descargar el mismo
tamaño de imagenes con una sola conexión.
Sube los ejemplos de Sprites a
https://css-tricks.com/css-sprites/ un alojamiento web y
analizalos con webpagetest

https://www.toptal.com/developers/css/sprite-generator

13
Optimización: primero lo esencial

Cargar al inicio de la pagina lo imprescindible para

comenzar a renderizar la parte superior de la pagina y
dejar el resto para cuando la página se haya cargado
completamente.
Por ejemplo, cargar el CSS de Bootstrap en la cabecera y su
JavaScript al final.

14
Optimización: carga de la parte superior

Nos interesa que el usuario tenga algo que ir viendo o

leyendo desde el inicio, sin tener que esperar a que se
cargue todo el sitio.
Mientras tenemos al usuario entretenido, el sitio se puede
seguir cargando.
Por lo tanto, si nuestra web tiene mucho contenido, es
recomendable colocar en la parte superior contenido que
se cargue rapidamente.

15
Importancia de las imagenes

16
Resolución de imagen
●
La resolución es la precisión del detalle en las imágenes
de mapa de bits, que se mide en píxeles por pulgada
(ppp).
●
Cuantos más píxeles por pulgada, mayor resolución.
●
El tamaño de archivo es proporcional a las dimensiones
en píxeles de la imagen.
Observa la diferencia de tamaño
según la resolución y
la diferencia en la visualización

https://pixabay.com/es/

17
Imagenes rasterizadas VS vectoriales
●
Los gráficos rasterizados son mapas de bits de imágenes.
Un mapa de bits es una cuadrícula de píxeles individuales
que, combinados, crean una imagen completa.
●
Como son estáticas, no se puede cambiar el tamaño de
las imágenes de manera eficiente, el diseño original y los
píxeles simplemente se estirarán para llenar el espacio
extra.
JPG
BMP
GIF
PNG

18
Imagenes rasterizadas VS vectoriales
●
Las imágenes vectoriales se basan en fórmulas
matemáticas que definen formas geométricas como
polígonos, líneas, curvas, círculos y rectángulos.
●
Escalar hacia arriba o hacia abajo sin degradación de la
calidad porque no dependen de los píxeles para hacer la
imagen completa.

SVG
PDF

19
Compresión con perdida y sin perdida
●
La compresión con pérdida implica eliminar algunos de
los datos de la imagen, lo que permite gran capacidad de
reducción del tamaño. JPG
●
La compresión sin perdida p or lo general se hace
eliminando los metadatos innecesarios (datos generados
automáticamente, producidos por el dispositivo que
captura la imagen). Esto implica poca capacidad de
reducción. BMP, GIF, y PNG

Si quieres saber sobre formatos de imagen ve aquí

20
Formatos de imagen

Hay que tener en cuenta que formato es mejor para cada

imagen

Herramientas de optimización de imagenes

21
Ejemplo PNG

22
Ejemplo JPG

23
Img responsive

Utilizar diferentes tamaños de imagen puede aumentar la velocidad de pagina

al cargar archivos mas pequeños, ajustados al tamaño de ventana

Ejemplo

https://developer.mozilla.org/es/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

24
Usar fuentes
●
Las fuentes de iconos nos permiten tratar estos como si
fueran letras. De esta forma tenemos una primera carga
de la fuente y, después, todo son cargas locales.
●
https://fonts.google.com/icons

25
Dibujar con CSS

Al navegador le cuesta menos renderizar un CSS que

descargar y posicionar una imagen.
Existen elementos sencillos que podemos dibujar con CSS
y no tan sencillos.
https://cybmeta.com/formas-basicas-con-css-triangulos-circulos-trapecios-rectangulos-cuadrados

https://css-tricks.com/the-shapes-of-css/

https://dev.to/raulmar/no-tengas-miedo-a-dibujar-con-css-1ck

26
Data URIs y Base-64 enconding

●
El esquema data: URI definido en las normas IETF RFC
2397 en un esquema URI que permite la inclusión de
pequeños elementos de datos en línea, como si fueran
referenciados hacia una fuente externa.
●
Podemos convertir imagenes a codificación base-64 para
incluirlos como URI aquí
●
La ventaja es el ahorro de conexiones, no la reducción de
peso.
●
Es aconsejable para imagenes pequeñas.

27
Data URIs y Base-64 enconding

<img src="data:image/png;base64,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" alt="" />

28
Limpiar CSS

●
Existen multiples herramientas que nos permiten determinar que CSS se está
usando
realmente y poder quitar reglas que no se usan o se repiten.
●
https://purifycss.online/
●
Cobertura ( Chrome )

29