Entendiendo el rendimiento

1

Todo lo que aprenderás sobre optimización web

2

¿Vale el esfuerzo optimizar un sitio web?

3

¿Cuándo realmente un sitio es rápido o lento?

Antes de optimizar...

4

Aprendiendo a medir

5

User Performance Metrics

6

Nuestro proyecto

Crítical Rendering Path

7

Etapas de render del navegador

8

Network waterfall y recursos que bloquean el navegador

9

Priorización de recursos

10

Preloading y prefetching de recursos

11

Fases Paint y Layout del Critical Render Path

CSS

12

Detectando Paints costosos y optimizando animaciones

13

Bloqueos y complejidad en selectores

WebFonts

14

WebFonts y su impacto en redimiento

Imágenes, Iconos y SVG

15

Imágenes, formato y compresión

16

Imágenes y compresión

17

¿WebFont, Imagen o SVG?

18

Técnicas avanzadas con Lazy Loading

19

Técnicas avanzadas con Responsive Loading

Aplicaciones JavaScript

20

JavaScript y aplicaciones modernas y Utilizando un servidor de producción

21

Analizando el bundle de la aplicación

22

Reduciendo el tamaño del bundle

23

Code Splitting

24

Lazy Module Loading

25

Llevando los listeners a otro nivel

26

Instalando Modal video

27

Lazy loading del modal

28

Moviendo la carga de rendering hacia el servidor: Server Side Rendering

29

Aplicando SSR

30

Pre-renderizando el contenido: Static Generation

Caché

31

Cómo funciona el Caché de recursos y CDN

32

Deploy en Netlify y automatización de contenido en GitHub Actions

33

Aplicando Github Actions

34

Interceptando los requests del navegador con Service Workers

Performance Budget

35

Performance budget y auditorias automatizadas

36

Automatizando una auditoría con Lighthouse CI

37

Medidas reales y monitoreo constante

Conclusiones

38

Conclusiones

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

¿WebFont, Imagen o SVG?

17/38
Recursos

Aportes 14

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

por lo que puedo entender. si la imagen se carga desde un archivo externo, entonces representa una llamada http extra.

mi pregunta es:
¿yo puedo tener un archivo svg pero si lo cargo desde un archivo externo tiene el mismo impacto que si lo hubiera utilizado en png?

// esto 
<img src="/icono.svg">

// tendría el mismo impacto que esto? 
<img src="/icono.png">

🎨 ¿WebFont, Imagen o SVG?

<h4>Ideas/conceptos claves</h4>

Una imagen es una matriz dividida en cuadrados cada uno, es la representación de un pixel

SVG o vectores son elementos generados matemáticamente por el navegador

Above the fold primeros 500 a 600 pixeles de la pantalla, es la parte más importante porque es lo primero que ven los usuarios

<h4>Apuntes</h4> <h3>Imagen vs Vectores</h3>
  • Si aplicamos zoom a cada uno
    • Imagen ⇒ Se verán los pixeles
    • Vector ⇒ Mantendrá la calidad
<h3>Web Fonts</h3>

Ventajas

  • Son prácticos
  • Fáciles de usar y distribuir

Desventajas

  • Un recurso más
  • HTTP Request
  • Bloqueantes
  • No son accesibles
<h3>SVG</h3>

Ventajas

  • Livianos
  • Inline en el HTML
  • Accesibilidad
  • Animaciones
  • Data URI

Desventajas

  • Se quita facilidad
  • Requiere un diseñador
  • Incrementa el largo del HTML ⇒ Puede ser incómodo para el equipo de trabajo, pero para el navegador no

¿Cuándo usarlos?

  • Logos (especialmente “Above the fold”)
  • Ilustraciones
  • Ilustraciones animadas
  • En general: gráficos de los que puedas mantener un fácil control

RESUMEN: Tenemos dos opciones las webfonts que son bastantes fáciles y practicas al momento de usarlas, pero implican un recurso más que pedir mediante HTTP, volviéndolo bloqueante a nivel de performance, una alternativa es un SVG que nos da una mejor accesibilidad, pero la desventaja es que puede llegar a ser extenso en HTML, solo afectando un poco a la experiencia de desarrollo

