Как улучшить «Устранить ресурсы, блокирующие рендеринг» для отчета Lighthouse (PWA)?

Question

Моя первая попытка PWA здесь: https://flowster.app/calculators/freight-class-calculator/

И я пытаюсь получить 100% в Маяке для всех категорий:)

Я прочитал страницу «Узнать больше», но не смог понять, например, как встроить Bootstrap CSS.

Есть предложения?

Answer 1

Что это означает

«Устранить ресурсы, блокирующие рендеринг» означает, что все ресурсы (CSS / JS), которые требуются для первого представления (верхнее сгибание), должны быть частью html себя (встроенный или сценарий или блок стиля);все остальные CSS / JS (которые используются где-то ниже) могут перейти к другим отдельным файлам;

Таким образом, браузер сможет быстро рисовать / отображать первый вид и затем загружать другие файлы CSS / JS;

Как это сделать

Я сам прошел через это и понял, что в bootstrap.css я едва использовал 15% классов ... вы также можете получить подсказку о неиспользуемых классах CSS внутримаяк тоже. Так что здесь вы можете выборочно включать в свой HTML только релевантные классы;

JS будет сложнее. Далее, чтобы сделать это первое представление функциональным, вы можете вставить ванильный Javascript (внутри HTML) для навигации, карусели и т. Д., Который лучше / быстрее, чем bootstrap.js;

надеюсь, это поможет ... Хорошоудачи

Answer 2

Вы должны загружать только CSS и JS в head, которые фактически необходимы для загрузки текущего «представления» (я специально не сказал «страница»). Это НЕ означает, что вы должны включить их. Вы можете прекрасно загрузить их из файла CSS или JS. Вы должны загрузить остальную часть CSS и JS в footer (файлы CSS или JS тоже подойдут).

В случае одностраничного приложения (SPA), которое также является прогрессивным веб-приложением (PWA), это всего лишь ваш экран открытия / заставки ... достаточно просто. Это должно быть очень легко получить 100% баллов. Но когда вы говорите о веб-сайте, на котором неясно, что такое «первая страница» ... это становится практически невыполнимой задачей. Умный CSS в JS или inline-решении может помочь, но его будет довольно сложно построить.

Однако существует гораздо более простое решение для веб-сайтов. Я написал как получить 100% балл Google Lighthouse , который ориентирован только на веб-сайты. TLDR: просто опустите рамки. Это может быть не решение для каждого случая, но для тех ситуаций, где это возможно, это определенно путь.