プログのアクセス数を伸ばしていく上で、コンテンツと同じように大切なのが、サイトの表示速度です。表示が遅いと価値の高いコンテンツでも、離脱率が高くなります。
そこでサイトの速度を測定して、スピードを改善していきましょう。Googleが無料で提供しているPageSpeed Insightsなら、簡単にサイトの表示速度が測定できます。
この機能はgoogleアナリティクスにも連携しているので、サイト全体の表示速度だけでなく、それぞれのページ速度も確認できます。また、もっと詳しく改善点を知るにはGtmetrixが便利です。
今回は、サイトの速度を測定するツールを使い、表示速度をアップさせる方法について説明しています。
このページの目次
サイトの表示速度が遅いデメリット
サイトの表示速度が遅いと、離脱率や直帰率は高くなります。画面の切り替わりが遅ければ、ほかのページに移りたくなるますよね。ユーザビリティを高める上で、ページの読み込み速度は重要になってきます。
パソコンでは、切り替わりが遅いことは少なくなりましたが、スマホなどのモバイルでは、サイトによってまだまだ速度に違いがあると思います。Googleによると、モバイル検索での表示速度が遅いサイトは、2018年7月以降から検索順位が下がるそうです。
ユーザービリティを高めて検索エンジンの評価を得るには、ページの表示速度をアップさせていきましょう。ではさっそく、このサイトの速度を調べてみたいと思います。
ブログのページ速度を調べる
簡単に表示速度を確認するなら、PageSpeed Insightsが便利です。Googleアナリティクスに連携しているPageSpeed Insightsを見れば、一つひとつの記事の表示速度も確認することができます。
まずは、PageSpeed Insightsでサイトの速度を測定してみます。
このサイトを測定してみると、モバイルでのスコアは81でした。ただしこの数値は、随時変化します。
パソコンでのスコアは85です。
PageSpeed Insightsからは、大まかなことがわかります。平均よりスピ―ドが早いときにはグリーン、標準になると黄色、遅いと赤で表示されるので見やすいです。ただ、どこを改善すればいいのかについては、詳しく分かりません。そこで、GTmetrixを使用して分析していきます。
GTmetrixでは、パフォーマンススコアとページの詳細を知ることができます。下のようにA~Fの段階で表示されますから、グレードが低い部分は改善が必要です。
PageSpeed Insightsのスコアとは異なり、こちらのスコアは芳しくありません。しかし、簡単な方法で改善することもできるので、さっそく試してみます。ただ「combine images using CSS sprites」などのスコアの改善には、テクニカル的な知識が必要になってきます。
高速サーバーを利用する
サイトのスピードを改善する上でもっとも重要なのは、サーバーです。どこのサーバーをレンタルしているかによって、サイトの表示スピードは大きく違ってきます。また、一口にレンタルサーバーといっても、サービスや料金は異なります。
安いところですと、月額数百円くらいからレンタルできますが、レンタル料が格安のときには、サイトの表示速度が遅くなると思います。
ですので、高速のサーバーを利用していきましょう。高速・高機能・高性能のサーバーなら、エックスサーバーがおすすめです。エックスサーバーには、PHP高速化設定やmod_pagespeed設定といった、サイトのスピードをアップさせるオプション機能が付いています。
PHP高速化設定でPHPプログラムを最適化しておくと、ページの速度は早くなりますし、mod_pagespeed設定をオンにするだけでコンテンツを最適化することができます。
もちろんエックスサーバーよりも優れたサーバーがあるときは、そちらをおすすめします。サイトの速度は、サーバーの性能にかなり左右されるので、レンタルサーバーは十分に検討してみて下さい。
すでにエックスサーバーを利用されている方は、PHPプログラムの最適化とmod_pagespeed設定をオンにしていきましょう。設定はとても簡単です。さっそく説明しますね。
まずは、エックスサーバーにログインします。
トップページの画面右側に「ログイン」があるので、クリックして「サーバーパネル」を選択します。ただ、エックスサーバーでは、各パネルにログインするときのIDやパスワードが異なり、ややこしいです。そこで、いつも「インフォパネル」からログインしても良いと思います。
「インフォパネル」からログインした場合、ほかのパネルにもログインなしでアクセスできます。では、サーバーパネルの管理画面を開いたら「PHP高速化設定（FastCGI化）」をクリックして下さい。
「FastCGI」が有効と表示されていれば、デフォルトの状態でCPUの負荷を軽減して高速化させる設定になっています。
次にmod_pagespeedをクリックします。この設定をオンにすると、サイトのコンテンツを最適化できます。
これで完了、簡単ですよね！たった2つの設定でもスピードアップになると思います。
画像を圧縮する
ブログに投稿する画像は必ず圧縮していきましょう。記事の量が膨大になってくるとサイトには大きな負荷がかかるので、表示速度は遅くなります。
そこでおすすめするのは、自動で画像を圧縮するプラグインの「EWWW Image Optimizer」です。設定を済ませれば、画像を圧縮してくれるので、是非活用していきましょう。EWWW Image Optimizerをインストールする方法と使い方については、こちらの記事で紹介しています。
ソースファイルを圧縮する
HTML、Javascript、CSSといったソースファイルを圧縮することでページ読み込みスピードをアップすることが出来ます。ソースファイルを圧縮するプラグインは「Autoptimize」です。
このサイトでは、ほとんど変化はありませんでしたが、良いという評価もあるので、試してみて下さい。まずはワードプレス管理画面左側の「プラグイン」をクリックして「新規追加」をクリックします。
「有効化」をクリックします。
ワードプレス管理画面左にある「設定」から「Autoptimize」をクリックします。
- HTML コードを最適化
- JavaScript コードの最適化
- CSS コードを最適化
にチェックマークを入れます。
「変更を保存してキャッシュを削除」をクリックします。しかし、他にもプラグインをインストールしている場合、相性などの問題で不具合が生じることがあります。その時は、チェックを１個づつ外して調整してみて下さい。
JavascriptとCSSのファイルを個別に圧縮する
「Autoptimize」を使用しても圧縮できないCSSとJavascriptのファイルがあります。これはオンラインで個別に圧縮できます。ただし、この作業をするときには、バックアップをして下さいね。
⇒https://www.willpeavy.com/minifier/
Javascriptのファイルを圧縮する場合
上のリンクを開いたら、まずはGTmetrixの「Minify JavaScript」にある圧縮したいJavascriptのリンクをクリックします。
Windowsは「Ctrl」と「A」で、MACは「command」と「A」でコードを選択します。
Windowsは「Ctrl」と「C」でコピー、「Ctrl」と「V」で貼り付け、MACは「「command」と「C」でコピー、「command」と「V」で貼り付けです。「Input」にコピペしてから「JavaScript」をクリックします。
これでJavaScriptの圧縮は完了です。これを元のコードに上書きします。
上書きするためのファイルは、クリックしたURLに記載されています。たとえば、このJavaScriptファイルはサーバー内の「wp-content⇒plugins⇒contact-form-7⇒includes⇒js⇒scripts.jsになります。
CSSファイルを圧縮する場合
先ほどと同じ方法で、まずは圧縮したいファイルのソースコードをコピペします。
CSSをクリックします。
すると圧縮されたコードが表示されるので、元のコードに上書きします。
このファイルの上書きには、FTPソフトを使用していきましょう。FTP接続でファイルをアップロードしたほうが効率的に作業が出来ます。おすすめのソフトは、FileZillaです。ダウンロードの方法と使い方はこちらの記事で紹介しています。
⇒FileZillaのダウンロード方法と使い方（MACも対応）
エックスサーバーをお使いの方なら、FTP接続よりも安全性の高いSFTP接続をおすすめします。設定の仕方はこちらの記事を参考にしてみて下さい。
⇒エックスサーバーにFileZillaでSFTP接続を設定する方法
ただし、JavaScriptやCSSを編集した場合、ミスをすると画面が真っ白になることがあります。ですので、ワードプレスに馴れていない方は、何もしないほうが良いと思います。また、試してみるときはバックアップをとっていきましょう。
これなら万が一のことが起こっても、安心です。バックアップ用のプラグインのインストールと設定の仕方は、こちらの記事を参考にしてみて下さい。
Javascriptのコードをフッターにもってくる
WebページのHTMLは上から読み込まれます。Javascriptのコードが上部にたくさんある場合は、読み込みに時間がかかることになります。
そこで、HTMLの上部にあるJavascriptのコードをフッター部分に自動で移動させるプラグインをインストールして、サイトの表示速度をアップさせます。
ワードプレス管理画面の左側にある「プラグイン」を選択し「新規追加」をクリックします。キーワードに「Speed Up JavaScript to Footer」と入力して検索したら「インストール」をクリックして「有効化」をクリックします。
これで、上部のJavascriptが自動的にフーター部分へ移動します。
Jquery.jsファイルを削除する
ワードプレスはデフォルトの設定で、Jquery.jsファイルを読み込むようになっています。ただ、これは使っていないことも多いです。Jquery.jsファイルがサイトの速度を遅くしていることもあります。
これは「function.php」に下のコードを追加するとブロックできます。ただし、表示が変わったりしてしまうことがあるので、コードを埋め込んだらブログの表示を確認して下さい。
また、賢威テンプレートをご利用の方は、このコードの追加はしないで下さい。私は賢威テンプレートを使っているのですが、ページを最上部にもっていくボタンが消えたり、テンプレートの構成が変化したりしました。
もしかすると使用しているプラグインが影響しているのかもしれませんが、原因は不明です。またFunction.phpのファイルは重要なファイルの一つです。ミスがあるとブログが表示されなくなります。
そこで、テーマ―に編集を加えるときは、子テーマを作っておくと便利です。子テーマの作り方は、こちらの記事を参考にしてみて下さい。
⇒ワードプレス初心者向け賢威子テーマの作り方（エックスサーバー編）
.htaccessでHTMLファイル等を圧縮する
サーバー上のHTMLファイルなどを圧縮してブラウザに送信することで、ファイルの転送量を減らすことができ、その結果、表示速度をアップさせることができます。
public_htmlフォルダの下に.htaccessファイルがあるので、以下のコードを貼り付けて下さい。.htaccessファイルもミスをすると致命的なファイルです。また、ここに書き込まれているコードは削除しないで下さい。
コードをコピペで貼り付けたら「保存」をクリックします。
ブラウザのキャッシュを有効にする
キャッシュとは、一度読み取ったデータを記憶して、再表示されたときに表示を早くする機能のことです。ブラウザのキャッシュを有効にすることで、アクセスさせたときの表示スピードをアップさせることが出来ます。
public_htmlフォルダの下にある.htaccessファイルに以下のコードを貼り付けてから、保存して下さい。
無料のCDNサービスを利用する
では、CDNサービスを設定していきます。CDNサービスとは、使っているレンタルサーバー上のコンテンツで、キャッシュできるファイルを複数のサーバーにキャッシュして、利用中のサーバーにかかる負担を軽減するサービスのことです。
CDNサービスを無料で提供している企業は少ないですが、アメリカのCloudflareに登録すると無料で利用できます。これは有益なサービスですから、さっそく登録していきましょう。
Cloudflareに設定する手順
CloudflareのCDNサービスを使用するには、次の順番で設定します。
- Cloudflareに登録する
- Cloudflareの初期設定をする
- ドメインのネームサーバを変更する
- Cloudflareでネームサーバーの変更を確認する
まずはCloudflareのホームページにアクセスして、画面右上にある「Sign Up」をクリックして下さい。
すると「メールアドレス」と「パスワード」の画面が表示されるので入力していきましょう。「Create Account」をクリックすることによって、Cloudflareの規約と条件、プライバシーポリシーに同意することになります。
Cloudflareの初期設定をする
すると、サイトを入力する画面が表示されるので、CDNサービスを受けるサイトのURLを入力して「Add Site」をクリックして下さい。
「Next」をクリックします。
「Select Plan」が表示されるので、好きなプランをクリックしてから「Confirm Plan」をクリックします。
「Continue」をクリックします。
すると「Change your Nameservers」の画面が出てきますから、ここでドメインサービス会社のネームサーバーを変更します。エックスサーバーのネームサーバーは5つですが、cloudflareのネームサーバーは2つです。
この場合は「ns1.xserer.jp」を「arch.ns.cloudflare.com」に変更、「ns2.xserer.jp」を「cass.ns.cloudflare.com」にそれぞれ変更して、「ns3.xserer.jp」「ns4.xserer.jp」「ns5.xserer.jp」は削除して下さい。
私の場合は、お名前.comを利用しているので、その変更方法を紹介したいと思います。
ご利用のドメインサービス会社によって、ネームサーバーの設定方法は異なります。それぞれのサービスに合わせて設置してみて下さい。
ドメインサービス会社のネームサーバーを変更する
まずはCloudflareのウィンドウを開いたまま、新しいウィンドウからお名前.com Naviにログインします。
ネームサーバーを変更するドメインを選択します。
「その他のネームサーバー」をクリックして、cloudflareのネームサーバーをコピペして「確認」をクリックします。
確認の画面になるので、「OK」をクリックします。
「完了しました」と表示されたらドメイン管理会社の設定は終了です。
cloudflareの画面に戻って「Continue」をクリックして下さい。
設定が反映されるまで24時間くらいかかることがありますが「recheck」をクリックして、画面の下に緑色のバーが出たら設定はうまくいっています。
このバーはすぐに消えてしまったので、画像を取ることが出来ませんでした。また再確認は、1時間に1回しかできないようになっています。もし、設定が上手くいっていない場合は、赤色のバーが表示されます。
再度確認したときに「Status」が「Active」になっていれば、OKです。今後Cloudflareによってサーバーの負担が軽減されます。
ではもう一度、速度を測定してみますね。
始めに測定したときは、PageSpeedのスコアは79%、YSlowのスコアは63%だったので、少し改善されています。また、Fully Loaded Time、Total Page Size、Requestも良くなっています。
まとめ
このブログのスピードとパフォーマンスをアップさせた方法は以下の通りです。ブログのスピードは、アクセス数と直結しているので、試してみて下さい。
- 高速のサーバーを使う
- 画像を圧縮する
- プラグインでソースファイルを圧縮する
- プラグインで圧縮できないファイルは個別に圧縮する
- Javascriptのコードをフッターにもってくる
- Jqueryを削除する
- .htaccessでHTMLファイル等を圧縮する
- ブラウザのキャッシュを有効にする
- 無料のCDNサービスを利用する
サイトの速度をアップさせるには、PCとスマホを分けて高速表示してくれるプラグイン「W3 Total Cache」も有効です。W3 Total Cacheの設定方法はこちらの記事で紹介しています。参考にしてみて下さい。
⇒ワードプレス高速化プラグインW3 Total Cacheの設定方法