この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:1
更新日時:2019-07-07 00:00:17
タイトル: CSSの遅延読み込み処理
SEOタイトル: 【SEO対策】CSSの遅延読み込み処理
CSS読み込みを最初に行うとhtmlレンダリングまでに時間がかかる。
重要でないcssは以下の通り遅延読み込み対象とする。
以下、Googleの公式リフェレンスを参考に記述したもの。
|
<!-- CSS 読み込みの遅延処理(SEO対策) -->
<noscript id="deferred-styles">
<link href="/css/app1.css" rel="stylesheet">
<link href="/css/app2.css" rel="stylesheet">
</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>
|
