PageSpeed ​​Insights Отложить неиспользуемые CSS и изображения на экране

Я использую JavaScript для асинхронной загрузки внешних файлов CSS. Подобно старым решениям, в которых сценарии помещались перед закрывающим тегом </body>, теперь я представляю атрибуты данных для создания тегов <link>, чтобы они автоматически делались асинхронными:

HTML

<div data-dom="link" data-href="@asyncCssBundle" data-media="screen"></div>
<div data-dom="link" data-href="@printBundle" data-media="print"></div>

jQuery

/**
  * Loads an array object of CSS files in async mode
  * stops render blocking CSS loading
  * good for fonts and @imports
  * @prop {object} asyncLinkTag data representation of a link tag on a div element
  */
function loadCssAsync() {
    var arr = [];

    $.each($('[data-dom="link"]'), function () {
        var el = $(this),
            link = $('<link />').prop({
                href: el.data('href'),
                rel: el.data('rel') || 'stylesheet',
                media: el.data('media') || 'screen'
            });

        arr.push(link);
    });

    $(document.head).append(arr);
}

$(function(){
    loadCssAsync();
});

Кроме того, в SCSS я различаю CSS-код над сгибом и фон, шрифты, печать и т. Д.

Если вы действительно хотите приложить усилия, приведенный выше CSS-код может быть встроен. Но мне довольно сложно реализовать это в более крупном проекте. Так что меня устраивает асинхронная загрузка фонов и шрифтов. Тем не менее, для шрифтов теперь ясно, что они загружаются позже, аналогично FOUC или называют это «Вспышка загрузки шрифта». Хорошо бы провести небольшое исследование надежного заменяющего шрифта, чтобы он не слишком сильно менял ваш макет.