Понимание скорости страницы Google и поведение маяка при блокировании ресурсов CSS
У меня есть приложение NextJs, размещенное на Zeit Now, которое я оптимизировал, чтобы оно могло работать в Google Page Speed Insight со счетом 100/100.
Чтобы пройти тест "Устранить блокировку рендеринга JavaScript и CSS в содержимом выше сгиба", мне пришлось сгенерировать критический CSS для целевой страницы, вставить его в <style/> отметить в <head/>и переместить все <link rel="stylesheet"/> до конца тега тела.
Теперь, когда я запускаю аудит с помощью Google Lighthouse, я иногда получаю предупреждение "Уменьшить блокировку стилей рендеринга", а иногда нет.
Когда появится предупреждение, я получу первую значимую краску примерно через 2 с, а когда ее нет, я получу ее примерно через 400 мс.
Итак, мой вопрос, кому я должен доверять?
1 ответ
Поэтому общее решение, позволяющее избежать блокирования ресурсов CSS при сохранении хорошего первого рисования, состоит в том, чтобы встроить критический CSS с помощью тега '' в <head>и загрузить файлы CSS, используя JavaScript.
Используя NextJS, хорошее решение состоит в том, чтобы встроить критическую CSS, используя index.js (и что-нибудь еще в pages), а затем загрузите все зависимости CSS для каждого компонента, используя require() после проверки process.browser (поскольку он не загружает серверную часть).
По некоторым причинам, Google Page Speed Insight не рассматривал кучу <link rel="stylesheet"/> в конце <body> пометить как блокировку, но Google Lighouse сделал, и это показывает, когда вы смотрите на первую значимую краску.