Les dejo este link para que puedan descargar iconos SVG de forma gratuita: https://www.flaticon.com/

Además les dejo este link para descargar Inkscape que es una herramienta gratuita para la edición de archivos SVG: https://inkscape.org/es/

Pueden usar Figma para convertir sus íconos en SVG muy fácil

  • Solo lo arrastran, lo sueltan en el app de Figma y luego lo exportan como svg.
  • Figma tiene una versión Web por ende no necesitan instalarlo 😀
  • Pueden instalar un plugin llamado iconify que tiene muchos íconos SVG ya listos

Diamante en bruto éste curso, y Jonathan lo está puliendo! Un gran curso con mucho énfasis con lo que pasa tras bastidores. Gran profesor!

Les dejo un repo con muchos svg que son de utilidad si vienes de FontAwesome

Si estan trabajando con React, puede usar svg como componentes de react, con esta pagina
https://react-svgr.com/playground/
convertira sus iconos en componentes que pueda importar, y asi no se usa el HTTP, si no que se pone directamente en el codigo y esta web optimiza los SVG
https://jakearchibald.github.io/svgomg/

En cuanto a usar SVGs o convertirlos en una IconFont, cual seria mejor opción?

Existen muchísimas páginas para obtener SVGs, la que más utilizo es remixicon

Y cuando necesito algo muy específico lo creo utilizando Figma (No soy diseñador, pero no es tan difícil crear algunos íconos 😄)

WebFonts

  • Ventajas:
    • Prácticos
    • Fáciles de usar y distribuir
  • Desventajas:
    • Bloqueantes
    • HTTP Request
      SVG
  • Ventajas
    • Livianos
    • HTML inline
    • Accesibilidad
  • Desventajas
    • Requiere diseñador
    • Incrementa el largo del HTML
    • No es tan fácil
    • Recomendación:
      • Logos
      • Ilustraciones
      • Ilustraciones animadas
      • Gráficos en general

SVG
Los SVG, junto con los webfonts, son elementos de tipo Vector. Y existe una diferencia importante entre lo que es una imagen, y lo que es un vector.

Una imagen es una matriz que se divide en cuadros, y cada cuadro representa un pixel. Mientras tanto los vectores son figuras generados matemáticamente por el navegador. Esa diferencia es notoria cuando haces bastante Zoom a la imagen comenzará a verse pixelada. Y en el vector nunca se verá pixelada.

Entre los Webfonts y los SVG es importante saber determinar cuando usar uno o el otro. Y para esto requiere analizar las ventajas y desventajas de ambos.

<h3>WebFonts</h3>

Son muy fáciles de usar y de distribuir en Internet, por ejemplo: La librería mas popular para usar iconos font-awesome utiliza webfonts para distribuirse.

Sin embargo como desventaja, dependiendo como lo cargue, puede ser bloqueante al momento de render del HTML, porque sería un recurso mas a descargar por HTTP que afecta el performance.

<h3>SVG (Scalable Vector Graphics)</h3>

Es un formato liviano, ya que es basado en XML que funciona perfectamente dentro del HTML, también permite animaciones porque otorga mucho control en los elementos que lo componen.

Sin embargo como desventaja, no es fácil de trabajarlo porque requieres de un Diseñador para crear los formatos, y en muchas ocasiones, aunque no es un problema para el navegador puede incrementar bastante el HTML si se usa de manera excesiva.

Cuando es perfecto usar SVG?

Es muy bueno usarlo en los logotipos. Cuando los logotipos son gráficas simples y maneja pocos colores, los SVG vienen bien y sobre todo cuando son iconos que están “Above the fold”. Es decir en los primeros 500 o 600 pixeles de la página. Pues son los pixeles mas importantes porque es lo primero que va a ver los usuarios.

SVG también viene bien con ilustraciones y mas si son ilustraciones animadas, gracias a que SVG es HTML puedes controlar los elementos internos de los SVG incluso con Javascript.

👌