Preload Key Request - Улучшение css-вызовов

Я пытаюсь повысить скорость загрузки веб-сайта, следуя рекомендациям Goggle PageSpeed ​​Insights. Одна из основных проблем, которые мне нужно исправить, заключается в следующем:  Рекомендации PageSpeed ​​Insights

Веб-страница вызывает этот файл css:

ссылка rel = таблица стилей href = https: ... / main.css

а файл main.css вызывает файл bootstrap.css:

В main.css: @import url ('bootstrap.css');

Я попытался прочитать руководство разработчика Google по ссылке rel = preload, но до сих пор не могу понять, какие изменения мне нужно внести. Любые рекомендации о том, как я могу изменить свои вызовы css, чтобы улучшить время загрузки страницы?

Большое спасибо


person Chris    schedule 18.01.2021    source источник


Ответы (1)


В <head> документа вам просто нужно добавить метатег, сообщающий браузеру о предварительной загрузке шрифта.

<link rel="preload" href="yoursite.com/bootstrap.css" as="style" crossorigin>

Это должно появиться перед любыми ссылками на таблицы стилей, которые могут у вас быть.

Ключевые части: as="style" и rel="preload" - crossorigin могут понадобиться, если вы используете CDN и т. Д.

Неважно, что это связанный файл CSS, он все равно будет работать.

Сделайте то же самое и для своего main.css файла.

person Graham Ritchie    schedule 18.01.2021