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 10

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

馃挰 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

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

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

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" />```

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.