読者です 読者をやめる 読者になる 読者になる

炊きたてのご飯が食べたい

定時に帰れるっていいね。自宅勤務できるっていいね。子どもと炊きたてのご飯が食べられる。アクトインディでは積極的にエンジニアを募集中です。

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


難易度

★すごく簡単

概要

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

  • htmlのhead領域に直接インラインで記述する
  • 小さなCSSは他のCSSと合わせる
  • WordPressプラグイン - Head Cleanerの「CSSJavaScript を、サーバ上にキャッシュする → 複数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]

注意点

htmlの書き方によっては、レイアウト崩れやJavascriptエラーが出る可能性があるみたいです。僕は大丈夫でした。レイアウト確認をした後に、chromeでサイトを開き、「要素を検証」をクリックして右下に赤丸で「×」と出ていないか確認しましょう。

確認方法

各種ブラウザで確認

参考サイト

特になし