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 rendimiento

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

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

WebFonts y su impacto en rendimiento

14/38
Recursos

Aportes 11

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

💬 WebFonts y su impacto en rendimiento

<h4>Recursos</h4>

Developing a Robust Font Loading Strategy for CSS-Tricks-zachleat.com

typekit/webfontloader

<h4>Apuntes</h4>
  • Los webs fonts son bastantes dañinos para el performance
  • Puede impactar al punto de que el máximo debería ser 2, Lo recomendable es 1 pero si el rendimiento es crítico entonces no deberías traer web fonts
  • En general hay tres formas de cargar fuentes y cada una causa un problem
<h3>1. Como estilo</h3>
  • <link> común (i.e.: Google fonts)
  • HTML parsing no continúa hasta que se descargue la fuente
  • Bloqueante ⇒ Para el parsing del HTML, para descargar la fuente y una vez descargada, se continua con el parsing
<h3>2. De forma alterna</h3>
  • Fuente por defecto mientras carga la web Font
  • Flash of Unstyled Text (FOUT)
  • Ese cambio genera un parpadeo, el cual es perceptible para los usuarios
<h3>3. Luego del HTML parsing</h3>
  • No mostrar texto hasta que se descargue la fuente
  • Flash of Invisible Text (FOIT)

  • Google Fonts en las últimas versiones nos permite tener una fuente por defecto hasta que se cargue la que deseemos poniendo en el link &display=swap
  • Tambien podemos hacerlo con una librería open source llamada web font loader
    • Esta librería nos brinda eventos de los estados de nuestras fuentes a través de clases

RESUMEN: Las webs fonts son recursos pesados y tienen bastante costo a nivel de performance, debemos tener un límite de dos fuentes y debemos tomar en cuenta todas las estrategias que tenemos para cargarlas.

FOUT: Flash Of Unstyled Text
FOIT: Flash Of Invisible Text

Los web fonts son muy populares en el diseño web para darle estilo e identidad en términos de diseño a los sitios web web. Sin embargo, en términos de rendimiento resultan ser muy dañinos. Son tan poco recomendados que incluso las comunidades de diseñadores y desarrolladores recomiendan como máximo 2 web fonts. Si está en tus manos solo deberías un web font. Pero si realmente te interesa el rendimiento de tu sitio web, ya sea porque tus usuarios dependen del rendimiento, no deberías ni siquiera usar web font.

Pero por lo general no tener un web font en los sitios web es muy difícil. Por eso, existen 3 métodos de cargar los web fonts para reducir el impacto de la carga del sitio web. No obstante estas tres maneras traen consigo 3 problemas. miremos:

  1. MODO ESTILO: La primera forma de hacerlo es cargando los fonts como si fueran estilos CSS con la etiqueta <Link> Pero sabemos que por el CRP la carga de estilos son bloqueantes para el parsing del HTML. La carga de los fonts como estilos resultan ser bloqueantes también.
  2. FORMA ALTERNA: La segunda forma de carga es mostrando una fuente por defecto, una fuente común que ya esté en el sistema de manera predeterminada. Por ejemplo Arial es una fuente que ya viene en todos los sistemas operativos. Descargar la fuente en paralelo, y una vez que ya la fuente esté descargada, hacer el cambio de fuente. Ese cambio de fuentes resulta ser perceptible al ojo humano por eso este método se conoce como: Flash Of Unstyled Text (FOUT).
  3. DESPUES DEL HTML PARSING: esta 3ra estrategia consiste en no mostrar ningún texto hasta que se descargue la fuente. Esta estrategia se conoce como Flash Of Invisible Text (FOIT)

Google fonts es uno de los proveedores de fonts mas populares en Internet, y desde la liberación de sus últimas versiones, permite definir el comportamiento de carga de la fuente. **En los parámetros de su url puedes puedes usar el query-param display

  • Para usar Flash Of Unstyled Text (FOUT). Podemos usar el valor swap
  • Para usar Flash Of Invisible Text (FOIT). Podemos usar el valor block
<link
      href="https://fonts.googleapis.com/css?family=Muli&display=swap"
      rel="stylesheet"
 />

Pero no todos los proveedores tienen esta opción para facilitar la definición del comportamiento de carga de la fuente. Para eso podemos usar otras alternativas como:

webfontloader : https://github.com/typekit/webfontloader

Lo que entendí del blog que el profe dejó fue que básicamente había que cambiar el tamaño de la letra de forma progresiva para que el parpadeo no fuera muy brusco, sin embargo no es necesario con exactamente el tamaño de la letra si no lograr una transición suave que se podría lograr mediante la combinación del tamaño y del grosor de la letra

En esta url muestra los diferentes valores que recibe el parametro display de google fonts

También se podría usar el swap si cargamos la fuente desde css sin necesidad de agregar una librería de js:

@font-face {
    font-family: "SomeFont";
    src: url("../SomeFont.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
 }

En el src también se podría usar una url de donde proviene la fuente.

Wow, no tenía idea de Web Font Loader. Lo usaré en mis proyectos. Gracias.

<h4>WebFonts y su impacto en redimiento</h4>

Son muy malas para el rendimiento. Deberías usar solamente 1 Webfont, máximo 2.

3 maneras de cargar fuentes; 3 manera de crear problemas.

  1. Link
  2. Fuente por defecto. Flash O Unstyled Text (FOUT)
  3. No mostrar texto hasta que se descargue la fuente. Flash Of Invisible Text (FOIT)

Web Font Loader es una manera de usar JS para cargar fuentes de distintos proveedores de una forma más óptima.

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Droid Sans', 'Droid Serif']
    }
  });
</script>

Agregué lo siguiente el head del html, según clases anteriores, esto debería ayudar en el rendimiento de la carga de la librería webfont.js, no?:

<link rel="preconnect" href="https://ajax.googleapis.com" crossorigin />
    <link rel="dns-prefetch" href="https://ajax.googleapis.com" />```
Si les sale un error al hacer *npm start* Deben correr el comando *npm i webpack@latest webpack-cli@latest webpack-dev-server@latest* Ahora en el archivo webpack.config.js en vez de contentBase, poner static ```js devServer: { //contentBase: '.', static: './', }, ``` Y listo

WebFont es como tomar Coca-Cola, si puedes tomar sola 1 al mes y sí puedes no la tomes.

Agh! webfonts… nunca me han gustado.