ページの表示速度を46から76まで上げた方法を大公開!(モバイルフレンドリー対策)

シェアボタンを押して情報を共有しましょう。

cheetah-1048296_1920.jpg

どうも、こんにちは。橋尾渡(@hashio_wataru)です!

前回の記事で、モバイルフレンドリーがどれほど重要なのかについて言及しましたね。その中でも、今後の評価基準でモバイルページの表示速度が大切になってきます。

どうも、こんにちは。橋尾渡(@hashio_wataru)です。 あなたは、「モバイルフレンドリー」という言葉を聞いたことがあ...

以前は、PCページの表示速度さえ気を付けていれば、そちらで判断してスマホページも評価を高くしていたようですが、これからは、別々に評価していくようです。

なので、これからスマートフォンのページをできる限り圧縮して、ページの表示速度を上げていきましょう。ページの圧縮をすれば、同様にPCページの表示速度も上がりますので、一石二鳥ですね。

スポンサーリンク
レクタングル(大)広告

PageSpeed Insightsで表示速度を確認

まずは、こちらのGoogleデベロッパーツール『PageSpeed Insights』を使い、あなたのページ表示速度を計ってください。

WS000163_060716_011431_PM

上の空欄に、サイトのURLを記入して、分析ボタンを押しましょう。数秒すると、分析が完了してモバイルの速度と、パソコンの速度を確認することができます。

僕が最初に分析した時、モバイル速度の数値は46でした。46は完全に赤点ですね。これは、赤、黄、緑と三段階になっていて、数値が高ければ高いほど、緑に近づいていきます。僕の個人評価では、こうなります。

  • 赤、話にならない 0~69
  • 黄、まぁギリギリ合格かな 70~79
  • 緑、問題なし! 80~100

と、いった感じですかね(笑)ページの速度を上げるため、Googleから修正箇所をいくつか指摘されます。そこを直してあげれば数値も上がっていくことでしょう。

WS000163_060716_082430_PM

このように、表示速度の下に修正すべき問題がいくつか表示されます。圧縮や、キャッシュの活用をしていけば、問題点は解決できます。とにかく、緑色を目指してページ速度を上げていくことが肝心です。

それでは、具体的な問題解決方法をご紹介していきたいと思います。今から紹介する3つの方法を使えば、ページの表示速度が僕の場合だと、46から76まで上がりましたね。

数値に関しては、個人差がありますので同じ数値になるとは限りません。ですが、数値が上がることは確実なので、安心してください。この3つの方法を使えば、僕より高い数値を叩き出す人もいると思います。

.htaccessにキャッシュコードを入れる

では、一番最初の表示速度を上げる方法を紹介していきます。「.htaccess」というファイルにキャッシュのコードを入れるという方法です。

こちらのコードを、.htaccessファイルに今から貼り付けていきます。.htaccessファイルを開くには、FTPソフトでサーバーにアクセスする必要があります。僕は、FFFTPというソフトを使っているので、それを使って説明しますね。

では、FFFTPを起動させ、あなたのサーバーにアクセスしてください。

スクリーンショット_060816_064704_PM

「.htaccess」ファイルは、基本的にどこのサーバーでも「/public_html」という場所にあるので、そちらに移動してください。「.htaccess」ファイルを見つけたら、右クリックを押してダウンロードしましょう。

スクリーンショット_060816_065822_PM

ダウンロードしたファイルは、メモ帳などのソフトで開いてください。そして、先程のコードを下の方に貼り付けて上書きをします。次に、上書きした.htaccessファイルは、FFFTPソフトでアップロードして上書きしましょう。そうすれば、キャッシュのコードが反映されます。

では、キャッシュコードを入れて、どれほどページの表示速度が変わったか「PageSpeed Insights」で計ってみましょう。

WS000165_060816_073433_PM

おぉ~!キャッシュコードを入れて6ポイントも速度がアップしましたね。ですが、これでは、まだまだ赤点です。なんとかして、黄色まで持っていきたいですね。

それで、次に行う表示速度アップの方法は、様々な要素を圧縮してくれるプラグインを使って高速化をしていきます。

WP Fastest Cacheをインストールする

キャッシュコードを入れることによって、少しだけ…速くはなりましたが、まだまだ速さが足りません。なので次は、ワードプレスのキャッシュプラグインをインストールして、大きく速度を上げていきましょう!

そこで、登場するのが「WP Fastest Cache」というプラグインです。キャッシュ関係のプラグインはいくつか存在するようですが、こちらの「WP Fastest Cache」は特に評判がよく、簡単に表示速度を上げることができて中々いいらしいです。

「WP Fastest Cache」をワードプレスの管理画面でインストールし、プラグインのオプションを開きましょう。

スクリーンショット_060816_080753_PM

左のメニューから「WP Fastest Cache」をクリックすれば、オプションが開きます。そして、上図のように、チェックを入れることができる場所には、全てチェックを入れましょう

※有料版を使えば、他の部分にもチェックすることができます。

では、チェックを入れてSubmitボタンを押して更新できたら、さっそく「PageSpeed Insights」を使って表示速度を確認してみましょう。

WS000173_060816_082123_PM

