*googleのPageSpeed Insightsでサイト表示のスピードを計り合格点までの流れ

2014.7.24 0Comments google お知らせ

当管理サイトの一部をPageSpeed Insights リンク先でテストをした結果、かなり低い点数だったのでそれを攻略するまでをメモしていきます。

対象のサイトはこちら
http://xn--eckucmux0ukct202edgyc.jp/ リンク先

そして2014.07.24現在計測した結果がこちらです。

◆パソコン

サイトスピード計測の結果

 

◆モバイル

サイトスピード計測の結果

 

 

かなり醜い結果となりました。。。しかし順番に解決していきたいと思います。

 

1.画像を最適化する

画像を圧縮します。一番いい方法がファイルを一度ダウンロードしてそれらを圧縮ソフトを使って軽くします。

圧縮ソフトは有名は「縮小専用」です。ソフトはこちら リンク先

 

しかしこのソフトはJPEG専用です。私はJPEGを含むPNGやGIFの圧縮はこちらの記事にかいたようなやり方で圧縮しています。ただしPhotoshopというソフトが必要になります。

さてこれだけ圧縮後にファイルを上書きして、また採点を見てみましょう。

47点→57点になりました。

画像圧縮後

 

 

2.次に.cssや.jsを圧縮します。

圧縮するために以下のサイトを利用します。またあまりファイル数を増やさないように一つにまとめます。

圧縮してくれるOnline YUI Compressor(コード圧縮) リンク先

ファイルを一つにまとめて圧縮した結果です。

57点→60点になりました。

cssやjsの圧縮結果

 

3.ブラウザのキャッシュを活用する

次はブラウザのキャッシュバックを有効にします。レンタルサーバーと過程して.htaccessに以下を追加してアップします。

mod_expiresを使用するので1行目に「xpiresActive On」と書き、指定の期日を記入します。詳しくはApacheのこのページを参考にして下さい。

 

<IfModule mod_expires.c>
 ExpiresActive On
 ExpiresDefault "access plus 1 month"
 </IfModule>

キャッシュを有効にした場合の結果です。

60点→82点にまで上がりました。色の危険な赤から黄色へ。

キャッシュの有効化

 

 

ふー、まだまだです。あとは画像をもっと軽くして、HTMLの改行なども無くします。もう限界って所までやります。

そうすると、82点→86点にまで。安全マークの緑色へ。

合格サイト

無事に合格点までいきました。

 

↓今後の励みになるのでよかったらクリックだけでもして下さい。
にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