Maximizar el rendimiento de la aplicación optimizando las fuentes web

De acuerdo, empecemos. Mi nombre es Lazar Nikolov. Soy un defensor del desarrollo en Sentry. Soy un ingeniero full stack, he estado programando desde 2013, profesionalmente desde 2015. Y la agenda para hoy es primero vamos a hablar sobre CLS, desplazamiento acumulativo del diseño en general, y cómo las fuentes causan CLS. Y luego vamos a pasar a las estrategias de minimización de CLS o cómo minimizar el CLS. Y luego tengo una pequeña demostración preparada para ustedes con algunas de las estrategias. De acuerdo. CLS y cómo las fuentes lo causan. Para aquellos de ustedes que no lo sepan, CLS es esto. Es un desplazamiento del diseño, ¿verdad? Tenemos un formulario de pedido. Hay un botón de sí, realizar mi pedido y un botón de no, volver atrás. Y justo antes de que el usuario presione el botón de no volver atrás, aparece un anuncio y empuja todo el formulario hacia abajo. Y luego el usuario hace clic en realizar pedido, lo cual no es realmente lo que el usuario pretendía, ¿verdad? Eso es una mala experiencia de usuario. Y la aparición del anuncio en la parte superior y el empuje hacia abajo del diseño, eso se llama un desplazamiento del diseño. De acuerdo. Así que son malos. Los desplazamientos del diseño son malos. Y en esta página en particular, supongo que la página será penalizada. Porque el desplazamiento del diseño es bastante grande.

Y la penalización ocurre con un mal puntaje CLS. Entonces, ¿cómo se calcula ese puntaje? Es el producto de la fracción de impacto y la fracción de distancia de la ventana gráfica. Entonces, ¿qué son estos dos? La fracción de impacto, ambos valores son valores decimales de 0 a 1. Y representan el porcentaje de los cambios en relación con la ventana gráfica.

Entonces, la fracción de impacto es qué porcentaje de la ventana gráfica ha sido afectado con el desplazamiento. Por ejemplo, si el encabezado en la parte superior, el título, ¿cómo se calcula el CLS? Si esa parte se movió al centro de la pantalla, se empujó hacia abajo al centro de la pantalla, eso es como el 50% de la ventana gráfica, ¿verdad? Porque se movió la mitad de la pantalla hacia abajo. Entonces será 0.5 veces la distancia que los elementos inestables han recorrido, y eso es la fracción de distancia de la ventana gráfica. Supongo que en este caso también sería 0.5. Y sí, así es como se calcula el CLS. Y hay herramientas, hay herramientas para calcular el CLS. Durante la demostración, vamos a usar solo las herramientas de depuración de Chrome, y les mostraré cómo calcular el CLS. Pero lo importante de saber...

Sí, ¿cuál es un buen puntaje CLS? Sí. Siempre es mejor. Pero tu objetivo debería ser mantenerse dentro del rango de 0.0 a 0.1, ¿de acuerdo? Eso es un buen puntaje, de 0.1 a 0.25. Necesita trabajo. Y por encima de 0.25, simplemente lo llamé `oof`, porque no vamos a hablar de eso. Definitivamente necesita mucho trabajo. Y lo más importante de saber sobre el puntaje CLS es que el que ves en tu herramienta, por ejemplo, en las herramientas de depuración de Chrome, no es el que tus usuarios van a experimentar, no necesariamente tiene que serlo.

Sí, no todos los dispositivos te darán el mismo puntaje CLS. Factores externos como la velocidad de internet o el rendimiento del dispositivo realmente afectan el puntaje CLS. Así que sí, no es el que ves en Chrome. Por ejemplo, en una conexión a internet más lenta, o no sé, si estás de excursión y tienes un teléfono Android de 10 años, supongo que el CLS será mayor debido a la forma en que el teléfono carga, sí, el dispositivo no podrá manejarlo muy rápido. Tal vez la cobertura de internet sea mala porque estás de excursión. Entonces, la internet también afectará el CLS. Y también, para estar al tanto de cuál es el puntaje CLS real en producción, deberás implementar herramientas como Sentry. Puedes medir tu puntaje CLS mientras estás en desarrollo, seguro, pero para estar al tanto de ello en producción, necesitas herramientas externas como Sentry. Y también, los beneficios adicionales de implementar Sentry en tu aplicación serían otras métricas de rendimiento y vitales web. Y también obtienes reportes de errores. Y al final te mostraré brevemente lo que obtienes.