ご覧ください。「WP Fastest Cache」プラグインのチェックを入れるだけで、24ポイントも表示速度が上がりました。これは、驚くべき結果ですね。それに、修正箇所も減って、赤点から黄色に変化しました。これで、ギリギリ合格といったところでしょうか。

WS000176_060816_082940_PM

もしも、「WP Fastest Cache」を使って、エラーが出た場合は、「Delete Cache」というメニューがあるので、それでエラーを直してあげましょう。

そして、最後に行う表示速度を上げる方法は、普段からできる画像の圧縮です。それも、ワードプレスのプラグインで行っていきます。

EWWW Image Optimizerをインストールする

EWWW Image Optimizerって聞いたことありませんか?ワードプレスを使っている人なら、知っている人も多いのではないでしょうか。これは、画像ファイルのサイズを、できる限り圧縮して、ページの負担を少なくしてくれるプラグインです。

EWWW Image Optimizerをインストールするだけで、自動的に画像の圧縮をしてくれるので、特に手間がいりません。ワードプレスを使っている人なら、必ず入れたほうが良いプラグインの一つですね。

スクリーンショット_060816_084957_PM

EWWW Image Optimizerをインストールしていなかった人は、こちらの「Start optimizing」を押して、今までの画像ファイルを圧縮してあげましょう。そうすることによって、各ページの画像が圧縮され、ページの負担が軽くなります。

以上で、ページ速度を上げる3つの方法は終わりです。ワードプレスを使っている人なら、これでだいぶ速度が上がるんじゃないでしょうか。速度があまり上がらないという人は、修正箇所の見直しや、テーマを変えてみるなどしてみてください。

テーマによって、速度が異なることは多々あります。僕の使っているSimplicityの場合は、恐らく赤点から黄色まで上げることができるでしょう。

そして、番外編なんですが、Xserverをお使いの人ならとっておきの最終手段があります。それを今からご紹介しましょう!

mod_pagespeedで高速化(Xserver専用)

あなたは、どこのレンタルサーバーをお使いですか?さくらサーバー?ロリポップサーバー?Hostingerサーバー?色々と、サーバーがあるでしょうが、僕の使っている『エックスサーバーは特に人気があり、サーバーは常に安定しています。

数あるサーバーの中でも、Xserverにしか存在しない機能があり、それを使う事によってページの高速化をすることができます。その機能とは、「mod_pagespeed」という高速化設定です。

mod_pagespeed設定とは

Google社により開発された拡張モジュール「mod_pagespeed」を使用して、Webサイトの表示速度を向上させる機能です。
「mod_pagespeed設定」を有効にすると、ファイルを圧縮してデータ転送量を削減する、同種のファイルを一まとめにして無駄な通信を削減するなどの最適化処理を実施します。
この最適化処理により、Webサイトにアクセスしたブラウザはデータ転送量が減少し、また、ページのロード時間を短縮できるため、Webサイトの表示速度改善を期待することができます。

mod_pagespeed設定について

と、いった具合にGoogle社が開発した機能なんですね。これを使えば、表示速度の改善が期待できます。もしも、これからブログを始めたいと言うのであれば、確実にエックスサーバーがおすすめですね。サーバーの移動を検討中の人にもおすすめです。

Xserverの良さについて、詳しく説明した記事を書かせていただきましたので、是非ご覧ください。

チェックエックスサーバーをおすすめする10個の理由

それでは、そろそろmod_pagespeedの使い方について説明していきましょう!

スクリーンショット_060816_095957_PM

まずは、Xserverの管理画面を開いて、サーバーパネルを開きましょう。下にある、ログインボタンを押せば移動できます。

スクリーンショット_060816_100520_PM

次に、サーバーパネルのホームページメニューの中にある「mod_pagespeed設定」をクリックしましょう。

スクリーンショット_060816_100700_PM

そして、mod_pagespeedで高速化したいドメインを選択してください。

スクリーンショット_060816_100831_PM

このように、変更のボタンを押して、現在の設定でONになればmod_pagespeedによって高速化がされます。これで、mod_pagespeedの設定は終わりです。

このmod_pagespeed設定を使えば、だいぶ表示速度も上がるのではないでしょうか。僕の使っているSimplicityのテーマだと、レイアウトが崩れてしまうので今は使っていません。そういう心配がない人は是非使うべき機能ですね。

※この機能を使う事によって、レイアウトなどが崩れる恐れがありますのでそういう場合はOFFにしましょう

まとめ

いかがだったでしょうか。あなたのページ表示速度はいくつになりましたか?もしかしたら、僕より数値が高くなっている人もいるかもしれませんね。これ以外にも、前述したとおり修正箇所を直していけば、必ず数値が上がっていくはずです。

ですが、残念ながら僕の知っている高速化の方法は、これくらいしか知りません。もし、他の方法を知っているならば是非コメントをお待ちしております。

それでは、そろそろモバイルフレンドリー対策でページ表示速度を上げる方法についての記事を終わりたいと思います。ありがとうございました!

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告
この記事をお届けした
HASHIO_LOGの最新ニュース情報を、
いいねしてチェックしよう!

シェアボタンを押して情報を共有しましょう。

フォローする

関連記事