この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:2
ページ更新者:guest
更新日時:2026-05-15 05:24:41

タイトル: CSSの遅延読み込み処理
SEOタイトル: 【SEO対策】CSSの遅延読み込み処理

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<p>CSS読み込みを最初に行うとhtmlレンダリングまでに時間がかかる。</p>

<p>重要でないcssは以下の通り遅延読み込み対象とする。</p>

<p>以下、<a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery?hl=ja">Googleの公式リフェレンス</a>を参考に記述したもの。</p>

<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
	<tbody>
		<tr>
			<td style="background-color:#000000">
			<p><span style="color:#ffffff"><!-- CSS 読み込みの遅延処理(SEO対策) --></span><br />
			<span style="color:#ffffff"><noscript id="deferred-styles"><br />
			&nbsp; &nbsp; <link href="/css/app1.css" rel="stylesheet"><br />
			&nbsp; &nbsp; <link href="/css/app2.css" rel="stylesheet"></span><br />
			<span style="color:#ffffff"></noscript></span></p>

			<p><br />
			<span style="color:#ffffff"><script><br />
			&nbsp; &nbsp; var loadDeferredStyles = function() {<br />
			&nbsp; &nbsp; &nbsp; &nbsp; var addStylesNode = document.getElementById("deferred-styles");<br />
			&nbsp; &nbsp; &nbsp; &nbsp; var replacement = document.createElement("div");<br />
			&nbsp; &nbsp; &nbsp; &nbsp; replacement.innerHTML = addStylesNode.textContent;<br />
			&nbsp; &nbsp; &nbsp; &nbsp; document.body.appendChild(replacement)<br />
			&nbsp; &nbsp; &nbsp; &nbsp; addStylesNode.parentElement.removeChild(addStylesNode);<br />
			&nbsp; &nbsp; };<br />
			&nbsp; &nbsp; var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||<br />
			&nbsp; &nbsp; &nbsp; &nbsp; window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;<br />
			&nbsp; &nbsp; if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });<br />
			&nbsp; &nbsp; else window.addEventListener('load', loadDeferredStyles);<br />
			</script></span></p>
			</td>
		</tr>
	</tbody>
</table>

<p>&nbsp;</p>