Pero sí, el que ves en tus DevTools de Chrome no es el que tus usuarios experimentarán. Eso es importante saberlo. Entonces, ¿cómo causan las fuentes el CLS? Hay dos condiciones o situaciones. Se llaman FOJT y FOUT. FOJT es el Flash de Texto Invisible. Y eso ocurre cuando el navegador carga la página sin el texto. O sea, texto invisible. El texto es invisible, mientras se carga la fuente real. Correcto, por ejemplo, si tu fuente tiene cinco megabytes, mientras esos cinco megabytes se están descargando, no hay texto en la página web. Y luego el navegador renderiza el texto. Y FOUT, por otro lado, es el Flash de Texto sin Estilo, lo que significa que el navegador no mantiene la página sin texto. Renderiza una fuente del sistema en su lugar, que se llama Fuente de Respaldo, mientras se descarga la fuente real. Estas son las dos condiciones, el FOJT y el FOUT. Así es como las fuentes causan CLS.

De acuerdo, ahora podemos hablar sobre las estrategias de minimización, y voy a explicar con más detalle el FOUT y el FOID y verás lo que significan. En primer lugar, simplemente no uses una fuente web. No es realmente un consejo, lo sé, pero tenía que mencionarlo. Sí, si, por ejemplo, tu página no, si no es necesario para ti usar una fuente, simplemente no uses una fuente, ¿verdad? Hay hermosas fuentes del sistema disponibles que no causan CLS. Así que hazte un favor, simplemente no uses una fuente web si realmente no necesitas hacerlo, así puedes evitar todos los próximos tips que te voy a dar, simplemente no te preocupes por ellos.

Y me gusta este sitio web en la parte inferior, Modern Font Stacks, porque es un sitio web que muestra 15 combinaciones de fuentes diferentes de fuentes integradas que no causan CLS, pero puedes copiar y pegarlas. Puedes copiar y pegar la familia de fuentes, no sé, establecerla como una variable CSS, usarla. Vas a estar seguro de que tus páginas no tendrán ningún CLS, será cero, lo cual es bueno. Así que ese es el consejo número uno, si realmente no necesitas usar una fuente web, simplemente no uses una fuente web.

Consejo número dos, aloja tus propias fuentes web. Puede ser más fácil importar Google Fonts, y hay una investigación de HTTP Archive que muestra que alrededor del 80% de las páginas web en este mundo usan una fuente web, ¿verdad? Lo que significa que esas 80% de las páginas tienen CLS, y el 65% de ellas usa Google Fonts. Lo sé, es más fácil, ¿verdad? Solo copias y pegas la importación CSS, lo pones en tu aplicación y luego tienes fuentes, ¿verdad? Pero hay aspectos negativos en eso y también hay aspectos positivos de por qué deberías alojar tus propias fuentes.

Y no es tan complejo como parece, alojar tus propias fuentes. No necesitas configurar una red CDN solo para alojar tus propias fuentes. El beneficio número uno es que el navegador evita otra solicitud HTTP porque no tienes realmente una conexión a tu servidor, ¿verdad? Comenzó a descargar los archivos de tu sitio web. Llegó a un punto donde necesita descargar las fuentes CSS. Así que hay una bifurcación aquí, ¿verdad? Si estás usando una fuente de Google, necesita hacer otra solicitud HTTP para autenticarse con los servidores de Google. Creo que era con los servidores G-Static o algo así. La CDN porque no ha abierto una nueva conexión hasta este punto, ¿verdad? Y eso tiene un costo, ¿verdad? Es una solicitud HTTP completamente nueva. Pero si las mantienes en tu servidor, no hará eso, solo descargará las fuentes y las almacenará en caché localmente en el navegador. Y otro beneficio es que no necesitas realmente depender de la disponibilidad del servicio de terceros. Ahora, bueno, sí, Google Fonts, no tienen problemas con la disponibilidad, ¿verdad? Pero hay sitios web y el 35% de todos los sitios web que usan una fuente web exactamente, no usan Google Fonts. Usan algo más. Y la disponibilidad de ese servicio para servir las fuentes a tu sitio web, no puedes garantizarla realmente, ¿verdad? Por eso es mejor alojar tus propias fuentes. Y nuevamente, usar menos archivos de fuente es otro consejo. Cuando cargas diferentes pesos y cuando cargas diferentes estilos, como negrita, cursiva, cursiva negrita, etc., básicamente estás cargando un archivo de fuente, un archivo de fuente real para cada uno de ellos, ¿verdad? Así que si tienes una versión regular, negrita y cursiva, eso son como tres archivos. Así que el navegador deberá descargar esos tres archivos. Lo que debes saber es que el navegador también es capaz de imitar el peso y el estilo de la fuente. No siempre será correcto, como la fuente pretendía, así que varía. Pero es una buena idea verificar si la negrita completa, o la negrita falsa y la cursiva falsa se ven lo suficientemente bien antes de importarlas realmente.

Porque, sí, si es una fuente simple, los caracteres, las letras son negritas, el navegador intentará hacerlas más negritas. Si no es algo complejo, se verá lo suficientemente bien. Se verá prácticamente igual que si cargaste otra, como el peso específico, en lugar de dejar que el navegador lo haga. Por eso debes utilizar menos fuentes, menos archivos de fuente si puedes.

