Отложить неиспользованный CSS

Question

У меня есть критический CSS-процесс, который предотвращает флеш-unstyled-контент (FOUC) для содержимого страницы, превышающего фолд.

Я застрял на 'отложить неиспользованный CSS'Это момент, который подчеркивают идеи Google PageSpeed ​​(маяк) и / или Аудит эффективности Chrome.

Я просмотрел другие статьи, но они не работают.

Подводя итог, я попыталсяпока что.

• loadCSS ()
• Скрипт, использующий requestAnimationFrame

Ссылка: Оптимизация доставки CSS: Как отложить загрузку CSS?

Если я задержу загрузку скрипта с помощью setTimeout на фиксированное время, равное 3 секундам, проблема «отложить неиспользуемый CSS» исчезнет.3 секунды - это то, что нужно для теста Google PageSpeed ​​Insights (для мобильных устройств), поскольку они являются более медленными устройствами, но 3 секунды - это много для настольных компьютеров, которые обычно имеют большую вычислительную мощность (обратите внимание, не всегда верно, следовательно, исключая логику на основе агента пользователя).

Таким образом, вопрос сводится к тому, как мне отложить загрузку CSS на наименьшее количество времени, независимо от типа устройства или характеристик.

Не стесняйтесь выдвигать любые грубые идеи, я попробую ихи сообщите, если ваша идея сработает, мы обновим код и отметим, что в вашем ответе есть выбранный.

Следующим в моем списке, чтобы попробовать, является requestAnimationFrame + небольшая фиксированная задержка.

Answer 1

Загрузка CSS вручную на основе двух триггеров, в зависимости от того, что произойдет раньше.

• [setTimeout 2500ms]
• [Событие прокрутки]

<script>
    var raf = requestAnimationFrame || mozRequestAnimationFrame ||
    webkitRequestAnimationFrame || msRequestAnimationFrame;
    var app_css_loaded = false;
    /* console.log(performance.now() + ' - ' + '1. async css script init'); */
    var loadAppCss = function(){
        if(!app_css_loaded) {
            app_css_loaded = true;
            var l = document.createElement('link'); l.rel = 'stylesheet';
            l.href = 'YOUR_COMBINED_AND_MINIFIED_CSS_HERE.css';
            var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
            /* console.log(performance.now() + ' - ' + '5. script injected'); */
        }
    };
    var cb = function() {
        /* console.log(performance.now() + ' - ' + '3. cb called'); */
        setTimeout(function(){
            /* console.log(performance.now() + ' - ' + '4. timeout start'); */
            loadAppCss();
            /* console.log(performance.now() + ' - ' + '6. timeout end'); */
        }, 3000);
    };

    window.addEventListener('load', function(){
        /* console.log(performance.now() + ' - ' + '2. triggering cb directly'); */
        if(raf) { raf(cb); } else { cb(); };
    });
    var loadAppCssOnScroll = function(){
        /* console.log(performance.now() + ' - ' + '### triggering cb on scroll'); */
        window.removeEventListener('scroll', loadAppCssOnScroll);
        if(raf) { raf(loadAppCss); } else { loadAppCss() };
    };
    window.addEventListener('scroll', loadAppCssOnScroll);
</script>

Это исключает рекомендацию PageSpeed ​​в отношении отсрочки неиспользованного CSS.

requestAnimationFrame, если доступно, остановит загрузку CSS-файла, если вкладка открылась в фоновом режиме в большинстве браузеров.Вы можете удалить его из приведенного выше кода, если он не соответствует вашим требованиям. Ref

console.log () доступен не во всех браузерах.Не используйте его в производстве. Ref

Answer 2

Имейте в виду, что Маяк является консультативным инструментом;он дает рекомендации, а не требования.Вам решать, имеют ли эти рекомендации смысл в контексте ваших бизнес-требований.К ним относится взвешивание времени и усилий по определению и внедрению решения с учетом влияния проблемы.

У Google есть рекомендации по решению рекомендаций Lighthouse «отложить неиспользованный CSS»: Отложить неиспользованный CSS .Подводя итог: CSS, необходимый непосредственно странице, должен быть встроен, а не загружен из отдельного файла.