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

Question

У меня сценарий в GoogleAMP Проект, куда я не могу двигаться 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/

Прекрасный шрифт: 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. Но вы можете скачать Fontawesome's all.css файл и вручную скопировать стили из него на ваш <style amp-custom> тег. Опять же, поскольку AMP не допускает стиль более 50 KB Вы должны будете выбрать нужные стили от Fontawesome.

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