También importa el formato, así que no uses TTF u OTF. Estos son formatos de fuente del sistema. Estos no son formatos de fuente web. El beneficio del archivo de fuente WAFF 2, WAFF, supongo que es WAFF. Es el formato más moderno. Admite subconjuntos. Entonces, ¿qué es un subconjunto? Tienes una fuente, ¿verdad? Y tiene soporte para diferentes caracteres. Tienes los numéricos, tienes los caracteres especiales, tienes los caracteres alfabéticos. Y también hay caracteres de diferentes idiomas, ¿verdad? Tienes las diéresis de Alemania, tienes los caracteres de apóstrofo de Francia. Tal vez tienes soporte para idiomas asiáticos como chino, indio, etc. Si tu página no, si estás seguro de que tu sitio web nunca va a usar, no sé, diéresis o caracteres indios o chinos, puedes eliminarlos del archivo de fuente real. Y eso, por supuesto, reducirá el archivo de fuente, ¿verdad? Lo estás cargando en la fuente. Si eliminas todos los extras, que vienen con él, terminarás con un tamaño de archivo mucho más pequeño, lo cual es bueno porque el navegador no necesitará tanto tiempo para descargarlo, ¿de acuerdo? Y otro beneficio de utilizar el formato WAFF 2 es porque utiliza la compresión amplia, y eso produce tamaños de archivo aún más pequeños. Y sí, es compatible con todos los navegadores modernos. Así que simplemente, sí, simplemente utiliza WAFF 2, es sencillo.

Y el último consejo, y cuando todas las estrategias fallen, es la propiedad de visualización de fuentes, ¿de acuerdo? Hay una forma, hay como una forma inteligente de utilizar la propiedad de visualización de fuentes. Y todo el masterclass es básicamente solo para eso, ¿de acuerdo? Entonces, el valor predeterminado es auto, y la visualización de fuentes es básicamente una propiedad CSS. Te mostraré un bloque de código al final donde verás cómo se implementa. Pero el valor predeterminado es auto, ¿verdad? Eso significa que deja que el navegador elija qué estrategia va a utilizar, sí. Block es... Tiene un período de bloque corto y un período de intercambio infinito, ¿de acuerdo? Entonces, el período de bloque significa que no estoy dibujando ningún texto. Ese es el texto invisible, eso es un vacío si recuerdas. Entonces la página se carga. Inicialmente, no hay texto porque hay un período de bloque. Dice corto, son tres segundos, no es corto según los standards de hoy, pero sí, el nombre se quedó. Así que todavía lo llamamos corto, pero en realidad no es corto, son tres segundos.

Y el período de intercambio infinito significa que cuando se carga la página web, se eliminará la fuente de respaldo y se utilizará la fuente web real. Ese es el período de intercambio. Entonces, eso es como infinito, ¿verdad? Bloqueo corto e intercambio infinito. Tengo un gráfico preparado en la siguiente diapositiva, que hará las cosas mucho más claras, pero vamos a repasarlos ahora.

Existe el intercambio, a través de la propiedad de visualización, que significa sin bloqueo e intercambio infinito. Sin bloqueo significa que el navegador renderiza inmediatamente una fuente de respaldo. Y cada vez que carga la fuente web, no sé, 20 segundos después, la intercambiará. Y ese intercambio de fuente, eso marca la diferencia, sí, eso marca mucha diferencia porque la diferencia entre la fuente de respaldo y la fuente web causa el CLS. Y hay una herramienta para eso que te mostraré más tarde.

Luego tenemos la fuente de respaldo y opcional. Voy a tratar esto como prácticamente lo mismo, pero hay una pequeña diferencia al final. Un bloqueo extremadamente corto, que significa 100 milisegundos. Eso es extremadamente corto. 100 milisegundos de tiempo de bloqueo. Entonces no hay texto durante 100 milisegundos. Y luego, en el caso de la fuente de respaldo, tenemos un intercambio corto, que significa un período de intercambio de tres segundos. El navegador tiene tres segundos para descargar la fuente web para intercambiarla. Si el navegador no carga la fuente en tres segundos, nunca sucederá. Seguiremos utilizando la fuente de respaldo. Mientras que el opcional es un poco más agresivo, aún tiene los mismos períodos de bloqueo extremadamente cortos de 100 milisegundos, pero no tiene intercambio, lo que significa que si el navegador no carga la fuente dentro de los tres segundos, pero dentro de los 100 milisegundos, seguirá utilizando la fuente de respaldo. Ok, estos son los valores y así es como se ven. Ok, como puedes ver, tenemos el color gris o círculo aquí, que representa lo invisible, el período de bloqueo. Tenemos el naranja, amarillento, naranja, que representa la fuente de respaldo. Esa es la fuente del sistema que utiliza el navegador. Y el verde es el que queremos, ¿verdad? El verde es nuestra fuente personalizada que estamos cargando. Aquí está el período extremadamente corto de 100 milisegundos y el corto, que mencioné que en realidad no es corto, de tres segundos. Ahí vamos. Entonces, bloqueo significa esperar como máximo tres segundos, si no, mostrar una fuente de respaldo, si la fuente no se está cargando. Lo que significa que, ya sabes, en la mayoría de los casos, simplemente evita el bloqueo, ¿verdad? Tiene períodos de bloqueo demasiado grandes, tres segundos. Eso significa que si la fuente que estás intentando cargar no se carga durante tres segundos o más, el usuario simplemente se quedará mirando tu página con todo excepto el texto.

