Асинхронных загрузки CSS стилей с использованием requestAnimationFrame

Question

Google рекомендует (https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery), используя следующий код JS для оптимизации скорости страницы (асинхронная CSS загрузки)

<script> 
    var cb = function() { 
    var l = document.createElement('link'); l.rel = 'stylesheet'; 
    l.href = 'small.css'; 
    var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h); 
    }; 
    var raf = requestAnimationFrame || mozRequestAnimationFrame || 
     webkitRequestAnimationFrame || msRequestAnimationFrame; 
    if (raf) raf(cb); 
    else window.addEventListener('load', cb); 
</script> 

Когда я использую приведенный выше код, Page Speed ​​Insights (https://developers.google.com/speed/pagespeed/insights/) распознает его и дает страницу более высокий балл. Но проблема в том, что этот код не работает в старых IE.

Например, IE 8 выдает сообщение об ошибке «Объект requestAnimationFrame не определен». Проблема очевидна, IE 8 не поддерживает RAF, поэтому он выдает ошибку из-за неопределенного объекта.

Мне нужен сайт, чтобы быть функциональными и в этой старой ИЭ, так что я решил обновить свой код следующим образом:

<script> 
function loadCss() { 
    var l = document.createElement('link'); 
    l.href = 'http://static.xyz.com/css/style.min.css?v=23'; 
    l.rel = 'stylesheet'; 
    l.type = 'text/css'; 
    l.media = 'screen'; 
    document.getElementsByTagName('head')[0].appendChild(l); 
} 

if (typeof requestAnimationFrame === 'function') { 
    requestAnimationFrame(loadCss); 
} 
else if (typeof mozRequestAnimationFrame === 'function') { 
    mozRequestAnimationFrame(loadCss); 
} 
else if (typeof webkitRequestAnimationFrame === 'function') { 
    webkitRequestAnimationFrame(loadCss); 
} 
else if (typeof msRequestAnimationFrame === 'function') { 
    msRequestAnimationFrame(loadCss); 
} 
else if (typeof window.addEventListener === 'function') { 
    window.addEventListener('load', loadCss); 
} 
else { 
    window.onload = loadCss; 
} 

Этот код не так красиво, но это работает должным образом в IE7 +, Firefox, Chrome и т. Д. Но когда я тестирую его с помощью страницы Speed ​​Insights, он не признает, что CSS загружается асинхронно и не дает мне более высокий балл (он показывает ошибку так же, как если бы CSS был загружен синхронно через) ,

Мой вопрос: есть ли ошибка в моем коде, о котором я не знаю, или Google просто не распознает этот способ вставки async CSS. Для меня абсолютно важно, чтобы код работал правильно, но я хотел бы получить более высокий балл в тесте страницы Speed, так как это было бы полезно для целей SEO.

Я не являюсь экспертом в Javascript и макете, а также в таких вещах, но я не мог найти объяснения того, что происходит или где может быть проблема.

Заранее благодарим за любые объяснения или подсказки, что искать.

Answer 1

Ваш код загружает css асинхронно, да. Поэтому, скорее всего, Google просто не узнает ваш путь. Вы можете попытаться заменить window.onload с помощью attachEvent для поддержки, возможно, это поможет

Answer 2

Я столкнулся с одной и той же проблемой, в моем случае несколько проблем с мобильным «Пользовательским опытом» вызывают анализ страницы Speed ​​Analytics, прежде чем мой асинхронно загруженный CSS мог

Выполнение этого было больно, но в итоге было извлечено основной стиль, который адресовал проблемы UX, а затем помещал миниатюрный вариант этого встроенного в заголовок, оставляя основную часть CSS для асинхронной загрузки через js ,

Желание было лучшим решением.

Answer 3

Этот код, казалось, сделать трюк для меня (он загружает асинхронной CSS, Google PageSpeed ​​принимает его, и он работает на старых браузерах):

<script> 
var cb = function(){ 
    var styles = ["http://mycdn.co.uk/stylesheet1.css", "http://mycdn.co.uk/stylesheet2.css"]; 
    for(var i = styles.length - 1; i >= 0; i--) 
    { 
    l = document.createElement('link'); 
    l.rel = 'stylesheet'; 
    l.href = styles[i]; 
    h = document.getElementsByTagName('head')[0]; 
    h.insertBefore(l, h.childNodes[h.childNodes.length-1]); 
    }; 
}; 

var raf = ("undefined" != typeof requestAnimationFrame) ? requestAnimationFrame : false || 
    ("undefined" != typeof mozRequestAnimationFrame) ? mozRequestAnimationFrame : false || 
    ("undefined" != typeof webkitRequestAnimationFrame) ? webkitRequestAnimationFrame : false || 
    ("undefined" != typeof msRequestAnimationFrame) ? msRequestAnimationFrame : false; 

if(raf) 
{ 
    raf(cb); 
} 
else 
{ 
    if("undefined" != typeof window.addEventListener) 
    window.addEventListener('load', cb); 
    else if("undefined" != typeof window.attachEvent) 
    window.attachEvent('onload', cb); 
} 
</script> 

Благодаря Ultrabenosaurus для code!