CSSを限界圧縮してヘッダーに書くと、表示速度は速くなるの？（fc2ぶろぐで実験）
｜ 更新： 2024/02/16 ｜ 1908文字
今回は、サイトを高速表示するCSSの書き方についてです。管理人が昔使ってたfc2ぶろぐがあったので（fc2は外部ファイル読み込み･ヘッダーに書く、両方できる）、それを使って実験してみます（絵はイラストacさんからお借りしました）。
目次
fc2ぶろぐのスマホ向けテンプレと、表示速度について
fc2のスマホ向けベーシックテンプレ
使ったのは、fc2ぶろぐのスマホ用テンプレートベーシックです。設定すると『/?sp』がついたスマホページを自動的に表示してくれます（レスポンシブ時にはoffにします）。基本的にベーシック選んで、ヘッダー部分に『img src=”○○” style=”display:block;margin:0 auto;”』でロゴ表示すればokです。
表示速度について
そのテンプレのスマホ表示速度スコアを調べてみました。チューニングなしだとこんなもん（５０点）です。
fc2ブログで実験・ヘッダーにCSS全部書くと速くなるか
ここでは、管理人がもっていたfc2ブログで、スコアが微妙だったからやってみた『ヘッダーにCSS全部書く』のやり方を紹介します。
１・まずはjavascriptを、htmlの最後のほうに移す
iphone用やメニュー用・解析タグなど、いろいろなjavascriptがヘッダー付近にありました。これをhtmlの最後のほうに移します。
理由は二つで、『ヘッダーがごちゃごちゃするのを避ける』と、『レンダリングブロックするjavascriptは後から読み込む』。つける前にスクショとってしまいましたが、async属性つけとくとokです（先日のpintarestのjavascriptにもありましたね）
CSSを限界圧縮する
fc2のテンプレート編集ページの下のほうにあるCSSをコピーします。『CSS圧縮サービス』とかで検索すると出てくるサイトで、CSSを圧縮しましょう。コメントや改行が省かれた圧縮CSSが発行されます。
『CSS Minifier (スタイルシートの圧縮サイト)』 https://syncer.jp/css-minifier
なお、圧縮CSSはメンテが大変なので、『あとからデザインいじる可能性がある場合』は、『圧縮前のCSSもバックアップしておく』と安心です。
ヘッダーに圧縮CSSをコピペ
fc2ブログの場合は『<link rel=”stylesheet” href=”<%css_link>”> 』というような関数（ワードプレスはPHP）、通常htmlサイトでも『<link rel=”stylesheet” href=”スタイルシートの場所”> 』というようにCSSを読み込むのが通常です。2012年くらいのwebクリエイター認定試験テキストでも推奨されてます。
しかしヘッダーに書くときは『<style type=”text/css”></style> 』の間に、先ほどの圧縮CSSを全部コピペします。2重読みを避けるため、『<link rel=”stylesheet” href=”<%css_link>”> 』のところはカットしておきます。phpの場合だと『CSSをinclude』が使えるので楽です。
CSSをヘッダーに圧縮して突っ込んだ場合の、ページスピードスコア
あれ、ずいぶんスマホ表示速度スコアがあがりましたね（50→95）。これだけ上がると、体感的にもかなり速く感じます。
ためしに、アドセンスとアナリティクスを外してみると・・・
100点にきわめて近い状態に。あとは画像圧縮とかをうまくできれば、スマホでページスピードスコア100点出せそうですね。
もちろん、ページ高速表示が出来ただけで、いきなりアクセスがハネ上がるということはありませんが（内容やバックリンク・sns拡散も重要です）、今まで遅かったときは離脱していたユーザーに見てもらえる機会がじわじわ増えるので、チャンスが大きくなりそうです。
fc2に限らず、ワードプレスや通常htmlサイト、html&css全部いじれるブログサービスでは使えるテクですので、ぜひ取り入れてみてください。