Y el usuario no podrá leer tu sitio web, ¿verdad? Pero eso es por lo que vinieron al sitio web en primer lugar. Así que sí, simplemente evita el bloqueo. Ahí está nuestro intercambio. Como puedes ver, no hay un período de bloqueo. Inmediatamente comienza a dibujar la fuente de respaldo, pero luego, cada vez que, porque tiene un período de intercambio infinito, cada vez que se carga la fuente web, ya sea entre los 100 milisegundos o tres segundos o incluso si son 10 segundos, simplemente hará el intercambio cuando se cargue la fuente.

Y tenemos estas dos, la de respaldo y la opcional. Como puedes ver, comienzan con texto invisible durante 100 milisegundos, pero aquí es donde ocurren los cambios. Después de 100 milisegundos, la fuente de respaldo, si la fuente web aún no se ha cargado dentro de esos 100 milisegundos, la fuente de respaldo mostrará la fuente de respaldo y comenzará otro temporizador durante 2.900 hasta el tercer segundo para que se cargue la fuente web. Si no se carga, seguirá utilizando la fuente de respaldo. Mientras que la propiedad de visualización opcional, como mencionamos, es un poco más agresiva. Solo permite 100 milisegundos, esta pequeña ventana de oportunidad para que el navegador descargue la fuente web. Si no lo hace, simplemente utilizará la fuente de respaldo durante el resto de la sesión.

Ok, sí, así es como funcionan. Supongo que decidirías optar por esta estrategia de intercambio si las fuentes son importantes para ti. ¿Verdad, si la marca es fuerte, necesitas usar ese tamaño de fuente específico? Optarías por esta estrategia de intercambio, ¿verdad? Porque tienes una fuente de respaldo y un intercambio infinito, lo que significa que incluso si lleva más de tres segundos, el usuario verá tu hermosa fuente personalizada porque eso es lo que importa para ti, ¿verdad? Supongo que optarías por la estrategia de intercambio. En ese caso, es una buena idea invertir tiempo en ajustar finamente la fuente de respaldo porque la diferencia entre la fuente de respaldo y la fuente real causará el CLS. Hay propiedades CSS como size adjust, std override, std override, line get overrides. Puedes usarlas y ajustar los valores para minimizar la diferencia entre la fuente de respaldo y la original. La original, sí, las fuentes web. Hay una, voy a intentar copiar este enlace. Hay una herramienta. Ahí vamos. Hay una herramienta que te permite previsualizar tu fuente OG y la fuente de respaldo. Las superpone una encima de la otra y verás qué gran diferencia marca. Y luego también hay esta otra herramienta que generará una fuente de respaldo y también los valores para ti, lo cual prácticamente termina tu trabajo, ¿verdad? Incluso desde el principio. Y así es como se ve todo. Tenemos, digamos que estamos cargando la fuente IBM Plex serif en la parte superior. Esto es de mi sitio web. Así que lo estoy cargando localmente.

Las guardo en public/fonts/nombre-de-la-fuente. Configuro la propiedad de visualización de la fuente en intercambio. Pero luego también defino las fuentes de respaldo. Y la herramienta que compartí con ustedes, avísenme si recibieron el enlace. Creo que recibieron el enlace. La herramienta que compartí con ustedes me recomendó usar Times New Roman. Es como la fuente de respaldo porque se ajusta bastante bien a IBM Plex serif. Y también los enlaces no funcionan. Bueno, voy a intentar arreglarlos. Al final, si tenemos, digamos 404, eso no es bueno. Voy a intentar arreglarlos al final. Si tenemos una sección de preguntas y respuestas, si tienen alguna pregunta mientras tanto, intentaré arreglarlos. Pero sí, me dio estos valores para el ajuste de tamaño y la sobrescritura de ascenso. No se me ocurrió esto. Aunque podría ajustarlos finamente. Tengo la opción de tal vez 0.2 tiene más sentido. No sé. Tengo la opción, pero esta es la fuente de respaldo ahora. Y simplemente le agregué un guion con la palabra respaldo al final. Puedo usar solo respaldo, por ejemplo. Es nuestro, ya saben, es nuestra forma de llamar a nuestras fuentes de respaldo.

