【これは便利!】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


MANIFESTの英訳

このzipファイルには、http://URL の最適化されたリソースが含まれています。
最適化されたリソースは filename: url の形式で以下に記載されています。

filename: http://URL

注:最大で10MBの最適化されたコンテンツを含みます。
あなたのページの最適化されたコンテンツが 10MB より大きい場合、我々はさらなる最適化が必要だと示すために、「含まれていない」それらをこのファイルにも一覧表示します。

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


もちろん、縮小のできるWEBサービスやツールもあるが、サイトやブログの表示スピードやユーザビリティに問題がないかについて確認し、そのついでに圧縮後のCSSファイルと画像ファイルも得られるので、この機能は大変便利なのではないかと思う。


Pagespeed insights で縮小できないものについて

チェックしたドメインのCSSや画像ファイルは縮小できるが、自分が管理していない別のドメインのCSSや画像は縮小できない。

なので、別ドメインのCSSや画像で縮小の注意が出る場合は、放置せざるを得ない。
(圧縮についても同じで、自分が管理していない別のドメインのCSSや画像は圧縮することが出来ない)

ただし、サブドメインで独自ドメインのCSSや画像をテンプレート用のものとして使用している場合は、縮小されたCSSと画像をダウンロードすることが出来た。


独自ドメイン
共用のテンプレート用CSSと画像を提供

サブドメイン
独自ドメインの共用CSSと画像を表示


スポンサーリンク