1

Estoy optimizando la carga de mi página web. He descubierto el atributo <link="preload" ... >, y estoy intentando usarlo. Pero los resultados no son los esperados.

Este es mi HTML, donde indico la precarga de las fuentes. En total, se cargan 8 archivos, en varias fases:

  1. preload de las fuentes.

  2. Carga async de los scripts Javascript.

  3. Ejecución del Javascript embebido en la página y asignación de DOMContentLoaded.

  4. Carga asíncrona de un archivo .json mediante XMLHTTPRequest.

  5. Carga asíncrona de la hoja de estilos.

    <head>
        <meta charset="utf-8">
        <link rel="preload" href="fonts/Roboto-Medium-webfont.woff2" as="font">
        <link rel="preload" href="fonts/Roboto-Regular-webfont.woff2" as="font">
        <link id="CSS" rel="stylesheet">
        <script src="webix.js" async></script>
        <script src="login.js" async></script>
        <script src="candidate.js" async></script>
        <script src="admin.js" async></script>
        <script src="super.js" async></script>
        <script>
    ( function( ) {
        const xhr = new XMLHttpRequest( );
    
        document.addEventListener( 'DOMContentLoaded', function( ) {
            const css = document.getElementById( 'CSS' );
    
            xhr.addEventListener( 'load', function ( ) {
                FullPageLoaded( );
            } );
    
            xhr.open( 'GET', 'login', true );
            xhr.send( );
    
            window.onload = FullPageLoaded;
            css.onload = FullPageLoaded;
            css.href = 'skins/material.css';
        } );
    } )( );
        </script>
    </head>
    <body>
    </body>
    

En Firefox, obtengo los siguientes resultados:

introducir la descripción de la imagen aquí

Lo cual es mas o menos lo esperado, puesto que en la sección de compatibilidad se indica que Firefox no soporta <link="preload" ... > (desilusión ...).

Sin embargo, en Google Chrome, obtengo lo siguiente:

introducir la descripción de la imagen aquí

Se observa que se realizan 2 peticiones para cada archivo de fuentes: una al principio, al encontrar el <link="preload" ... >, y otra al final, cuando realmente se usan dichas fuentes.

Además, Google Chrome me muestra los avisos

The resource http://localhost:8080/fonts/Roboto-Regular-webfont.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
The resource http://localhost:8080/fonts/Roboto-Medium-webfont.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

Cuando el tiempo total de carga y renderizado de la página no llega siquiera a 1 segundo.

  • ¿ Estás 2 peticiones por cada archivo de fuente es el comportamiento esperado al usar <link="preload" ... > ?

  • ¿ Que significan esos avisos de Google Chrome ?

  • ¿ Como elimino dichos avisos ?

Relacionado: Carga simultánea de archivos.

1
  • yo estoy teniendo el mismo problema, aun usando el type="font/woff2"y el crossorigin="anonymous" en el <link> se realizan 2 llamadas por cada fuente en el sitio..! Hay otra manera de evitar esto.? Commented el 5 nov. 2020 a las 15:25

1 respuesta 1

5

Creo esto podría responder tus tres preguntas a la vez

Caso de uso: Fuentes

Las fuentes son un excelente ejemplo de recursos de detección tardía que se deben obtener. Con frecuencia, se encuentran al final de uno de varios archivos CSS que cargan una página.

A fin de reducir la cantidad de tiempo que el usuario debe esperar el contenido de texto de tu sitio, así como para evitar cambios molestos entre las fuentes del sistema y las que configuraste para el sitio, puedes usar en tu código HTML con el objetivo de informar de inmediato al navegador que se necesita una fuente.

<link rel="preload" as="font" crossorigin type="font/woff2" href="myfont.woff2">

Ten en cuenta que el uso de crossorigin aquí es importante. Sin este atributo, el navegador ignora la fuente precargada y se realiza una nueva operación fetch. Esto es porque se espera que el navegador obtenga las fuentes anónimamente y la solicitud de precarga se hace anónima solo mediante el atributo crossorigin.

Web fundamentals

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.