Page Speed Insightの最適化
ページの表示速度はサイトの集客を考える上でとても大切です。ユーザーはなるべく早く情報に辿りつきたいと思っているので表示速度が遅ければストレスを与えることになり直帰の原因にもなってしまいます。もし自分のサイトの表示が遅いと感じた場合には表示速度の改善を考えましょう。
PageSpeed Insights
Pagespeed Insightsとはgoogleが提供しているサービスの一つで、サイトの表示速度を計測して点数化してくれるものです。では早速弊社のサイトの点数を計測してみます。
結果はPC「52点」モバイル「43点」という結果がでました。点数の結果が85点以上がよいサイトだとされているので、現在の点数はよくありません。という訳でgoogleの指示に従い改善を行っていきます。
具体的な改善処理
処理が必要なものは大きくわけて２つあります。「修正が必要」なもの、「修正を考慮」するものです。点数が減点される要因の大半が「修正が必要」なものにあるので、今回は「修正が必要」なものを修正していきます。
弊社のサイトで「修正が必要」なものは
- 画像を最適化する
- ブラウザのキャッシュを活用する
- 圧縮を有効にする
- スクロールせずに見えるコンテンツのレンダリングをブロックしているjavascript/cssを排除する
でした。４つともそれぞれ別の処理を行う必要があるので、順番に１つずつ説明していきます。
画像を最適化する
一部の画像の容量を削ることで表示速度を改善できるようです。
まず「詳細を表示」で問題のある画像を一覧で確認し全てコピーします。
コピーしたものをテキストエディタに貼り付けて、templateファイル内の画像とwordpressにuploadsしたものを分けます。
次に画像を圧縮するために「kraken.io」を開きます。圧縮方法の選択ができ、複数の画像の圧縮が行えるのでとても便利です。
pagespeed insightsの指摘で「ロスレス圧縮すると」とあったのでkraken.ioで画像のように「LOSSLESS」を選択。テキストエディタで分けたtemplateファイル内の画像をimgフォルダから選択してkraken.ioにドラッグ＆ドロップします。すると自動で圧縮が始まります。
圧縮が完了したら「Download All Kraked Files」で全ての画像をダウンロードします。
ダウンロードしたzipファイルを開き中の画像を全て選択し、圧縮前のimgフォルダ内の画像と置き換えます。
これで「画像の最適化」は完了です。
uploadsした画像の最適化
wordpressへuploadsした画像を圧縮する方法を説明します。
プラグインの「新規追加」→「EWWW Image Optimizer」をインストールして有効化します。この「EWWW Image Optimizer」はプラグインを有効化しておくだけで、アップロードの際に画像を自動圧縮してくれます。もちろん既にアップロードしてある画像の圧縮も可能ですが必要な処理があるので以下で説明します。
複数の画像を圧縮する場合
「メディア」→「メディアライブラリ」から圧縮したい画像を選択して「一括操作」→「Bulk Optimize」で「適用」します。
上の画面に移動するので「Start Optimizing」で圧縮を実行します。
圧縮が完了するとどれだけ圧縮できたか確認できます。
全ての画像を圧縮する場合
「メディア」→「Bulk Optimize」から「Scan Optimized Images」を選択して実行することで全ての画像の圧縮が始まります。
以上がuploadsした画像の圧縮方法になります。
ブラウザのキャッシュを活用する
ブラウザのキャッシュを活用することで、読み込むサイトのデータ量を減らすことができるので、表示速度が早くなるようです。html,css,javascript,画像などそれぞれサイトに適切なキャッシュの有効期限を決めていきましょう。キャッシュの有効期限を決めるにはhtaccessというファイルを修正していきます。
まず「public_html」内にhtaccessがあるのでそれをテキストエディタで開きます。htaccessに下のコードを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#キャッシュの有効期限を設定する。 <ifModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 seconds" ExpiresByType text/html "access plus 1 seconds" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType image/x-icon "access plus 1 month" ExpiresByType text/css "access plus 1 days" ExpiresByType text/javascript "access plus 7 days" ExpiresByType application/javascript "access plus 7 days" ExpiresByType application/x-javascript "access plus 7 days" </ifModule> |
|
1 |
text/css "access plus 7 days" |
期限はできれば長いほうがいいですが、頻繁に変更する可能性のあるものは一日や一週間に設定する必要があります。弊社のサイトはスタイルの変更が頻繁にあるわけではないので上記のようにcssを一週間に設定してみました。これで「ブラウザのキャッシュを活用する」は完了です。
圧縮を有効にする
画像同様、ファイルのサイズを圧縮することでブラウザへの負担を減らすことができます。圧縮を有効にするために、再びhttaccessを修正していきます。キャッシュの活用で処理したhtaccessをテキストエディタで開き下のコードを追加します。
|
1 2 3 4 5 6 7 8 9 10 |
# 圧縮の有効化 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 |
これでファイルの「圧縮の有効化」ができました。
スクロールせずに見えるコンテンツのレンダリングをブロックしているjavascript/cssを排除する。
難しい言い回しなので簡単に説明をします。ブラウザでwebページを表示した時にスクロールせずに見える部分が、ユーザーが最初に目にするページの部分となります。なのでブラウザは優先的にスクロールせずに見える部分の情報を読み込もうとします。ですがブラウザがその情報を読み込む際にjavascriptやcssがあるとそちらを読み込もうとするので、必要な情報の読み込みを遅らせて。つまりスクロールせずに見える部分に必要でないjavascriptやcssはできるだけあとで読み込むように処理をしましょうということです。
javascriptの排除
今回はjavascriptを非同期にすることで解決をしてみたいと思います。
スクロールせずに見える部分には必要のないjavascriptに対してasync属性を追加していきます。
|
1 |
<script src="<?php echo get_template_directory_uri(); ?>/js/ovr.js" async></script> |
このようにasync属性を追加することでjavascriptが読み込みをブロックすることを防ぐことができます。
cssの配置の最適化
弊社のサイトはwordpressで運営しているので、「Async JS and CSS」というプラグインを使用したいと思います。
「新規追加」→「Async JS and CSS」でインストールできたら有効化します。
画像のようにsettingをしたらcssの配置の最適化は完了です。
改善後の点数
改善後の計測結果はPC「81点」モバイル「71点」でした。改善が難しいものもあるので「修正を考慮」がいくつか残っていますがPC,モバイルそれぞれ約30点も点数を上げることができました。改善の処理の方法は他にもあるようなので、いろいろ試して高得点を目指していきたいです。今回の記事で説明した処理自体は１時間ほどでできるので表示速度の改善のために是非試してみてください。
