記事の詳細

「PageSpeed Insights」とは、Google Developersの中にあるツールの一つです。WEBサイトの表示速度をモバイルとパソコンそれぞれで評価してくれて、修正すべき箇所を教えてくれます。

何か大変そうだなと思って後回しにしたのをすっかり忘れていたので、今更ながら出来る範囲でサイトを修正してみました。今回修正したサイトは2つで、一つは当サイト。もう一つは別の海外テンプレートを使っているサイトです。

当サイトの修正前の評価

このテンプレートはスマホ向けのレスポンシブ未対応で、特に対策もしていません。

海外テンプレートサイトの修正前の評価

レスポンシブデザインに対応しているテンプレート。なのにモバイルもひどい点数。

私が実際に行った提案の修正

1.圧縮を有効にする

gzip や deflate を使用してリソースを圧縮することで、ネットワークで送信されるバイト数を減らすことができます。

.htaccessに以下の圧縮するための項目を追加しました。

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

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

.htaccessに以下の項目を追加しました。

<FilesMatch ".(flv|gif|jpe?g|png|ico|swf|js|css|pdf)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>

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

JavascriptとCSSを最適化してくれるプラグイン「Autoptimize」を導入しました。

「プラグイン」⇒「新規追加」から「Autoptimize」を検索すればインストールできます。

プラグインを有効化したら「設定」⇒「Autoptimize」から設定画面を開きます。最適化する項目にチェックを入れて「Save Changes and Empty Cache」をクリックすれば完了です。

4.画像を最適化する

画像を最適化してくれるプラグイン「EWWW Image Optimizer」を使いました。

「プラグイン」⇒「新規追加」から「EWWW Image Optimizer」を検索すればインストールできます。

「設定」⇒「EWWW Image Optimizer」から設定画面は開けますが、特に設定を変更すべきところはありません。私は画像のメタデータはいらないので「Optimization Settings」⇒「Remove metadata」にだけチェックを入れました。

次に「メディア」に「Bulk Optimize」という項目が増えているのでクリックします。そして「Import Images」のボタンを押します。

「Finished importing」と表示されたら、もう一度「メディア」⇒「Bulk Optimize」をクリックします。すると下の画面になるので「Start optimizing」をクリックします。

後は勝手に画像を最適化してくれるので完了するのを待つだけです。

修正した結果こうなりました

とりあえず出来る範囲で修正した結果が以下のようになります。

当サイトの修正後の評価

元々レスポンシブ未対応のせいかモバイルに関してはあまり評価は上がらず。パソコンの表示に関しては中々の改善が見られたようです。

海外テンプレートサイトの修正後の評価

海外テンプレートは見違えるほど評価が上がりました。実際に体感でわかるほど表示速度も速くなりました。前の状況がよっぽどひどかったんだと思います。

まだまだ修正の提案はたくさんありますが、とりあえずこれだけの修正でも改善した感じが見られたので満足です。「PageSpeed Insightsなんて使ったことないよー」という方は、一度自分のサイトorブログでチェックしてみると、表示速度の改善に役立つのでオススメですよ。



関連記事

ページ上部へ戻る