0

Работаю над оптимизацией сайта. Использую pagespeed от google. Столкнулся с ошибкой

Некоторые ресурсы препятствуют загрузке контента страницы. Рекомендуем настроить загрузку необходимых ресурсов JS/CSS в первую очередь и отложить загрузку остальных ресурсов.

Вот, что я заметил:

  1. Если подключать внутренние стили через onload, то они некорректно подгружаются.
<link rel="preload" href="{% static 'assets/landing/css/photobox.css' %}" as="style" onload="this.rel='stylesheet'">
  1. Если подключать внешние стили (например, bootstrap через cdn) через onload, то они но подгружаются корректно и рейтинг немного поднимается.
<link rel="preload" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" as="style" onload="this.rel='stylesheet'">
  1. Если подключать просто через preload (без onload) любые стили, то рейт падает и pagespeed выдаёт ошибку.

Как быть в такой ситуации? Загружать стили на cdn?

Ссылка на проверку страницы на pagespeed - https://developers.google.com/speed/pagespeed/insights/?hl=RU&url=https%3A%2F%2Fc6f8b145.ngrok.io%2F&tab=mobile

1 ответ 1

1

Не критичные стили перенеси в footer. А самые важные, так называемые critical CSS вставь инлайном в head. В идеале там должны быть только те стили, которые отвечают за каркас страницы. Чтобы когда страница подгрузилась у тебя текст не пролистался вниз. А всё остальное, что отвечает за цвет и так далее, должно подключаться после отрисовки элементов.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.