WordPress（Page Speed対応） – 小さな CSS をインライン化する

難易度

★すごく簡単

概要

対応方法は大きく3つあります。

htmlのhead領域に直接インラインで記述する
小さなCSSは他のCSSと合わせる
WordPress プラグイン - Head Cleanerの「CSS と JavaScript を、サーバ上にキャッシュする → 複数の CSS を結合する」を使ってCSSをがっちゃんこする

記述の少ないCSSを外部CSSで読み込みこんでいる場合は、htmlのhead領域に直接インラインで記述しましょう。ということです。外部ファイルで読み込むメリットは、ブラウザがCSSファイルをキャッシュしてくれるところにありますが、外部ファイルを読み込む際には、「TCP接続設定」「HTTP要求」「DNS名前解決」の3つのレスポンスが発生します。小さなCSSファイルはキャッシュさせるより、html内に展開したほうがレスポンスを抑えられて高速化に役立つという理由です。

[html]<head> <link rel="stylesheet" type="text/css" href="css/home.css" />[/html]

[css]/ home.cssの記述内容 / .menu{ font-size:1em; width:100%; }

.sub{ font-size:0.8em; width:80%; }[/css]

↓

[html]<head> <style> .menu{ font-size:1em; width:100%; }

.sub{ font-size:0.8em; width:80%; } </style>[/html]