Что пытается сказать Google Lighthouse?

Question

[Norum]

Проверил свой сайт через Google Lighthouse и он выдал вот такую рекомендацию Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles и я до конца не понял, что он имеет ввиду. Вроде и скрипты из head убрал и всякое лишнее почистил, но так и не ясно в чем проблема

Сайт tempes68.beget.tech

Answer 1

[Иван Кулаков]

Абсолютно все скрипты в конец body, и сделайте по возможности в defer. Он говорит, что данные стили (в 5 кб) грузятся очень медленно. Похоже, проблема в очень медленном соединении с вашим сервером, подумайте, что может быть причиной этому, либо попробуйте CDN.

Comments

[pahom-ka]

Заметим, что именно скрипты, а не стили.
И не забываем, что defer определяет порядок загрузки скриптов по очереди, т.е. если используется jquery - сначала её грузим, потом плагины.

[Norum]

переместил все скрипты в боди в самый низ в таком порядке, верно?

<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script defer src="js/script.js"></script>
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
    <script defer src="https://kit.fontawesome.com/8e0bceeac7.js" crossorigin="anonymous"></script>

[Norum]

И еще при проверке работы на смартфоне он мне говорит использовать HTTP/2, а надо ли?

[Иван Кулаков]

Norum, если script.js использует owl.carousel.js тогда его надо после карусели. По поводу http/2 смотря какое ПО на сервере, попробуйте)

Answer 2

[pahom-ka]

Стили сначала грузим для печати, а потом переключаем для экрана, вот так

<link rel="stylesheet" media="print" href="/css/style.css" onload="this.media='all'"/>

И стили можно в 1 файл собрать.
Ещё по стилям можно заморочиться, если прогнать стили через critical-css генератор на Node.js и самые нужные - отправлять встроенными в страницу. И не забывать при этом загружать их потом отдельно, в последнем запросе, чтобы можно было закэшировать и использовать из кэша, при переходах на следующие страницы.
Ещё в рекомендациях google pagespeed много интересных примеров.
По скриптам прокомментировал на ответ выше.

Comments

[Norum]

то есть эту строчку в head так и вставлять?

[Иван Кулаков]

Norum, да