понимание скорости страниц Отложите неиспользуемые CSS и изображения на экране - PullRequest
Новая
       85

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

0 голосов
/ 22 января 2019

Я отказался от всех своих CSS с использованием 

media="none" onload="if(media!='all')media='all'"

и изображений с использованием yall.min.js

Но PageSpeed ​​Insights продолжает требовать его (и изображениятоже видны)

Как мне это оптимизировать?

Спасибо, Ари

1 Ответ

0 голосов
/ 22 января 2019

Я использую 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 или называют это «Flash of Loading Font».Хорошо провести небольшое исследование заменительного шрифта, чтобы он не слишком изменил ваш макет.

...