CSS Оптимизация и PageSpeed Insights

я бегу Google PageSpeed Insights на моем сайте - www.gpsheatmap.com, и он предложил изменить загрузку моих таблиц стилей (https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example) из -CSS Оптимизация и PageSpeed Insights

<link href="/static/css/landing-page.css" rel="stylesheet">

To -

<script> 
    var cb = function() { 
    var l = document.createElement('link'); 
    l.rel = 'stylesheet'; 
    l.href = '/static/css/landing-page.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>

Я попробовал это для своих таблиц стилей, и это заметно изменило загрузку, поэтому вы увидите представление pre-css, а затем через секунду вы увидите, что применяемая таблица стилей. Это было в firefox

Должен ли я игнорировать этот подход или это можно устранить?

источник

2016-03-15 farrellmr

смотреть на [это] (http://stackoverflow.com/a/35691921/3828573) – Shayan

CSS и JS файлы будут храниться в кэше после 1-й нагрузки, так что я не думаю, что запуск сценария, чтобы загрузить это делает любая разница. если все это будет быстрее, если вы сохраните файл css в локальном хранилище - https://www.smashingmagazine.com/2014/09/improving-smashing-magazine-performance-case-study/ – Tasos

Я думаю, что это реальное дерьмо, рекомендованное google. Загружать CSS, когда DOM готов с помощью функции javascript, действительно раздражает. И это создает проблему, о которой говорит farrellmr: вы увидите применение стилей позже. Почему google рекомендует этот вид крэпса? Это не первое, что рекомендует Google, когда это дерьмо (используйте префиксы '-webkit-' для всех функциональных возможностей, которые вам нужны, например) –

Вы должны рассмотреть критический путь, а также поставить весь необходимый стиль в вашем head разделе для того, чтобы избежать FOUC (только стиль для содержания выше складок). Это может быть сделано либо извлекая стиль вручную или — для больших сайтов — с автоматической задачей как critical-path-css-demo для глотка

В любом случае, если вы хотите загрузить все таблицы стилей с Javascript рассмотреть все-таки включить их внутри <noscript> блока, так они могут быть загружены также, когда JS недоступен.

<noscript> 
    <link rel="stylesheet" ...> 
</noscript>

Как дальнейшая оптимизация for near-future browser (в это время он работает только на Chrome Canary) это будет возможно early preload stylesheets использованием

<link rel="preload" href="..." as="style">

и создать загрузчик асинхронной более простым способом

<link rel="preload" href="..." as="style" onload="this.rel='stylesheet'">

Еще один интересный и недавний подход - described by Jake Archibald, и его называют «Загрузка нескольких этапов CSS»: для загрузки небольшого фрагмента CSS непосредственно перед разметкой, которая должна быть разработана, чтобы избежать необходимости в критическом CSS, например,

<link rel="stylesheet" href="/site-header.css"> 
<header>…</header> 

<link rel="stylesheet" href="/article.css"> 
<main>…</main> 

<link rel="stylesheet" href="/comment.css"> 
<section class="comments">…</section>

план для каждого, чтобы блокировать визуализацию последующего содержания в то время как таблицы стилей нагрузок, но позволяют визуализацию содержимого перед ним. Таблицы стилей загружаются параллельно, но они применяются последовательно. Это ведет себя аналогично <script src="…"></script>.

источник

2016-03-15 09:11:57 fcalderan

CSS Оптимизация и PageSpeed ​​Insights

ответ

Смежные вопросы

CSS Оптимизация и PageSpeed Insights