こんにちは。
川口のWEB屋テダスクのToshiです。
WordPressを使っていて、あるとき他の人のサイトよりも表示速度が遅いと気付くことがあります。
調査によるとページの表示に3秒以上掛かってしまうと53％が離脱してしまうという調査もあります。※
※HTMLコーダー＆ウェブ担当者のための Webページ高速化超入門参考
ホームページを見るユーザー目線でもそうですし、Googleも表示速度を重要と考えておりAMP（Accelerated Mobile Pages）というGoogleのサーバーにキャッシュする仕組みも用意しているくらい、ホームページにとって表示速度はとても重要なことです。
この記事では現在WordPressを運営していて、先ず出来る範囲から速度対策をやっていただきたいと思い記事を書きました。
WordPressのスピードアップを考える際に、私個人でもやっていることや、お客さんのサイトのご相談でもよくやることですので、宜しければ参考にしてみて下さい。
WordPressの読み込み遅いと感じたら試してみること（初心者向け）
先ずはGoogleのページスピードインサイトを見てみる
Googleのページスピードインサイトとは簡単に説明すると、サイトの表示スピードの平均値をスコア（数値）で教えてくれるツールです。
同時に、改善方法も教えてくれます。
サイトの読み込みが重いと思っていても、実際平均と比べてどのくらい読み込みが遅いのかを数値で見ることが先ず大切です。
また改善前と改善後のスコアの変化も分かるので、対策前には必ずやっておきましょう。
それではページスピードインサイトのページを開きます。
画像のように、分析したいページのURLを入力して「分析」をクリックします。
因みに今回はこのサイトのトップページのURLを入力していますが、トップページに限らず気になっているページのURLを入力して分析するのもOKです。
例えば、ブログのページとかです。
分析が終わると上の様な結果が表示されます。
これはモバイルの結果ですが、私のトップページのモバイルのスコアは「43」なので、遅いという結果ですね笑
ただ、私のサイトはパソコンでの閲覧がメインなので、どちらかというと「パソコン」のスコアが気になりますね。
左上にある「パソコン」のリンクをクリックすると、パソコンのスコアが表示されます。
そうするとパソコンに関しては「98」なので、速いという結果が出ました。
こんな風に、先ずは自分のスコアがどの状況なのかを調べましょう。
不要なプラグインを消してみる
ページスピードインサイトの結果が分かったところで、対策を始めて行きましょう。
まず、重くなる原因の一つにプラグインがあります。
プラグインが重いと言うよりも、ちょっと専門的な話になりますが、JavaScriptというプログラムを利用したプラグインを使っている場合その読み込みで重くなることがよくあります。
なので、読み込み速度を少しでも上げる場合、不要なプラグインを少しでも減らすようにするのが大事です。
過去にお客さんのWordPressを見させていただくと、多くの方が使っていないプラグインを有効化の状態にしていたり、同じ機能のプラグイン複数入れていたりするケースがあり、それを消すだけでも読み込み速度が改善される場合があります。
具体的に私が過去に重いと思ったプラグインは、Jet packです。
Jet pack自体は便利なプラグインではあるのですが、機能が多い分サイトの表示速度が遅くなっていたので、私の中では使わないように進めています。
Jet packの便利機能で、Googleアナリティクスの様な統計情報をWordPress内で見られたり、関連記事がだせたり、いいね！の様なシェア機能が簡単に導入できるので本当に便利なプラグインだと言えるのですが、特に統計情報に関してはWordPress内で見る必要は無く、Googleアナリティクスで見るようにしましょう。
他の機能も、それぞれに特化したプラグインをインストールするほうがベターです。
必要最低限のプラグインについては以下の記事でも紹介しています。
記事に入れている画像のサイズを確認してみる
画像が大きいと読み込みに時間が掛かるため、当然表示速度が遅くなります。
一般的なブログでしたら、スマホで撮った写真をそのままブログに掲載することも多いと思いますが、今のスマホの画像はかなり解像度が高くそのままブログにアップロードしてしまうと、1MBを超えるようなサイズになることもあります。
1MBの画像が表示されるというのは、単純に1MBの画像をダウンロードするのと同じですので、この容量の画像が5枚とか有るだけで、5MBを超えてしまい、音楽一曲をダウンロード出来るくらいの容量を1回ページの表示するだけで見る側の人は消費することになります。
また、同時にサーバーにも画像が溜まっていけば当然バックアップを取るのにも容量が増えサーバーも圧迫することになります。
ですので、先ず今アップロードしている画像のサイズを確認してみましょう。
このページはWordPressのメニューの「メディア」で見ることができます。
調べたい画像をクリックすると、右側に画像の詳細が表示されます。
この画像の場合は、画像の容量が63KBで解像度が800px×600pxとなっています。
画像の場合、この写真の例のように幅の解像度は800pxで十分だと私は思っています。
なぜなら、このサイトのコンテンツの幅が800pxもないという点と、スマホ（例えばiPhone 6）でこのサイトを見た場合、iPhone 6の画面幅が375pxなのですがRetinaディスプレイを採用しているため、解像度を2倍で読み込んで画像を綺麗に見せる仕組みになっているので、最大で必要な解像度は750pxとなります。
つまり、iPhone 6までであればですが750px以上の解像度にしても表現できないため意味ないということになります。
iphone 8やiphone Xまで見ると表現できる解像度は1,000pxを超えてくるので、1,000pxでも良いのかなと思いますが、正直相当画像に拘っていない限りは、800pxで十分だと思っています。
なので、画像をアップロードする前に800pxにリサイズしてからアップロードすることをおすすめします。
また、プラグインでアップロードした画像を見栄えが変わらない状態で圧縮するプラグイン（EWWW Image Optimizer）もありますので、それも併せて利用すると良いです。
読み込みの最適化をするためにプラグインを入れる
いままでは、消したり容量をアナログチックに減らしていく作業でしたが、この項ではプラグインを使って軽くしようという試みです。
利用するプラグインはAutoptimizeというプラグインで、読み込むHTMLとCSSのコードの圧縮を自動でやってくれるプラグインです。
画像と同様に、圧縮することである程度読み込み速度が速くなるという期待があります。
ただし、このプラグインを使うことで、表示がおかしくなったという話もあるので、設定をした後は必ず大まかにページ全体を確認して問題ないかをちゃんと見るようにしましょう。
もし問題が見つかった場合は速やかに停止して、削除して下さい。
赤枠で囲んだものが「Autoptimize」ですので、インストールして「有効化」しましょう
画像の例のように、チェックを入れるのは「HTMLコード最適化」と「CSSコードを最適化」の二つだけです。
JavaScriptコードの最適化にはチェックを入れないようにして下さい。
このJavaScriptコードの最適化は割とエラーが出てしまうみたいですので、有効にしない方が賢明です。
WordPressの読み込み遅いと感じたら試してみること（中級者向け）
ここからは、若干初心者には難しいのかなと思うところですが、私がよくやる事なのでそういうのもあるんだという程度で知識として知って貰えたらなと思います。
ブラウザの検証ツールでエラーが出ていないか見てみる
ブラウザには検証ツールという機能があるのですが、エラーチェックを行う事が出来るので、私はいつもチェックするようにしています。
この表には見えないエラーも読み込みが遅くなる原因の一つで、リンク切れの画像やテーマやプラグインで読み込んでいるJavaScriptのエラーなども気付かないところでにエラーが出ている場合があり、その為の再リクエスト（再読込）を行うことで、読み込み速度が遅くなる場合があります。
では、どういうことか具体的に見てみましょう。
検証ツールというのは、ChromeやFirefoxで見ることができるのですが、エラーチェックであればChromeが分かりやすいです。
Chromeでエラーチェックをしたいサイトを表示して、「右クリック」をすると「検証」という項目が出てくるのでクリックをすると、画像のように左から検証ツールが出てきます。
画像で表示しているサイトは私のプライベート用のブログサイトですが、右上を見ると「×」のマークと「1」という数字が出ていますね。
そして、エラー内容が右下の方に表示されています。
こんな風にエラーが出ている場合は、赤く表示されています。
因みにこのエラーは、私のプライベート用のサイトにTwitter窓を貼っているのですが、アカウント名を変更したのにもかかわらず古いままのアカウント名だったため、読み込みエラーが起こっていたため出たエラーです。
こういったのも多少なりとも完全にページが表示されるまでの遅延が出てくるため、表示速度が遅くなる原因となります。
お客さんのエラーでよくあるのが、導入部分でも話しましたが、プラグインが古すぎてJavaScriptのエラーが出ているパターンです。
そおそもプラグインが機能していないのですが、気付かずにそのままの状態になっているとこういう事が起きます。
他には、非公式のWordPressテーマや業者の方に作ってもらったオリジナルテーマで、そもそもエラーが発生していたというパターン。
一度、確認してみると良いですよ。
速さをウリにしているサーバーに乗り換える
色々やった挙げ句、それでももっとスピードアップを望むのであれば、速さをウリにしているサーバーに乗り換えるのがおすすめです。
なぜなら、サーバーのスペックがサイトの表示のボトルネックになるからです。
どんなにWordPressを最適化しても、サーバーがロースペックの場合やはり性能以上の表示スピードを出すことは不可能です。
最近はSSDベースのサーバーも多く出てきており、一昔前よりもかなりリーズナブルにSSDのサーバーを利用する事が出来ます。
ただ、サーバーは長く使っていくものでもありますし、スピードよりも堅牢性（安定性、サーバーが落ちないとかサポートが充実しているとか）を重視するのも大事な決めてです。
ですので、簡単にはサーバーを乗り換えるというのは難しいと思いますが、それでも速度を上げたい場合は、メージャーどころでかつスピードをウリにしているサーバーがおすすめです。
ちなみに私は、いくつかサーバーを利用しているのですがConoHa WING
というサーバーは業界でWordPressの表示速度が一番速いと説明しており、スピードアップ目的で私も利用していますが、スピードが本当に劇的にアップしましたのでリアルにおすすめできます。
ConoHa WINGのサイトを見てみる。
そもそもなぜ表示速度を速くしたほうが良いのか
今まで表示速度を上げる為の方法をいくつかお伝えしましたが、そもそもなぜ表示速度が速いほうが良いのでしょうか。
それは、「直帰率」という言葉が関係してきます。
WEB業界では、表示に掛かる時間で待てる時間は約３秒までと言われています。
３秒ってどれだけ気が短いんだよ！って思いそうですが、急いで検索しているときのことを思い出してみてください。
検索したときに、いくつも検索結果が出てきて、良いなと思いリンクをクリックしますが、画面が白いまま表示されずに時間が2秒、3秒と経っていくと例えこの後表示されたとしても、また待たされるのではないかと思い、検索結果のページに戻った経験ってありませんか？
このようにページを見にいったが、そのまま戻る、そのまま閉じてしまう事を「直帰」といいます。
Googleでは正式には直帰率は評価の対象にしていないとアナウンスしていますが、一般的に回遊率（次のページに行く確率）が評価されると言われているので、結果的には直帰率は少ない方が良いと言うことになります※。
※WEBサービスのサポートサイトなどは直帰率が多い方が良いとされていますので、正確に言うとサイトの目的によってここは変わります。
Google評価はともかく、表示速度が遅ければ遅いほど、せっかくページを見に来てもらったにもかかわらず、何も見ずに出て行ってしまったら勿体ないですよね。
例えて言うなら、飲食店でも服屋さんでも良いのですが、お客さんが折角来店してくれたのに、「いらっしゃいませ！」とすぐに店員さんがお迎えに見えず、ずっと入り口で気付かれないまま待たされれている状態が続いたら、やっぱりお店出ていってしまうのは想像できますよね。
それと同じ感じです。
サイト表示を速くするということは、万全な状態で見に来た人を迎えることと同じです。
ですので、スピードを早くするというのは、WEBサイトを運営する側としてはとても大事な事だと言えますね。
以上で「初心者でもできるWordPressの読み込み遅いと感じたら試してみること5つ」の説明を終わります。
もしスピードアップのことで困っているということでしたら、私に直接ご連絡いただければご対応も可能ですので、お気軽にご連絡下さい。
コメント