Понимание скорости страницы Google и поведение маяка при блокировании ресурсов CSS - PullRequest
0 голосов
/ 07 июня 2018

У меня есть приложение NextJs, размещенное на Zeit Now, которое я оптимизировал, чтобы оно могло запускаться в Google Page Speed ​​Insight со счетом 100/100.
Чтобы пройти «Устранить блокировку рендеринга JavaScript»и CSS в тесте над содержимым, мне нужно было сгенерировать критический CSS для целевой страницы, вставить его в тег <style/> в <head/> и переместить все <link rel="stylesheet"/> до конца телатег.
Теперь, когда я запускаю аудит с помощью Google Lighthouse, я иногда получаю предупреждение «Уменьшить таблицы стилей рендеринга», а иногда нет.
Когда появляется предупреждение, я получаю первую значимую краскупримерно через 2 с, когда его там нет, я получу его примерно через 400 мс.
Итак, мой вопрос, кому я должен доверять?

1 Ответ

0 голосов
/ 08 июня 2018

, поэтому общее решение, позволяющее избежать блокирования ресурсов CSS при сохранении хорошего первого рисования, состоит в том, чтобы встроить критический CSS с помощью тега '' в <head> и загружать файлы CSS с помощью JavaScript.
Использование NextJSХорошее решение состоит в том, чтобы встроить критический CSS, используя index.js (и все остальное в pages), а затем загрузить все зависимости css для каждого компонента, используя require() после проверки process.browser (так как он не загружаетсяна стороне сервера).
По некоторым причинам, Google Page Speed ​​Insight не рассматривал связку <link rel="stylesheet"/> в конце тега <body> как блокировку, но Google Lighouse сделал, и это видно, когда вы смотрите напервая значимая краска.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...