イトカズです。
[keikou]今回はWordPressでブログ運営している方は必見の情報です。[/keikou]
あなたは自分のブログがどのくらいのスピードで読み込まれているかわかりますか?
競合サイトに比べて表示速度が早いか遅いか比較したことはありますか？
もしかしたらブログの表示速度を意識しないとあなたのブログは読まれないかもしれません。
[voice icon=”https://itochannel.com/wp-content/uploads/2017/08/IMG_4726.gif” name=”イトカズ” type=”l icon_blue”]というわけで今回は『WordPressの高速化』について徹底解説をしていきます[/voice]この記事の目次は表示をタッチ
- 1 グーグルが提供するサイト表示速度診断ツール「Test my site」
- 2 表示速度が遅いブログは集客(収益化)できない
- 3 【対策1】画像は横幅1000px前後を徹底する
- 4 【対策2】画像ファイルのサイズは『Tiny PNG』を使って徹底的に軽量化
- 5 【対策3】EWWW Image Optimizerで画像を最適化
- 6 【対策4】プラグインを整理してサイトの無駄を省く
- 7 【対策5】WP Fastest Cacheでキャッシュを有効にする
- 8 【対策6】スライダー表示のような動きのあるコンテンツを置かない
- 9 【対策7】エックスサーバーで運用する
- 10 まとめ：訪問者にとって快適なページを一番意識しましょう
グーグルが提供するサイト表示速度診断ツール「Test my site」
2017年6月28日にGoogleからサイトの表示速度を計測するツール『Test my site』がリリースされました
『Test my site』とはWebサイトの[keikou]モバイル表示に特化した表示速度計測ツール[/keikou]です。
当ブログイトチャネンネルの閲覧は７割以上がスマートフォンです。
みなさんのブログもスマートフォンからの閲覧数が多いはずです。
つまり[keikou]モバイルファーストのブログ作り[/keikou]はあなたのサイトの満足度を上げる為の必須なのです。
[voice icon=”https://itochannel.com/wp-content/uploads/2017/05/itochan_icon.jpg” name=”イトカズ” type=”l icon_blue”]具体的な表示速度の計測方法を解説します[/voice]使い方は簡単ですURLを入力して実行するだけ
１分程度待つと計測結果が表示されます
更に類似サイトと比べて表示速度が早いか遅いかを教えてくれます。
これまでグーグルが提供するサイトの表示速度診断ツールとしては『PageSpeed Insights』が有名でした。
この『PageSpeed Insights』はモバイルとデスクトップの2つの[keikou]表示環境毎の表示速度を点数化し、改善点を提案してくれるツール[/keikou]です。
[aside type=”normal”]※各ツールの違い※・『Test my site』はモバイルの表示速度の診断のみに特化。デスクトップは診断不可。
・『PageSpeed Insights』は表示速度を点数化するが他サイトとの比較はなし[/aside]
[voice icon=”https://itochannel.com/wp-content/uploads/2017/08/IMG_4726.gif” name=”イトカズ” type=”l icon_blue”] 診断ツールは目的にあったものを活用しましょう。
当面、デスクトップ画面での表示速度を診断したい場合は『PageSpeed Insights』を使うといいですね[/voice]
表示速度が遅いブログは集客(収益化)できない
表示速度の遅いブログのデメリットは、離脱されることです。
せっかく検索流入されても離脱されやすくては、収益化することができません。
表示速度が遅いページのユーザーの行動について2017年2月にGoogleが発表したニュースがあります。
英語の記事ですが海外SEO情報ブログさんがその情報をわかりやくまとめてくださっています。
[voice icon=”https://itochannel.com/wp-content/uploads/2017/08/IMG_4726.gif” name=”イトカズ” type=”l icon_blue”]ページの表示速度が遅い場合、あなたの記事は読まれずに離脱する人が増えます。・表示速度が1秒から3秒に落ちると、[keikou]直帰率は32%上昇[/keikou]
・表示速度が1秒から5秒に落ちると、[keikou]直帰率は90%上昇[/keikou]
・表示速度が1秒から6秒に落ちると、[keikou]直帰率は106%上昇[/keikou]
・表示速度が1秒から7秒に落ちると、[keikou]直帰率は113%上昇[/keikou]
・表示速度が1秒から10秒に落ちると、[keikou]直帰率は123%上昇[/keikou]出典元：ー海外SEO情報ブログ
速度制限の状態でYouTubeを観れないのと同じです。[/voice]
離脱する人が増えると、あなたのブログへ訪問してくれてもアクション(問い合わせ、来店予約、アフィリエイトリンクからの購入)を起こしてもらいにくいです。
アマゾンの元エンジニアであるグレッグ・リンデン氏は[keikou]サイトの表示速度が0.1秒遅くなると、売上が1％下がってしまう[/keikou]と言っています。
ちなみに2016年のアマゾンの年間売り上げは[keikou]1359億8700万ドル[/keikou]です。
日本円に換算すると[keikou]14兆9585億7000万円[/keikou]です（110円＝1ドルで計算）
米Amazonの2016年における連結総売上高は前期比20.7%増の[keikou]1359億8700万ドル[/keikou]で、日本事業の売上高が占める割合は7.9%
出典元：ネットショップ担当者フォーラム
この数字を元に計算すると、サイトの表示速度が[keikou]０.1秒遅れると年間売り上げが額が13億5987万ドル下がります。[/keikou]
日本円に換算すると1495億円8570万円(110円＝1ドルで計算)たった0.1秒でこの差です。
[voice icon=”https://itochannel.com/wp-content/uploads/2017/08/IMG_4726.gif” name=”イトカズ” type=”l icon_blue”]数字が大きすぎてピンとこないですが・・・しかし、これはアマゾンに限らずあなたのブログでも同じことが起こります！
例えば、あなたが美容室を経営していて、日々の情報発信の結果、検索で上位表示されたとします[/voice] [aside type=”boader”]質問：A店とB店は同じ商圏エリアの、同じ価格帯の、ターゲットも同じ競合店です。どちらのお店に来店予約が多いと考えますか？
・A店のHPは1ページの表示速度が７秒で『トップページ→メニュー→来店予約』の３ページを開くのに21秒かかる
・B店のHPは１ページの表示速度が３秒で『トップページ→メニュー→来店予約』の３ページを開くのに９秒かかる[/aside] [voice icon=”https://itochannel.com/wp-content/uploads/2017/08/IMG_4726.gif” name=”イトカズ” type=”l icon_blue”]AよりBの方が問い合わせが多いのは想像できると思います。
仮に1日に３件のお問い合わせを逃してたとすると、１ヶ月で約90名、年間で1000名以上もの機会を損失していると思うと、とても恐ろしくなってきますね[/voice]
表示速度が原因で売り上げを落としていることは理解できたと思います。
[keikou]というわけで今回、イトカズがWordPress高速化のために実践した具体的なノウハウを7つお伝えします。[/keikou]
ここにあなたのブログの表示速度を見直すヒントがあるかもしれません。
【対策1】画像は横幅1000px前後を徹底する
ページの中で[keikou]最もファイルサイズが大きいものは画像[/keikou]です。
最近のワードプレスのテーマはレスポンシブデザイン対応が標準とされているものが多いです。
レスポンシブデザイン対応のテーマを使用すると端末のサイズに合わせて画像の大きさを自動調整してくれます。
しかし元の画像が大きすぎるとページ表示に負荷がかかり、表示速度が遅くなってしまいます。
[voice icon=”https://itochannel.com/wp-content/uploads/2017/08/IMG_4726.gif” name=”イトカズ” type=”l icon_blue”]モニターの大きさや解像度は人によって様々ですが、WEB制作会社のFASTCODINGさんのブログがモニター解像度のシェアを元に適切な画像の横幅サイズを教えてくれています[/voice]
FASTCODINGさんの情報を参考にして
[aside type=”boader”]- 基本的に画像は1000px前後の横幅に設定
- モバイル用に画像を設定出来る場合は750pxの横幅に設定
画像を適切な横幅に調整することで、読込にかかる負荷を最小限にしてページの表示速度を改善します。
[aside type=”warning”]今回のデスクトップとモバイル、それぞれの横幅のサイズの根拠はシェア率の高い端末(モニター)です。今後、主流となるモニターに変化があれば、その度に調整が必要です[/aside]
【対策2】画像ファイルのサイズは『Tiny PNG』を使って徹底的に軽量化
画像の横幅のサイズを統一出来たら、次はファイルのサイズを軽量化をします。
画質を落とさずに画像を軽量化できるウェブツール『Tiny PNG』をご紹介します。
WordPressに画像をアップロードする前に画像の軽量化すれば、表示速度を上げることができます。
WordPressユーザーには必須ツールです。詳しい使い方はうららかさんのブログがとてもわかりやすいです
[voice icon=”https://itochannel.com/wp-content/uploads/2017/08/IMG_4726.jpg” name=”イトカズ” type=”l icon_blue”]更に効率よく画像の圧縮を行いたい人はオフラインで画像を圧縮するツールがあります。
記事に載せる画像が多い方はオススメです。[/voice] [kanren postid=”2391″]
【対策3】EWWW Image Optimizerで画像を最適化
対策２では『Tiny PNG』を使ってアップロード前の画像を圧縮する方法でした。
アップロード後の画像はプラグイン『EWWW Image Optimizer』を利用して圧縮します。
先ほど紹介した『Tiny PNG』だけでも十分圧縮できてますが、この『EWWW Image Optimizer』でより画像のサイズを小さくすることができます。
[voice icon=”https://itochannel.com/wp-content/uploads/2017/08/IMG_4726.gif” name=”イトカズ” type=”l icon_blue”]【対策1】〜【対策3】では画像サイズについての対策を紹介してます。
この3つの対策を行うだけでかなりWordPressを高速化することができます。[/voice]
【対策4】プラグインを整理してサイトの無駄を省く
WordPressではプラグインを使って機能を追加します。
プラグインはサイトの用途によって必要な機能を追加してくれる便利なツールです。
[keikou]しかしプラグインを多く使いすぎると、サイトに負荷がかかってしまう場合があります。[/keikou]
レンタルサーバー、使用しているテーマによって、相性の悪いプラグインがあったり、プラグイン同士でも一部機能が重なってサイトの表示速度を遅くする原因となります。
[voice icon=”https://itochannel.com/wp-content/uploads/2017/08/IMG_4726.gif” name=”イトカズ” type=”l icon_blue”]WordPress初心者の時期はプラグインを入れるのが楽しくてアレコレ追加してしまいますね
あなた利用しているプラグインの機能は根拠を持って使っていますか？[/voice]
ちなみにイトチャンネルで使用しているプラグインは15個です(2017年7月15日時点)
自分のプラグインを把握して余計な機能をなくしましょう。
| プラグイン | 機能 |
| AddQuicktag | タグのショートカット入力する機能 |
| Akismet | スパムコメントをブロック |
| All In One SEO Pack | SEO対策のためのプラグイン |
| BackWPup | バックアップツール |
| Broken Link Checker | リンク切れをお知らせ |
| Celtispack | 外部リンクをカード表示する機能のみ利用 |
| Contact Form 7 | お問い合わせフォーム作成 |
| EWWW Image Optimizer | 画像最適化(詳しくは対策3へ) |
| Google XML Sitemaps | 検索エンジン向けサイトマップ生成 |
| PS Auto Sitemap | ブログ内にサイトマップ作成 |
| SNS Count Cache | SNSのシェア数カウント |
| Table of Contents Plus | 目次作成 |
| TinyMCE Advanced | ビジュアルエディタ機能拡張 |
| WordPress Popular Posts | 人気記事表示 |
| WP Fastest Cache | キャッシュを有効化(詳しくは対策1へ) |
【対策5】WP Fastest Cacheでキャッシュを有効にする
[keikou]WordPressを高速化する上で欠かせないのがキャッシュ系のプラグインです。[/keikou]今回、この記事を書く為に複数のプラグインを使ってみました。
[aside type=”boader”]- Autoptimize
- W3 Total cache
- WP Super Cache[/aside]
を比較して使ってみましたが、一番WordPress高速化に効果があったのはWP Fastest Cacheでした。
詳しい設定方法はfujimotoyousuke.comさんのブログを参照させていただきました[/voice]
[aside type=”warning”]キャッシュ系プラグインは使用しているサーバーや他のプラグインとの相性によって不具合を起こす場合があります。
使用するには注意が必要です。事前の下調べは絶対に行って、バックアップをとった上で設定を試みてください。[/aside]
※イトチャンネルは『エックスサーバー＋ストーク(テーマ)＋上記のプラグイン15個』の環境で運用しています
【対策6】スライダー表示のような動きのあるコンテンツを置かない
ワードプレスのテーマやプラグインの機能で、[keikou]トップ画面やサイドバーにおすすめ記事や画像を横に流れるように表示させることができます。[/keikou]
このスライド機能によってあなたのブログを印象的なページにすることができます。
スライド表示を設定できるプラグインは多数あります。
[aside type=”boader”]スライド表示のできるプラグイン・Smart Slider 3
・Meta Slider
・Easing Slider
・Meteor Slides
・ストーク (テーマ)[/aside]
パッと見、動きのあるページはは印象的で訪問者の記憶に残りますが[keikou]WordPressの高速化にこだわるのであれば[/keikou]、動きのあるコンテンツを設置しない方が良いです。
なぜならば、動くコンテンツの設置はページの表示速度を遅くする原因の一つになるからです。
[voice icon=”https://itochannel.com/wp-content/uploads/2017/08/IMG_4726.gif” name=”イトカズ” type=”l icon_blue”]とは言っても、トップページはあなたのブログへ来た方が何度も通る重要なページです。速度をとるか、印象的なページこだわるかはあなた価値観次第です。[/voice]
[keikou]『印象に残るページでファンを作ること』と『高速表示にして読者のストレスを減らすこと』はどちらも大切です。[/keikou]
あなたの優先順位で設置の有無は決めれます。
メリットとデメリットを理解した上で判断されることをおすすめします。
【対策7】エックスサーバーで運用する
みなさんのレンタルサーバーはなにを使用していますか？
レンタルサーバーにもいろいろありますが、イトカズはエックスサーバー をオススメします。
エックスサーバーをオススメする理由は[keikou]高速化を追求しているレンタルサーバーである[/keikou]からです。
[aside type=”boader”]具体的には
・[keikou]SSDが使われている[/keikou]→従来のHDDより読込速度が48倍、書込速度が24倍
・[keikou]実行速度の早いPHP７を採用[/keikou]→PHP５よりも２倍以上の速さ[/aside]
[voice icon=”https://itochannel.com/wp-content/uploads/2017/08/IMG_4726.gif” name=”イトカズ” type=”l icon_blue”]これまでイトカズはロリポップ、さくらレンタルサーバーを利用してきました。
私は3つを使い比べた結果、エックスサーバーをオススメします！
もし現在使用されているレンタルサーバーの契約期間のタイミングなら、サーバーの移転を検討してみてはいかがですか？
サーバー移行の手順の記事も書いてますので参考にされてください！[/voice] [kanren postid=”443″]
まとめ：訪問者にとって快適なページを一番意識しましょう
ここまで[keikou]WordPressの高速化のための対策案[/keikou]をお伝えしてきました
あなたのブログの表示速度をあげることで、あなたの記事へ辿りついてきてくれた方の離脱を防ぐことができます。
しかしWordPressの高速化は[keikou]読者が満足してもらう要因の一つ[/keikou]にすぎません。
一番大切なことはあなたのコンテンツの価値を読者が受け取って、それをきっかけに行動してもらうことです。
例えば、表示速度に気に取られて画像の枚数が減って、あなたの記事の説得力が減ってしまうことは本末転倒です。
[voice icon=”https://itochannel.com/wp-content/uploads/2017/08/IMG_4726.gif” name=”イトカズ” type=”l icon_blue”]読者へ提供できる価値＞表示速度です。そこは決して忘れないようにしましょう[/voice]
コメント
[…] 【2017年版】WordPress高速化しなければいけない理由と具体的な対策7選 […]