Google PageSpeed Insightsでサイトのパフォーマンスを改善してみたよ

公開: 2015-01-22 22:56
更新: 2016-04-29 06:02
Googleにはサイトのパフォーマンスを計測してくれる便利なサービスがあります。

PageSpeed Insights」ってのです。今回はこれを使ってこのブログのパフォーマンスを改善してみようと思います。



スマホからのアクセスが多いのでスマホの方をメインに対応します。

ってなわけで適当な記事ページでさっそく計測



速度:55/100点。。。

Google PageSpeed Insightsでサイトのパフォーマンスを改善してみたよ

レッドゾーン。なかなか悪い評価です。
せめて70以上に上げたい。



UX:99/100点!

Google PageSpeed Insightsでサイトのパフォーマンスを改善してみたよ

ユーザーエクスペリエンスはほぼ完璧。これはスルーだな。



ちなみに診断結果は30秒間キャッシュされるので、
再診断は30秒空けてから実施してください。



ということで、



速度を70点以上になるように改善しよう!

がんばるぞー

おー





1.画像を最適化する

まずは画像系を圧縮します。

PNG画像はこちらのImageAlpahとImageOptimのコンボで

⇒ PNG画像を圧縮するならImageAlphaとImageOptimのコンボがおすすめ!


JPEG画像は...なんか色々Webアプリもあるんですが、
PNGに変更して上記のコンボで圧縮することに。こっちの方が近い画質で軽くなるので。



えいやっ

Google PageSpeed Insightsでサイトのパフォーマンスを改善してみたよ

お、7点も上がりました。幸先が良いです。

画像サイズを表示にサイズに合わせればもっと良くなるらしいけど、

自動リサイズ&キャッシュってのを実装するか、個別に画像を作らないといけませぬ。

(めんどくさいから今回はパス)



さて次





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

なんだこれ。

Google PageSpeed Insightsでサイトのパフォーマンスを改善してみたよ

ふんふん。リストから察するにbackground-imageに指定してある画像がキャッシュされてないみたい。

背景に指定してある画像はこんな感じ。

background-image:url("archives/517/image.png");

これを

こう直せばいいみたい。

background-image:url("archives/517/image.png?1421911753");

後ろに最終更新時間をつけます。

これだけでキャッシュしてくれるみたいです。



PHPだとfilemtime()という 「ファイルの最終更新時間」を教えてくれる関数があるのでこれを使いました。

$modified = (@filemtime('/var/www/html/hoge/archives/517/image.png'))?:0;


そいやっ

Google PageSpeed Insightsでサイトのパフォーマンスを改善してみたよ

おお、5点上がった。レッドゾーンを脱しイエローゾーンへ

もう一息かしら。





3.スクロールせずに見えるコンテンツのレンダリングをブロックしているJS/CSSの排除

またもや分けも分からぬことをGoogleは...

Google PageSpeed Insightsでサイトのパフォーマンスを改善してみたよ

CSSのファイルが小さい場合、

<head></head>の中に記述されてるCSSファイルを...

<html>
        <head>
                <link rel="stylesheet" href="small.css">
        </head>
        <body>
                <div class="blue">
やっほー</div>
        </body>
</html>
.yellow { background-color: yellow; }
.blue { color: blue; }
.big { font-size: 8em; }
.bold { font-weight: bold; }

このように

<html>
        <head>
                <style>

                        .blue { color: blue; }
                </style>
        </head>
        <body>
                <div class="blue">
やっほー</div>
        </body>
</html>
<link rel="stylesheet" href="small.css">

重要な部分(class="blue")をインライン化し、
後は<html>〜</html>の外側に書いてしまえば、
ページが読み込まれた後にどうでもいいCSSを読み込むので、ページの表示速度が早くなるようです。



...やってられるかっ



とりあえずreset.cssだけインライン化して、
後から読み込んでも問題ないCSSファイルとJSファイルを<html></html>の外に出しました。



でやぁっ!

Google PageSpeed Insightsでサイトのパフォーマンスを改善してみたよ

1点!
手抜きをちゃんと見抜かれてる!

でもあと2点で70点のグリーンゾーンに入るはず。





4.gzipの有効化

ApacheのMod_Deflateってので圧縮を有効にします。

まぁよく分からないので、こちらのブログを参考にしました。(ちょっと古いけどもGoogleの検索アルゴリズムを信じる。)

⇒ Enable Gzip Compression In Apache HTTPD With Mod_Deflate – Neiland.net


httpd.confのLoadModule deflate_module modules/mod_deflate.soの記述を確認し、

/etc/httpd/conf.d/deflate.confってのを新しく作り、

#set compression level
DeflateCompressionLevel 9

#compress these named file types
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/x-js
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/javascript

#Handle browser specific compression requirements
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
SetEnvIf User-Agent ".*MSIE.*" nokeepalive ssl-unclean-shutdown downgrade-1.0 force-response-1.0

って書いて再起動。

(conf.dってなディレクトリがあればいいけど、ない場合は作った後Includeしてねっ)




どっこいせっ!!!

Google PageSpeed Insightsでサイトのパフォーマンスを改善してみたよ

よっしゃ!70越え!

ってグリーンじゃないのか...

あとあんまりやることないんだけども...

(やっぱCSSの重要な部分のインライン化の比重が大きいのかなぁ)



まぁとりあえずあとは...





5.使ってないファイルの削除

よく見たらたら使ってないjQueryのプラグインとか読み込んでたので削除します。(最初にやっとけよ)


ていっ

Google PageSpeed Insightsでサイトのパフォーマンスを改善してみたよ

ふう...



結果

グリーンゾーンには入れませんでしたが、

55点から76点にまで上昇しました。後はまた今度気が向いたらやってみます〜



みなさんもやってみてください〜
ではでは〜



⇒ PageSpeed Insights



この記事をシェア
この記事にコメントする
書き込む
あっきぃ(@appstars_aki)
Web、iOSなフリーランサーです。好きなものはお寿司です。でもお寿司は高いので普段は雑草とか拾ったドングリを食べています。お仕事や意味もなく毎月お小遣いをくれる人を探してます。

お仕事の依頼や自分で作ったアプリのレビューを希望しちゃう方はaki@appstars.jpまでご連絡ください。