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

You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
11 Hrs
37 Min
22 Seg

WebFonts y su impacto en rendimiento

14/38
Resources

Why do WebFonts affect the performance of a web page?

WebFonts, while popular for allowing typographic customization on websites, represent a considerable challenge to page performance. Having multiple web fonts can significantly slow down load time. It is advisable to limit the use to a maximum of two WebFonts, or even avoid them altogether in cases where performance is critical. Let's explore three methods to optimize the loading of these resources and minimize their impact on performance.

What are the three common WebFont loading strategies?

There are a variety of strategies for loading WebFonts that, while necessary for design, bring with them certain drawbacks. Let's address three basic loading methods:

  1. Normal loading via CSS: WebFonts are added via a link in the CSS, which is blocking to the rendering process, stopping HTML parsing until the font is fully downloaded.

  2. Font Shift (Flash of Unstyled Text - FoUT): Consists of using a default system font (e.g. Arial) while the desired WebFonts are loaded in parallel. This generates a noticeable "FLASH" when the fonts change, a phenomenon known as Flash of Unstyled Text.

  3. Flash of Invisible Text (FOIT): Here, no text is displayed until the WebFonts are completely downloaded, causing a moment of "invisibility" that can be disturbing to the user.

How can we optimize the loading of WebFonts?

Optimizing WebFonts involves a careful analysis of how the font loads and what tools we can use to improve this experience. Here are several useful strategies.

Using display in Google Fonts

An efficient technique is to use the display: swap property in Google Fonts, which allows displaying a text with a system font until the web font is loaded and can swap automatically when available, thus improving the user's perception.

<link href="https://fonts.googleapis.com/css2?family=Muli:ital,wght@0,400;1,300&display=swap" rel="stylesheet">

WebFontLoader for more control

For more granular control over WebFonts, it is recommended to use WebFontLoader, an open source library that facilitates font management from various vendors, such as Google Fonts, TypeKit, and Font Deck.

<script>
 WebFont.load({ google: { families: ['Muli'] } } });</script>

Implementing CSS events

The WebFontLoader library emits events based on the font state (loading, active, inactive), allowing dynamic CSS settings to switch between system fonts and WebFonts elegantly.

html { font-family: Arial, sans-serif;}
html.wf-active { font-family: 'Muli', sans-serif;}

Why limit WebFonts in your project?

Reducing the number of WebFonts not only improves performance, but also provides a more consistent user experience. Ideally, using a single WebFont, or even none at all, is recommended. By taking specific measures and using appropriate tools, such as WebFontLoader, we ensure that fonts load efficiently, avoiding unwanted effects such as invisible text or abrupt font changes. In addition, it is essential to keep learning and considering advanced strategies, such as those detailed by experts like Zach Lederman, to reach new goals in web optimization.

Contributions 11

Questions 3

Sort by:

Want to see more contributions, questions and answers from the community?

💬 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.