Luego, en la raíz, registro una variable CSS donde coloco la fuente OG actual, la fuente web actual como la primera. Luego establezco la fuente de respaldo como la segunda. Pero por si acaso, incluso fui a las etiquetas de fuentes modernas y elegí una buena opción predeterminada. Se parece bastante a IBM Plext. No es exactamente igual, hay diferencias, pero por si acaso, también agregué estos valores. Y luego solo uso la familia de fuentes, la nueva variable CSS, como lo harías normalmente. Entonces, así es como se define una fuente de respaldo, ¿de acuerdo?

Y ahora tenemos tiempo para hacer la demostración. Esta es la aplicación de demostración. He enumerado los seis escenarios diferentes para usar Google Fonts, si estás usando las pilas de fuentes modernas, y los cuatro valores diferentes de visualización de fuentes aquí. Así que voy a abrir, voy a abrir la herramienta de análisis de rendimiento en mis DevTools, y vamos a usar esto para medir el CLS y ver cómo se carga la página en todos los escenarios diferentes. Y básicamente, veremos la diferencia.

De acuerdo, vamos a abrir la página de Google Fonts. Y déjame asegurarme, sí, tenemos la caché desactivada, eso es bueno. Voy a medir la carga de la página. Ahí vamos, y puedo detener esto. Y ahora tenemos una línea de tiempo de todo lo que sucedió mientras la página se carga. Incluso tenemos una pequeña captura de pantalla en la parte inferior. De acuerdo, así que podemos retroceder y esto es lo que sucede. Vemos el valor predeterminado. No creo que esto sea parte de la carga, pero comienza con la, sí, básicamente comienza con la fuente de respaldo, que en nuestro caso, en realidad no la definimos. El navegador simplemente usa una fuente aleatoria, una fuente serif aleatoria. Una fuente serif aleatoria. Y luego se carga y cuando se carga la fuente actual, la cambia. ¿Lo ves? Ahí está la fuente en el centro de la captura de pantalla aquí. Y aquí es donde puedes ver en el gráfico aquí que aquí es donde ocurre el FCP y aquí ocurre el desplazamiento del diseño real, ¿verdad? Eso es un desplazamiento del diseño. Tenemos el contenido en el centro, ¿verdad? Pero luego se extiende más allá del área visible porque ahora se desplaza. Y eso es porque la fuente anterior, la fuente de respaldo, no está bien definida, ¿verdad? Por lo tanto, no coincide realmente con los detalles de la fuente actual Y por eso podemos ver el desplazamiento del diseño del contenido. Entonces, si hubiera un botón en la parte inferior y si el usuario quisiera hacer clic en él, justo antes de hacerlo, el teléfono se cargaría y simplemente harían clic en el texto, ¿verdad? Ese es el... Aquí está el desplazamiento del diseño del contenido. Lo siento, desplazamiento del diseño acumulativo.

Y podemos ver el valor aquí, es 0.096. Permíteme hacer zoom. Sí, es 0.096 o aproximadamente 0.1. Todavía estamos dentro del rango de bueno, ¿verdad? Pero esta es una página simple. Solo tiene un texto. Si fuera una página un poco más compleja, podríamos tener más consecuencias porque en realidad no estamos manejando ninguno de los CLS. No estamos implementando ninguna de las estrategias aquí. ¿De acuerdo? Eso es Google Fonts.

Veamos las pilas de fuentes modernas. Voy a desactivar. Sí, la caché está desactivada. Así que hagamos otra carga de página. Haz clic en detener. Y como puedes ver, cuando vamos a configuración, cambios de diseño, no hay cambios de diseño, ¿verdad? Porque eso es lo que sucede. Estamos utilizando una fuente del sistema desde el principio. Y ya está cargada. Si revisas las capturas de pantalla y las desplazas, podemos ver que nada cambia. No hay cambios de diseño, ¿verdad? Pero no está utilizando nuestra fuente personalizada. Sé que no está utilizando nuestra fuente personalizada porque no tenemos una fuente personalizada en nuestro caso. Pero si este aspecto te funciona, este es el caso en el que simplemente no usamos una fuente, ¿verdad? Así que realmente no necesitamos preocuparnos por CLS. En este caso, incluso si colocamos este sitio web en un dispositivo antiguo, un antiguo teléfono inteligente, y no sé, lo conectamos a una red de Starbucks o WiFi, seguirá funcionando igual. Porque el navegador no tarda ni un milisegundo en cargar una fuente. Dibuja el texto de inmediato y los usuarios pueden comenzar a leer desde el principio. Así que esas son las pilas de fuentes modernas.

Veamos el bloque ahora. Echa un vistazo al bloque y voy a... ¿Sabes qué? Voy a limitar la red. Voy a ponerla en 3G rápido. Así que simulamos una red un poco más lenta que la que tengo en casa.

Entonces, será una red 3G rápida. Podemos esperar un minuto hasta que se cargue. Pero esto nos dará más tiempo y más espacio entre los eventos a medida que se carga la página.

