Устранить блокировку рендера CSS без использования JavaScript - GoogleAMP

Question

У меня есть сценарий в GoogleAMP Project, где я не могу переместить CSS из заголовка тега. Или событие не может создать элемент с JavaScript. И добавьте его в заголовок позже после загрузки содержимого страницы.

Есть ли другой способ, чтобы он мог удовлетворить ограничения AMP, а также понимание GooglePageSpeed.

Спасибо.

Answer 1

Вы можете добавить свой CSS, используя свойство ссылки, занесенное в белый список AMP

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">

Следующие источники занесены в белый список и разрешены для показа шрифтов через теги ссылок:

Typography.com: https://cloud.typography.com

Fonts.com: https://fast.fonts.net

Google Fonts: https://fonts.googleapis.com

Typekit: https://use.typekit.net

Шрифт Awesome: https://maxcdn.bootstrapcdn.com, https://use.fontawesome.com

Для получения дополнительной информации нажмите здесь

Обновление: для аналитики GooglePageSpeed ​​(блокировка рендеринга) css

вы можете использовать вот так

<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="preload" as="style">

Примечание: предварительная загрузка работает только с современным браузером

Answer 2

Хорошо, насколько я знаю, нет способа загрузить стороннюю css на страницу AMP. Но вы можете скачать файл all.css в fontawesome и вручную скопировать из него стили в тег <style amp-custom>. Опять же, поскольку AMP не допускает стиль более чем 50 KB, вам придется вручную выбирать нужные стили из fontawesome.

PS: Я не уверен, есть ли какие-либо проблемы с авторским правом при использовании потрясающих стилей, как описано выше, пожалуйста, проверьте это. Но это гарантированно работает.