Моя первая попытка создания PWA здесь: https://flowster.app/calculators/freight-class-calculator/
И я пытаюсь получить 100% в Lighthouse по всем категориям :)
Я прочитал страницу «Подробнее», но не мог понять, например, как поставить Bootstrap CSS inline.
Какие-либо предложения?
Что это значит
«Устранение ресурсов, блокирующих отображение» означает, что все ресурсы (CSS / JS), которые требуются для первого представления (верхняя часть), должны быть частью самого HTML (встроенного или сценарий или блок стиля); все остальные CSS / JS (которые используются где-то ниже) могут перейти в свои другие отдельные файлы;
Таким образом, браузер сможет быстро нарисовать / отобразить первое представление, а затем продолжить загрузку других файлов CSS / JS;
Как это сделать?
Я сам прошел через это и понял, что в bootstrap.css я почти не использовал 15% классов ... вы также можете получить подсказку о неиспользуемых классах css в lighthouse. Так что именно здесь вы можете выборочно включать в свой HTML только соответствующие классы;
JS будет сложнее. Далее, чтобы сделать это первое представление функциональным, вы можете вставить ванильный Javascript (внутри HTML) для навигации, карусели и т. Д., Что лучше / быстрее, чем bootstrap.js;
надеюсь, это поможет ... удачи
Вы должны загружать только те CSS и JS в head, которые действительно необходимы для загрузки текущего «представления» (я намеренно НЕ сказал «страница»). Это НЕ означает, что вы должны их встроить. Вы можете отлично загрузить их из файла CSS или JS. Вы должны загрузить остальные CSS и JS в footer (файлы CSS или JS здесь тоже подойдут).
В случае одностраничного приложения (SPA), которое также является прогрессивным веб-приложением (PWA), это всего лишь ваш начальный экран / экран-заставка ... достаточно просто. Получить 100% балл по этому поводу должно быть очень легко. Но когда вы говорите о веб-сайте, на котором неясно, что такое «первая страница» ... это становится почти невыполнимой задачей. Умный CSS в JS или встроенное решение может помочь, но его довольно сложно создать.
Однако для веб-сайтов есть гораздо более простое решение. Я написал как получить 100% Google Оценка Lighthouse, ориентированная только на веб-сайты. TL; DR: просто опустите рамки. Возможно, это не решение для каждого случая, но для тех ситуаций, где это возможно, это определенно лучший способ.
