Как предотвратить отложенную загрузку стилей при загрузке каждой страницы, а не только в первый раз? - PullRequest
Новая
       37

Как предотвратить отложенную загрузку стилей при загрузке каждой страницы, а не только в первый раз?

0 голосов
/ 09 октября 2018

Я пытаюсь повысить производительность на сайте.Мы используем отложенный стиль, поэтому сначала загружается только критический CSS, а остальные файлы CSS загружаются после загрузки страницы.

Проблема в том, что это происходит при каждой загрузке страницы.Мы хотим создать что-то, что кэширует загруженные CSS-файлы, чтобы не загружать файлы при каждой загрузке страницы.

Как получить, чтобы мои таблицы стилей кэшировались браузером?

Мы 'повторное использование https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

 <noscript id="deferred-styles">
<link href="/css/rfs-styleguide.css" rel="stylesheet"></link>
<link href="/css/rfs-layout.css" rel="stylesheet"></link>
<link href="/css/rfs-icons.css" rel="stylesheet"></link>
<link href="/css/rfs-icons-betalen.css" rel="stylesheet"></link>
<link href="/css/rfs-icons-algemeen.css" rel="stylesheet"></link>
<link href="/dist/rfs-responsive-template.css?{{cachebust}}" rel="stylesheet"></link>
</noscript> 
<script>
var loadDeferredStyles = function () {
    var addStylesNode = document.getElementById("deferred-styles");
    var replacement  = document.createElement("div");
    replacement.innerHTML = addStylesNode.textContent;
    document.body.appendChild(replacement)
    addStylesNode.parentElement.removeChild(addStylesNode);
};
var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
if (raf) raf(function () {
    window.setTimeout(loadDeferredStyles, 0);
});
else window.addEventListener('load', loadDeferredStyles);
</script>

1 Ответ

0 голосов
/ 09 июня 2019

У меня была точная проблема, так как вы используете Google рекомендованный код отсрочки.Я попытался выполнить запрос предварительной выборки, однако он все еще не кэшировал его.

Я нашел два способа исправить это, добавить код CSS в конец HTML-документа (после заключительного тега).Не совсем идеально

Или вы можете использовать этот скрипт, который я нашел здесь https://master -origin-loadcss.fgview.com / test / preload.html 

<link rel="preload" href="slow.css.php" as="style" onload="this.onload=null;this.rel='stylesheet'">

Это отложит CSS и кеширует его

...