【これは便利！】Pagespeed insights でファイルを縮小する

Google の提供しているサービスに、Pagespeed insights がある。

これは、スマートフォンやPCでどのようにサイトやブログが見えるのか確認でき、同時に、サイトやブログに遅延表示の原因があるかどうかチェックできる優れたサービスだ。

チェックできる内容

ユーザビリティ
ページを重くしている原因
サーバーのスピード

それを見ながら、問題があれば修正していく。
ここで問題になるのが、スマートフォン用の時の点数の低さだ。

PC用であれば点数が高めに出てくる。
恐らく、回線スピードやPCの性能がスマートフォンのそれよりも高いからだと思うが、スマートフォン用のサイトはかなり頑張らないと高得点を得られない。

PC用のつもりであれもこれもと、盛りだくさんの盛々で各種機能を詰め込んでしまったり、無駄なタグやスタイルやコードを混ぜ混ぜにしていると、ドンドン点数が低下していく。

そこで、タグやファイルや機能の見直しなどしつつ点数を向上させ、さらにApache（htaccessファイル）による自動圧縮をするなど、色々と工夫することになる。

Pagespeed insights の点数を向上させる方法

無駄なタグやスタイルやコードを出来るだけ減らす
（HTMLタグ・CSS・スクリプトのコード・PHPのコードなど）
必要な機能だけに絞る
（プラグイン・各種WEB・ブログ用のサービスなど）
Apache（htaaccessファイル）による圧縮

この他にも、CSSやHTMLファイルや画像を 『縮小』 することでも、サイトやブログの表示スピードと点数を上昇させることができる。

最初、この場合の 『縮小』 の意味がよくわからなかったのだが、要するに 『無駄なものを排除してサイズを小さくする』 と言うことのようだ。

画像の場合は、できるだけサイズが小さくなるように変更する。
例えば、このような感じになる。

/* 『縮小』前 */ #header{ margin:0px 0px 0px 0px; max-width:1200px; width:100%; height:200px; background:url(image/title.png) no-repeat; } .footer-menu img{ width:30px; height:30px; padding:3px; margin:0px 5px 0px 0px; border-radius: 3px; box-shadow: 1px 1px 2px 0px #d5d5d5; background:#80c217; background: linear-gradient(to bottom, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); } }

/* 『縮小』後 */ #header{margin:0px 0px 0px 0px;max-width:1200px;width:100%;height:200px;background:url(image/title.png) no-repeat;}.footer-menu img{width:30px;height:30px;padding:3px;margin:0px 5px 0px 0px;border-radius:3px;box-shadow:1px 1px 2px 0px #d5d5d5;background:#80c217;background:linear-gradient(to bottom, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);}}

改行やタブの空白ぶんが詰められることで、ファイルサイズを大幅に減らすことができる。
ただし、これにも問題がある。
それは、修正がしづらいと言うだ。

上の縮小後のCSSは改行やタブが無くなってしまっているため、修正がとても難しくなっている。
ところが、上の縮小前のCSSは、改行やタブがあるために修正が容易だ。

そのようなわけで、CSSを変更する度に、サーバーにアップロードする直前にCSSファイルを縮小し、PCの中には縮小していないCSSファイルを保存しておくことになる。

一昔前の簡単なCSSであれば、まだ手作業で改行やタブを削除できていたかもしれないが、今のレスポンシブ化とスタイルの多用で膨れ上がったCSSを一々手作業で改行やタブを削除するのは至難の業だ。

そこで、何かしら改行やタブを削除して、自動で縮小してくれるツールが必要になる。
その時に便利なのが、Pagespeed insights だ。

Pagespeed insights を使えば、CSSと画像を自動で縮小して、ZIPファイルでダウンロードすることができる。

私もPagespeed insightsを使い始めてからかなり後で気がついたのだが、ページをチェックし終わった後、その問題のCSSファイルや画像ファイルをZIPファイルでダウンロードできるようになるのだ。

やり方は、チェック終了後に表示されるダウンロード用のリンクをクリックするだけ。

これで自動でZIPファイル（optimized_contents.zip）のダウンロードと保存が行われる。

ZIPファイルの名前は、optimized_contents.zip（最適化コンテンツ.zip）になる。
どのページをダウンロードしてもこのファイル名になる。

あとはこれを解凍（optimized_contents）して、中のファイルをサーバーにアップロードすればOK。

サーバーにアップロード後、縮小が成功していれば、Pagespeed insights でのチェックで、縮小についての注意は出なくなる。

解凍後のフォルダの中には、MANIFEST と言う謎のファイルと、CSSフォルダ、imageフォルダが入っている。

CSSフォルダには、そのページで使われているCSSを縮小処理した後のCSSが、image フォルダには、そのページで使われている画像を縮小処理した後の画像が入っている。

両方共そのままサーバーにアップロードすると使える状態になっている。
CSSファイルも画像ファイルも縮小処理がかかっているので、それをPCで保存されているオリジナルのものに上書きしないようにしないといけない。
（縮小処理前のファイルが消えてしまう）

この他、解凍後のフォルダ内には MANIFEST と言う謎のファイルが入っている。
この MANIFEST ファイルには拡張子は無いが、ファイル名の後ろに 『 .txt 』 と打ち込めばテキストファイルとして作動する。

中身はこのような文章になっている。

MANIFESTの中の英語

This zip file contains optimized resources for http://URL
The optimized resources are listed below in the format of:

Note: We only include up to 10 MB of optimized contents. If the
optimized contents of your page are larger than 10 MB, we list them in
this file too, with 'NOT INCLUDED' to indicate those URLs require
further optimization.

css/******.css: http://URL/***.css
image/******.png: http://URL/***.png