Volvamos. En realidad, volvamos a sin limitaciones. Lo resolveremos. Ahí vamos. La página se ha cargado. Haz clic en Detener.

Bien, tenemos un CLS como puedes ver, 0.0952. Y ocurre en este punto aquí. La captura de pantalla está en blanco. Lo que significa que no hay texto, ¿verdad? Esto es FOIT. Esto es un destello de texto invisible. El que mencionamos anteriormente, ¿verdad? Porque el tiempo de bloqueo es muy largo. Y luego se carga la fuente. Y mira cómo lo renderiza el navegador. Renderiza primero el título. Porque es de arriba a abajo como el elemento. Y luego renderiza todo lo demás. ¿Ves? Así que imagina si tuvieras un botón o un formulario y necesitaras presionar algo o interactuar con un cierto elemento. Y luego esto sucede. Como usuario, creo que te sentirías perdido, ¿verdad? Te preguntarías, ¿qué pasó? ¿Dónde está mi formulario ahora? ¿A dónde voy? ¿Debo desplazarme hacia abajo, etc.? Así que sí, eso no es bueno, ¿verdad? No queremos imponer eso a nuestros usuarios. Así es como el bloqueo de visualización de fuentes realmente renderiza el texto.

Mohamed, hola, ¿puedes compartir los recursos de referencia? Sí, lo haré al final. Creo que tengo un problema con las fuentes. Voy a intentar solucionarlo al final. Y sí, volveré a compartir todo. Bien, eso fue el bloqueo. Echemos un vistazo al cambio, el cambio, el cambio con las propiedades de visualización de fuentes.

De forma predeterminada, cuando estamos usando fuentes de Google, si no lo sabías, supongo que tenemos tiempo para mostrártelo realmente. Ahí vamos, ¿ves el CSS? Esto se carga cuando agregamos la fuente de Google, y esta es la URL real. Como puedes ver, es formato WAV2. Y la visualización de fuentes está configurada de forma predeterminada en swap. Puedes cambiar esto agregando parámetros booleanos a la URL de importación, pero de forma predeterminada es swap, ¿de acuerdo? Así que las fuentes de Google prefieren swap.

Veamos, volvamos ahora, y midamos el rendimiento del swap. ¿Hicimos el swap? Sí, hicimos el swap. Bien, así es como comenzamos. Esta es la fuente de respaldo, y así es como terminamos. Esta es la fuente real, y por supuesto, va a causar el CLS. Esto es prácticamente lo mismo que la forma en que lo hacen las fuentes de Google, porque en ambos casos, no invertimos, o no hicimos nada para intentar que coincida la fuente de respaldo con la que estamos cargando. Por eso tenemos el CLS, y podemos verlo claramente. Ni siquiera necesito hacer zoom para que ustedes vean, pero sí, está claro que tenemos un cambio en el diseño. Y está en el límite aceptable de 0.097. Si lo ejecutas, es como 0.1, y ese es el, ya sabes, ese es el límite justo ahí. Ahí está el límite.

Bien, hagamos el swap. Veamos la fuente de respaldo, porque personalmente, estoy interesado en estas dos. Así que vamos a medir la carga de esta página. Ahí vamos. No tenemos un CLS. ¿Ves eso? Comenzamos con una pantalla en blanco, y si recuerdas, la fuente de respaldo y la opcional, comienzan con texto invisible, pero dentro de los 100 milisegundos, nuestra fuente web se carga realmente. Por lo tanto, inmediatamente mostró que no hubo período de intercambio. Y ahí vamos. No hay cambios en el diseño del contenido. La idea es que incluso cuando estamos en el estado de página vacía, no estoy seguro de que puedas verlo en la captura de pantalla, pero hay barras de desplazamiento en la captura de pantalla. Incluso si no hay contenido en la página, lo hay, pero es invisible. No es que no exista, ese es el punto, destello de texto invisible. Hay texto, simplemente es invisible. Pero no hay CLS porque no estamos cambiando el ancho o alto de ninguno de los elementos en nuestro sitio web.

Tenemos estos párrafos, que son elementos separados, y tenemos el H1 en la parte superior, que es un elemento separado. Pero no estamos cambiando el tamaño, por lo que empuja hacia abajo el resto del contenido. Por eso no vemos ningún CLS, aunque hay diferencias visuales antes de que se cargue la fuente y después de que se cargue la fuente. Aún así, no obtenemos CLS porque el navegador realmente reserva el espacio que se requiere para renderizar el contenido. Y luego muestra brevemente el texto estilizado o la fuente web real, ¿de acuerdo?

