En lugar de vincular directamente al CSS de Font Awesome, estoy utilizando el js de Font Awesome CDN para permitir la carga asíncrona de los iconos en la página de inicio, pero Pagespeed Insights de Google todavía lo marca como un js que bloquea la renderización.
Estoy utilizando el enlace de js personalizado proporcionado por Font Awesome CDN y lo estoy colocando en la sección <head> (también podría ponerlo hacia el final del <body> pero eso es lo que Font Awesome CDN me pide).
<script src="https://use.fontawesome.com/mycustomcode.js"></script> Y sí, he activado la carga asíncrona iniciando sesión en mi cuenta en Font-Awesome-CDN.
Como se mencionó anteriormente, todo en la <head> es bloqueador de renderizado.
Otro enfoque es incluir los atributos async o defer en la etiqueta:
<script async src="https://use.fontawesome.com/mycustomcode.js"></script> o
<script defer src="https://use.fontawesome.com/mycustomcode.js"></script> @Anupam sugirió (acertadamente) mover la etiqueta al final del cuerpo, pero incluso FontAwesome sugiere incluir el atributo defer también.
Flavio Copes tiene una buena explicación de script async vs. defer.
Como se mencionó en el comentario de @GramThanos, todo dentro de la etiqueta <head> es bloqueador de renderizado. El CDN de Font-awesome hace que el CSS se cargue de forma asíncrona, lo que lo acelera, pero Google seguiría viendo que el JS es bloqueador de renderizado.
Moviendo el JS cerca del final del <body> hizo que no fuera bloqueador de renderizado y también eliminó la advertencia de PageSpeed Insights.
Solo quería compartir cómo reduje la página de carga en más del 50% con solo un cambio en la forma en que estaba cargando Font Awesome. En lugar de incluir directamente la etiqueta de script en el archivo HTML, cargué el archivo JS programáticamente a través de JavaScript:
var script = document.createElement('script') script.src = 'https://use.fontawesome.com/releases/v5.8.2/js/solid.js' document.head.appendChild(script); script = document.createElement('script') script.src = 'https://use.fontawesome.com/releases/v5.8.2/js/brands.js' document.head.appendChild(script); script = document.createElement('script') script.src = 'https://use.fontawesome.com/releases/v5.8.2/js/fontawesome.js' document.head.appendChild(script);