Вместо прямой ссылки на CSS Font Awesome, я использую JS из Font Awesome CDN, чтобы позволить асинхронную загрузку иконок на домашней странице, но Pagespeed Insights Google все еще отмечает его как блокирующий рендеринг JS.
Я использую пользовательскую JS-ссылку, предоставленную Font Awesome CDN, и помещаю ее в раздел <head> (я мог бы поместить ее в конец раздела <body>, но именно там Font Awesome CDN просит меня это сделать).
<script src="https://use.fontawesome.com/mycustomcode.js"></script> И да, я включил асинхронную загрузку, войдя в свою учетную запись на Font-Awesome-CDN.
Как отмечено выше, все внутри <head> блокирует рендеринг.
Другой подход - добавить атрибуты async или defer в тег:
<script async src="https://use.fontawesome.com/mycustomcode.js"></script> или
<script defer src="https://use.fontawesome.com/mycustomcode.js"></script> @Anupam предложил (совершенно справедливо) переместить тег в конец тела документа, но даже FontAwesome предлагает также добавить атрибут defer.
У Flavio Copes хорошее объяснение разницы между script async и defer.
Как упоминается в комментарии @GramThanos, все внутри тега <head> блокирует рендеринг. Font-awesome CDN делает загрузку CSS асинхронной, что ускоряет ее, но Google по-прежнему видит JS как блокирующий рендеринг.
Перемещение JS в конец тега <body> помогло избежать блокировки рендеринга и также избавиться от предупреждения PageSpeed Insights.
Я просто хочу поделиться, как я сократил время загрузки страницы на более чем 50% с помощью всего одного изменения в способе загрузки Font Awesome. Вместо включения тега script напрямую в HTML-файл, я загрузил файл JS программно с помощью 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);