Voy a intentar limitar la red aquí para intentar retrasar la carga real de la fuente más de 100 milisegundos. Y esperemos que veamos, esperemos que veamos el período de cambio. Ahí vamos. Algo sucedió, ¿de acuerdo? Vamos a verlo. Comenzamos con una pantalla en blanco vacía y luego podemos ver algunas diferencias, ¿verdad? Avísame si puedes notarlo. Mira el título en la parte superior. ¿Lo ves? Mira los párrafos. Es bastante corto, déjame hacer zoom. Es bastante corto, pero hay diferencias, ¿verdad? Bueno, aún no tenemos un CLS, ¿por qué es eso? Porque nada se mueve, ¿verdad? El tamaño, tal vez el tamaño cambia, especialmente el título, ¿verdad? Porque el título, no estoy seguro si lo configuré, no, es de ancho completo. Entonces sí, no se cambian los tamaños. La fuente se carga de manera diferente, gradualmente. Primero tenemos la, ahí está la reserva del espacio. Si puedes notar las barras de desplazamiento, luego tenemos la fuente de respaldo, después de 100 milisegundos, y luego el navegador, a medida que carga la fuente, comienza a reemplazar la fuente de respaldo con la fuente real. Entonces carga primero la fuente regular, y luego esperamos un poco más, y luego, ¿dónde estaba? Vale, hice zoom demasiado. Ahí vamos, luego cargamos la fuente en negrita, ¿verdad? Podría haberla hecho más negrita. De hecho, podría haberla hecho falsamente negrita, como esta es una fuente en negrita, para que el navegador intente renderizarla para mí, pero no en este caso, ¿verdad? La fuente de respaldo es, creo, demasiado diferente a la que estamos tratando de cargar, por lo que no va a producir buenos resultados. Sí, y esa es la fuente de respaldo. Si intentamos limitarla, podemos ver que, comenzó con una pantalla en blanco. Usó la fuente de respaldo, y luego comenzó a reemplazar o intercambiar las fuentes cuando se cargan. Esa es la fuente de respaldo. Y si también revisamos la opcional, no estoy seguro si podemos ver eso, pero lo opcional era si el navegador no carga la fuente dentro de los primeros 100 milisegundos, no va a intercambiar nada. Así que veamos si realmente podemos captar eso. Todavía tengo la limitación de la fuente, creo que la página se cargó. Veamos. ¿Qué está pasando? Puedo copiar esto.

Ahí vamos. Sí, aquí está la fuente de respaldo, ¿verdad? Esta no es la fuente que queremos renderizar. Lo reconozco porque es más gruesa. El título es mucho más negrita que esta. Pero el navegador no logró cargar la fuente real en los primeros 100 milisegundos. Porque si miras el tiempo aquí, déjame intentar activarlo. Ya pasamos el segundo. ¿Lo ves aquí? Estamos, o en la parte inferior aquí en realidad. En 1.14. 1.14 segundos, todavía no tenemos la fuente cargada. Entonces el navegador usará la de respaldo. Y no sé por qué tarda como dos segundos en cargarse. Creo que hay, no es... No son 100 milisegundos cuando actualizamos. Pero creo que son 100 milisegundos cuando recibimos el evento de carga del contenido del DOM. Entonces, 100 milisegundos después, es cuando vemos la fuente de respaldo.

Pero en realidad no logró cargar la fuente porque la limitación de la red 3G rápida es demasiado lenta para que el navegador cargue la fuente. ¿Ves eso? No hay cambios en la disposición del contenido pero tampoco hay intercambio en los siete segundos. Si eliminamos la limitación, veamos si realmente podemos ver el intercambio. En realidad no lo hace, sí. Tal vez la fuente es demasiado grande para cargarse en ese tiempo. Entonces sí, opcionalmente nunca se intercambiará. Si el navegador no carga la fuente en los primeros cien milisegundos, nunca intercambiará la fuente, ¿de acuerdo?

Y esas son todas las estrategias que tenemos. Mencioné que puedes usar Sentry y así es como se ve en producción. Este es mi antiguo sitio web. Y sí, ¿ves todas estas mediciones? Esta es la primera pintura. Esta es la primera pintura de contenido, ¿verdad? Y ahí está el puntaje de CLS en la parte inferior. Como puedes ver, hay como 12 mediciones aquí dentro del cero, pero también hay 0.031 mediciones. Entonces obtiene un valor medio o promedio y me dice que el valor promedio en producción es 0.01, ¿verdad? Así que realmente no tengo que preocuparme por el CLS en mi sitio web, ¿verdad? Pero sí, aquí están todas las mediciones. Y como puedes ver, tenemos algunos valores rojos aquí, ¿verdad? El 5% de las sesiones en mi sitio web han sido terribles.

Sabes, y como 43 ha sido más o menos. Entonces, si juntamos estos dos, mi antiguo sitio web era más o menos, ¿verdad? Pero como puedes ver, estas son todas sesiones diferentes. Estas son dos sesiones que tomaron tres segundos para que ocurra el primer dolor y demás. Así que estos son todos valores de producción, ¿verdad? Eso es lo que obtienes.

