PageSpeed Insightsでページを改善！CSS縮小で57→61点にアップ

SEO

当サイトの大幅リニューアルがある程度落ち着いてきたので、PageSpeed Insightsで当サイトを測定してみることに。 なんと、ポイントは57点。思い切りPoorと表示されました…。 このポイントを改善するために、出来ることからしてみようということで、まずはCSSの改善を行います。

スポンサーリンク

まずは自分のサイトをチェック

Googleが提供しているPageSpeed Insightsという仕組みをご存知でしょうか。 これは、GoogleがWEBサイトを様々な方面でチェックし、改善点があればその方針を教えてくれるものです。

外部リンク：PageSpeed Insights – Google Developers

この仕組みを使って、当サイトの速度を確認してみました。その結果がこれです。

当サイトの（最適化無し）PageSpeed Insights結果

はい！おもいっきり「Poor」と言われております！57/100って、いいのか悪いのかわかりませんが、たぶん、あまりよくないのでしょう。

様々な改善策を提示してくれておりますが、今回は一番簡単にできそうなCSSの改善から取り組みたいと思います。

CSSを縮小する

CSSを縮小するための考え方

CSSコードを縮小すると、データサイズを1.5KB減らすことができるそう。 この1.5KBがどれだけと思いますが、とりあえず1.5KB（も）減らせるんだ！と思いながら対処していくことにします。

では、実際CSSコードを縮小するためのメソッドとして、何があげられるのか考えてみます。

  • いらないコメントを外す
  • 改行を無くす
  • できるだけ空白を作らない

改善策としては、上記の3点ぐらいでしょうか。元々がテキストファイルなので、テキストのまま圧縮しないとだめなわけです。 そこで、テキストを圧縮してくれるサービスを探すことに。そこで見つけたのがこのサイトです。

外部CSS圧縮サービスを使ってみる

外部リンク：CSS Minifier

早速、CSSファイルをコピペし、ファイルにしてみることに。なんと、サイズが34,360バイトから23,693バイトに。 30%近くもそぎ落とすことができました。Googleの改善案よりも小さくなりそうです。

ここで問題が一つ、わざわざCSSを変えるたびに、このサービスを使っているのは面倒くさいということに気づきました。 APIも用意されているようですが、外部APIを頻繁に呼び出すと、それだけで通信コストがかかってしまい、本末転倒になります。

また、CSSの中には実験的なコードがたくさんあり、コメント等を残しておきたいので、オリジナルと圧縮の2種類を管理するのが面倒です。 それならば、CSSを圧縮するメソッド自前で作ればいいんじゃね？ってことで早速取り掛かることに。

サーバーサイドでCSSを圧縮してみる

要はCSSファイルを取り込んで圧縮後、送信してやればいいということなので、不要な空白をすべて取り除くスクリプトを組めばいいのです。 正規表現を使った方が速そうなので「正規表現　コメント削除」で検索。見つけたのが下記のサイトです。

外部リンク：PHPが吐き出すHTMLファイルを『自動的に最小化する』スクリプト

これだけでは、CSSに対応できません。なので自分でコードを追加することに。


function sanitize_output($buffer) {
  $search = array(
    '#\>[^\S ]+#s', // strip whitespaces after tags, except space
    '#[^\S ]+\<#s', // strip whitespaces before tags, except space
    '#(\s)+#s', // shorten multiple whitespace sequences
    '##s', //HTMLコメントを削除
    '#/\*.+?\*/#s', // CSSコメントを削除
    '#\r\n|\r|\n#', //改行コードを削除
    '#\:[\s]#', //:の後のスペースを削除
    '#\{[\s]#', //{の後のスペースを削除
    '#\}[\s]#', //}の後のスペースを削除
    '#[\s]{#',  //{の前のスペースを削除
    '#\;[\s]#'  //;の後のスペースを削除
  );
  $replace = array(
    '>',
    '<',
    '\\1',
    '',
    '',
    '',
    ':',
    '{',
    '}',
    '{',
    ';'
  );
  $buffer = preg_replace($search, $replace, $buffer);
  return $buffer;
}

これで、ファンクション化できました。あとは、ファイルを読み込んで圧縮後、中身を送信するだけです。 PHPのコードはこちら。


$file = "common.css";
$css = sanitize_output(file_get_contents($file));
$last_modified = gmdate("D, d M Y H:i:s T", filemtime($file));
header("Content-Type: text/css; charset=utf-8");
header("Last-Modified: {$last_modified}");
echo $css;

すっごく簡単です。CSSを読み込んで圧縮後、ヘッダー関数でContent-typeを指定してから出力するだけです。 この処理でCSSファイルのサイズは34,360バイトから25,221バイトになりました。

約27%の圧縮ができました。また、オリジナルファイルはそのままに、自動的に圧縮して送信してくれるので、非常に楽ができます。 また、コメント欄に変なことを書いてもばれません。これは素晴らしい。

でも若干「CSS Minifier」の方が小さいけど、気にしちゃだめだよね？

再度、PageSpeed Insightsでテストしてみる

そして、CSSを圧縮した状態で再度テストしてみることに。結果は……。

当サイトの（最適化済み）PageSpeed Insights結果

キター！4点上がっています！そして、CSSの最適化項目が無くなっています。成功です！ たかが4点かもしれませんが、されど4点です。CSSの圧縮だけで点数があがるのなら、他も最適化するしかありません。

当サイトは、まだまだ改善の余地がありそうですので、今後もPageSpeed Insightsについて100点を取るまでがんばりたいと思います。 少しずつにはなりますが、各種最適化が出来次第アップしていきます！

次はどの最適化をしようか――乞うご期待。