岐阜でホームページ制作、マーケティング&デザインを提供しているMWORKSです

お気軽にお問い合わせください

TEL 0573-67-8189

Mブログ

- mblog -

めざせ高速化!WEBサイトの表示速度を改善してみた

公開日:2015年8月18日 : WordPress,ホームページ制作関連

めざせ高速化! WEBサイトの表示速度を 改善してみた!!_カバー画像

『早く改善せんといかん!』と思いつつ後回しなっていた、ホームページ表示スピード遅い問題。夏休み期間を利用してようやく改善できたので、その過程を忘れないようにまとめておきます。

始まりは、ブログに設置しているアドセンスの管理画面や、Googleのページの読み込みチェックツール『PageSpeed Insights』での数値で、表示速度の改善が必要との結果が出ていたことです。

ページの読み込み速度は、ユーザーの離脱率やページビューに悪影響を与えるので、(表示速度が遅いと、ユーザーがページから離れてしまったり、他のページを読んでもらえないことに繋がります)ページの表示速度を改善してみました。

表示速度、最初の状況

PageSpeed Insights_改善前モバイル

■モバイル 48/100 速度

PageSpeed Insights_改善前モバイル

PageSpeed Insights_改善前パソコン

■パソコン 37/100 速度

PageSpeed Insights_改善前パソコン

実際のページを表示させている時は、それほど遅いという感じはなかったのですが、数字はすごく悪かったです。なぜかパソコンの方が悪い数字になっていますね。多分トップページのスライド画像が重いのが1番の原因だと思われます。

Wp Fastest Cacheを導入

WordPressのキャッシュ系プラグインには、幾つか種類がありますが、(w3 Total Cache、WP Super Cacheが有名所)今回はWp Fastest Cacheを導入することにしました。日本語の管理画面で設定項目もシンプルでわかりやすかったからです。

Wp Fastest Cache_設定画面

Wp Fastest Cache_設定画面

設定した箇所は上記画像部分です。PageSpeed Insightsの数値は多少改善しました。導入前と比べてみると、CSS、JSファイルの圧縮で改善が見られました。
※今回はwordpress管理画面からダウンロードしています。

Wp Fastest Cacheダウンロードページ

モバイル数値_Wp Fastest Cache_設定後

■モバイル 66/100 速度

モバイル数値_Wp Fastest Cache_設定後

パソコン数値_Wp Fastest Cache_設定後

■モバイル 45/100 速度

パソコン数値_Wp Fastest Cache_設定後

JPEGminiでjpg画像ファイルを圧縮

jpegmini_ロゴ画像

画像を最適化する項目も『修正が必要』と指摘されているので、まずは、ページ全体で使用しているjpgファイルを圧縮します。今回は、『jpegmini』を利用しました。このサービスは画像劣化を抑えつつjpgファイルの容量を圧縮することが可能です。

無料で使用できるWebサービスですが、無料版ですと、1ファイルずつでしか圧縮できません。あとは、1日20ファイルが上限になっています。

私は有料版を持っていますので、複数圧縮がラクチンです。ちなみに公式サイトおよびappストアどちらからでも購入できます。(私はappストアで購入)

フォルダを選択すると、フォルダ内にあるjpgファイルをすべて圧縮してくれます。

JPEGmini公式サイト

TinyPNGでpng画像ファイルを圧縮

TinyPNG公式サイトキャプチャ

上記は、jpgファイル圧縮でしたが、png画像ファイルも圧縮が必要です。今回は『TinyPNG』を使用しました。こちらはjpg、png両方対応しており、無料で使えます。また複数画像を同時に圧縮も可能なのでとてもありがたいサービスです。(1度に20枚、5MBの上限があります。)※平均して70〜80%容量を圧縮するので、画像の荒れが気になる場合もあります。jpgであれば、JPEGminiの方が劣化が少なく感じます。

大量の画像がある場合は無料版の制限があるときついですが、1サイト程度の画像量であればこのサービスで何回か分けて圧縮していけば十分対応可能だと思います。

TinyPNG公式サイト

画像ファイルの圧縮が終わったら、FTPソフトでWEB上の画像を上書きします。

EWWW Image Optimizerで記事内の画像を圧縮

ここまでは、ホームページ全体で使用されている画像を圧縮してきましたが、Wordpressのブログ記事内の画像は圧縮されていません。そこでプラグイン『EWWW Image Optimizer』を使ってブログ記事内の画像のデータを圧縮します。

EWWW Image Optimizer_画像一括圧縮画面

今までWordpressブログにアップした画像を一括で圧縮できる機能があるのでとても便利です。上記画像は一括圧縮中の画面。189枚の画像がアップされていました。

※今回はwordpress管理画面からダウンロードしています
EWWW Image Optimizerダウンロード

jsファイルの設置場所は、対応済

head内で読み込んでいる『jsファイル』は、表示が遅くなる原因になります。ブラウザはhtmlファイルを上から順番に読み込むので、画面表示に関係ないファイルは1番下に移動させます。MWORKSのサイトではサイト構築時に、ファーストビューの表示に関係ないファイルは全て『bodyタグ』直下に設置してあるので、今回はそのままなにもしていません。

結果発表

まだ詰めきれてないですが、モバイル:48、パソコン:37の最初と比べればかなり良い結果になりました。体感でも早く感じられます。今回はここまでにして、また時間をみて改善したいと思います。

残りの改善点としては、『画像ファイルを更に圧縮』、『JS,CSSを更に圧縮』できそうです。Wordpressで導入している個別のプラグイン毎に読み込んでいるJS,CSSが圧縮できないので、残りの作業は、プラグインを見直すなど少し手間が掛かりそうです。

PageSpeed Insights_改善後モバイル

■モバイル 77/100 速度

モバイル

PageSpeed Insights_改善後パソコン

■パソコン 72/100 速度

パソコン

gtmetrixの計測結果

WEBサイトの表示速度などを計測できる『gtmetrix』での結果です。事前にキャプチャを忘れたので、比べることができませんが、6秒という数値がでています。実際にWEB上で表示すると1秒くらいかな?と思うのですが、ファーストビューや目に見える以外でもコードを読んでいるので、それも含めた全ての時間なのでしょうね。

gtmetrix公式サイト

gtmetrixの計測結果

まとめ

今回の『めざせ高速化!WEBサイトの表示速度を改善してみた』ですが、それなりの改善結果を出せたのではと思います。ただ、まだ改善できる部分があるので、引き続き時間をみて改善していくつもりです。また結果が出たらブログで報告したいと思います。

ホームページは表示スピードが早ければ早いほど、ユーザー、検索エンジン共に好まれるので、これからも高速化をめざしてがんばります!

MWORKSではレンタルサーバーを使用する際にエックスサーバーを利用しています。レンタルサーバーによっても表示速度が変わるので導入前に比較したり、今のサーバーが遅い場合は切り替えが必要です。

エックスサーバーは、Wordpressサイトの表示が高速で管理画面も使いやすいのでおすすめです!

http://www.xserver.ne.jp/





スポンサーリンク

Mblog

新着記事

- new articles -

ホームページ制作やマーケティングの他にも、日々の仕事での考えや気付きなどを記事にしています