Y eso es todo para la masterclass. Podemos pasar a la sección de preguntas y respuestas si quieres. Aquí está el repositorio, por cierto, si quieres clonarlo y revisarlo localmente. Ahí está el enlace a la aplicación de demostración que acabo de revisar. Puedes echarle un vistazo, puedes jugar con ella. También tenemos un sandbox. Así que si quieres probar Sentry y no estás seguro de si quieres registrarte, puedes probar el sandbox. Tenemos una página de vista, que te muestra cómo Sentry y Vue trabajan juntos y qué obtienes para tu sitio web de Vue. Puedes revisar ese enlace. Y también, sí, si estás convencido y realmente quieres probar Sentry, aquí tienes un enlace de registro para ti.

Estamos planeando cargar nuestra propia fuente. ¿Usar una fuente de respaldo es la mejor manera de reducir el CLS? Sí, uso la fuente de respaldo porque no me importa los primeros 100 milisegundos. Al menos, por ejemplo, en mi caso, en mi sitio web, estoy bastante bien con eso, ¿verdad? Pero todo depende. Entonces usarías la fuente de respaldo o si tienes que evitar el tiempo de bloqueo, entonces simplemente usa swap. Pero asegúrate de que la fuente de respaldo coincida lo más posible con la fuente original. Sí, esta es la herramienta de coincidencia automática de fuentes, solo mostraré el chat. Esta es la herramienta multi-OOBL y aquí está el enlace.

Aaron pregunta, ¿hay otras herramientas que se pueden usar para monitorear el puntaje de CLS? Creo que depende de dónde implementes, como la plataforma en la que estás implementando podría tener o no el monitoreo de CLS. ¿Qué más hay? Creo que Page Speed podría darte si tiene los data, pero creo que estos son los tres tipos de aplicaciones que puedes usar. Aquí está la herramienta de coincidencia automática de fuentes. Voy a hacer zoom para ti. Digamos que estamos usando, no sé, Ruthie. Hombre, esta es una fuente terrible para elegir. Sí, en este caso, no tienes opción. Si quieres mostrar esta fuente en tu sitio web, entonces definitivamente no hay una fuente de respaldo para eso. Pero digamos, no sé, tal vez esta, ¿verdad? Ves que la fuente recta, en realidad, Arial es mucho más adecuada.

Si recuerdas en mi caso, era Times New Roman. En este caso, tal vez usa Arial porque el tamaño, como puedes ver, es prácticamente el mismo. Si esto fuera un elemento en línea, aquí está el tamaño restante. Está aquí en este caso. Así que es realmente, realmente cercano. Aún tienes la oportunidad de redondear estos valores.

Entonces sí, esta es la coincidencia automática de fuentes. Coloca tu fuente deseada aquí, y luego te dará la fuente de respaldo. Luego puedes obtener esto y colocarlo en el playground de descriptores de FontFace. Y esta es la otra herramienta que mencioné. Aquí está el enlace a ella.

Mira cómo se superponen dos de las fuentes, una encima de la otra. Verás la diferencia aquí, ¿verdad? Ves esta línea roja? No estoy seguro de que puedas verla, pero hay una línea roja que está un poco por encima de la línea gris. Ahí es donde termina el tamaño real de una de las fuentes. Y esta es la otra. Así que esto causará algunos cambios de diseño, ¿verdad? Porque la fuente roja no necesita tanta altura como la fuente gris en nuestro caso. Entonces va a empujar o eliminar el espacio después de que se cargue. Y si haces el flash, puedes ver la diferencia. Y esto es lo que los usuarios verán, ¿verdad? Estarán viendo, por ejemplo, la fuente roja, y luego inmediatamente cambiará a la fuente negra. Así que este cambio... Sí, este cambio realmente confundirá a los usuarios. ¿Verdad? Bueno, tenemos una nueva herramienta, déjame revisar esto. Similar a la que estás mostrando, puedes cargar tu propia fuente. Oh, eso es genial. Ahí vamos, ves eso. Y ahora podemos jugar con los valores. Esto es increíble. Me gusta. Sí, ves eso? Así que realmente puedes acercar la, tratar de acercar tu fuente lo más posible a la original, ya sabes, lo más cerca posible. Muy bien. Sí, gracias por compartir. Entonces sí, estas son las herramientas. Déjame tratar de encontrar sentry.io slash four, o ver, este es el enlace de revisión de Sentry que intenté compartir, pero no funcionó. Aquí es donde puedes ver cómo puedes implementar Sentry en tu aplicación Vue, cómo instalarlo, implementarlo, y qué puede hacer, qué puede brindarte, ya sabes, en términos de superpoderes. Y sí, creo que hemos llegado al final de la masterclass. Nuevamente, gracias, gracias a todos por sintonizar. Espero que les haya gustado. Espero que haya sido informativo y sí, gracias por unirse. Nos vemos, nos vemos por aquí. Muy bien, cuídense. Adiós, adiós.