ブログで成果をあげようと思う多くの人が
- ブログ記事の質
- 魅力的なタイトル作成
- 目を引くアイキャッチ
- 成果が出やすい案件
- ライバルとの差別化
などの「攻め」ばかりにとらわれがちで、大切な読者さんのことを置いてけぼりにしているブログをよく見かけます。
間違いなく上記のような「攻め」と「戦略」は必要です。
しかし同時に「守り」をバランス良く整えていないと、思ったように成果が出てきません。
「守り」の中で最も大切なものは何か？
それが「表示速度」です。
そこで当記事では「運営しているWordPressブログの表示速度が遅い！」という問題解決方法をご紹介しています。
- ブログの表示が遅いのを解決したい
- ページ表示速度を改善する方法を知りたい
と、いざ表示速度アップの対策をしようとしても、どこから手をつけていいか分からないし、専門知識やスキルが無いからできないと諦めていませんか？
僕自身が取り組んでみましたが、プラグインを導入するなど専門知識やスキルが無くても簡単な施策だけでも大幅に改善できました。
あなたのブログで取り入れていないものがあるはずですので、ぜひ施策を行って読者さんに快適さを提供しましょう。
実際にGoogleが調査した結果では「モバイルサイトの読み込みに3秒以上かかると訪問者の53％が離脱する」とデータを公開してくれています。
つまり、表示速度が遅いと
- アクセスがあるけど実は記事を読まれていない
- 売上が上がらない
という悲惨な結果を招いてしまいます。
できることをできる範囲できちんと対策を行っておきましょう。
まずは「Google PageSpeed Insights」で表示速度をチェックしてみよう
ブログの表示速度を計測するには、無料で利用できる「Google PageSpeed Insights」を活用すれば、簡単にチェックできます。
現状把握にお役立てください。
Google PageSpeed Insightsで調べると「スコア」「改善できる項目」などが細かく表示されます。
スコアは、モバイルとパソコンでの表示速度の指標が出てきます。
90以上のスコアを出せるように「改善できる項目」を見ながら一つずつ改善していきます。最低でも80以上は目指したいところ。
僕自身は複数ブログを運営しており、ストーク、JIN、アフィンガー5のテンプレートを導入していますが、どのテンプレートでも大幅にスコアが改善されました。
もちろんブログの表示速度も格段に上がりました。
行った施策は下記10個です。
- WordPressのバージョン更新
- テンプレート(テーマ)の更新
- 不要なプラグインの削除
- プラグインを更新する
- 「最初のサーバー応答時間を速くしてください」を改善
- 「キーリクエストのプリロード」を改善
- 「レンダリングを妨げるリソースの除外」に取り組む
- 「使用していないJavascriptの削除」に取り組む
- 「次世代フォーマットでの画像の配信」に変換
- 「テキスト圧縮の有効化」をする
最低限やったこと、Google PageSpeed Insightsの「改善できる項目」に沿ってやったことを細かく解説します。
ぜひ一つずつ取り組んでみてください。
1：WordPressのバージョン更新する
作業時間目安は10秒です。
WordPressのバージョンが古いままになっていませんか？
バージョンが古いままだと表示速度が遅くなってしまうので、すぐにバージョンを更新しましょう。
バージョンの更新は「WordPressの新しいバージョンがあります。」となっていたら更新できます。
更新方法は、WordPress管理画面の左メニュー「更新」>>>「今すぐ更新」をクリックすると最新バージョンに更新できます。
2：テンプレート(テーマ)を更新する
作業時間目安は10秒です。
WordPressのバージョン更新同様に、使っているテンプレート(テーマ)が古いままになっていませんか？
テーマの更新は、テーマ更新項目でチェックボックスが表示されていたら更新できます。
更新方法は、WordPress管理画面の左メニュー「更新」>>>「テーマ更新項目にあるチェックを入れる」>>>「テーマを更新」をクリックすると最新バージョンに更新できます。
3：不要なプラグインを削除する
作業時間目安は1分です。
プラグインを入れすぎていると、表示速度が落ちます。
そのため、本当に必要なのかプラグインの取捨選択をして、不要なプラグインを削除しましょう。
僕自身が使っているプラグインは「WordPressブログのおすすめプラグイン8選」でまとめているので、ご参考にしてください。
4：プラグインを更新する
作業時間目安は10秒です。
不要なプラグインを削除したら、更新されていないプラグインを更新しましょう。
プラグインの更新は、プラグイン更新項目でチェックボックスが表示されていたら更新できます。
更新方法は、WordPress管理画面の左メニュー「更新」>>>「プラグイン更新項目にあるチェックを入れる」>>>「テーマを更新」をクリックすると最新バージョンに更新できます。
5：「最初のサーバー応答時間を速くしてください」⇒サーバー環境を見直す
作業時間目安は5分です。
- サーバー設定を変更する(エックスサーバーの場合)
- サーバーを移行する
サーバーの環境を見直すことで改善できます。
①：サーバー設定を変更する(エックスサーバーの場合)
エックスサーバーの場合は、下記項目を設定します。
- 「PHP Ver.切替」で最新バージョンにする
- 「Xアクセラレータ」でXアクセラレータ Ver.2を選択する
- 「サーバーキャッシュ設定」でサーバーキャッシュをONにする
- 「ブラウザキャッシュ設定」でブラウザキャッシュ設定をONにする
エックスサーバー以外のPHP Ver.の切替はサーバーの管理画面（コントロールパネル）から変更できます。
②：サーバーを移行する
僕はエックスサーバーを利用していて上記対策を行いましたが、それほど解決しませんでした。
そのため、速度が早いと評判の高い「ConoHa WING」に移行しました。
移行したらスコアがかなり改善されたので、サーバー移行おすすめです。
移行方法は「エックスサーバーからConoHa WINGにWordPressかんたん移行する方法」で図解入りで分かりやすく解説しています。
ちなみに、意外と簡単にできました！
http://shotayamagiwa.com/xserver-to-conohawing
6：「キーリクエストのプリロード」⇒コードを入力する
作業時間目安は5分です。
キーリクエストのプリロードの改善は、<head>内に「キーリクエストのプリロード」のURLが記載されたコードを貼り付ければ解決できます。
詳しくは「キーリクエストのプリロードを改善・解決する方法」で図解入りで解説しています。
7：「レンダリングを妨げるリソースの除外」⇒2つのプラグインを導入&設定する
作業時間目安5〜10分です。
レンダリングを妨げるリソースの除外の改善は、以下2つのプラグインを導入&設定で解決できます。
- Autoptimize
- Async JavaScript
とても簡単にでき、合わせて5〜10分くらいあれば完了します。
詳しい設定方法は「レンダリングを妨げるリソースの除外を解決・改善する方法」で図解入りで解説しています。
8：「使用していないJavascriptの削除」⇒2つのプラグインを導入&設定と不要なものを削除する
上記の「レンダリングを妨げるリソースの除外」で行った2つのプラグインの導入&設定をしたら大きく改善されました。
さらに
- Googleアドセンスの一部コードを削除
- YouTube動画の埋め込み削除
- Twitterの埋め込み削除
を行った結果、大きく改善されました。
9：「次世代フォーマットでの画像の配信」⇒プラグインを導入&設定する
作業時間目安5〜30分です。
次世代フォーマットでの画像の配信は、画像の表示速度を早くするための施策です。
jpgやpngでアップロードしていた画像ファイルを「WebP」に一括変換したら改善できます。
手順は大きく分けて3ステップです。
- プラグイン「EWWW Image Optimizer」を設定する
- 「.htaccess」を編集する
- 「画像の最適化」でWebPに一括変換する
こちらもとても簡単にできますが、作業完了時間は各ブログによって異なります。
当ブログは3,000以上の画像を変換しなければならず、30分くらいかかりました。
時間がかかるとはいえ、変換ボタンを押したら待っているだけなので、作業的には楽チンです。
詳しい設定方法は「JPG・PNGを簡単にWebP変換して次世代フォーマットでの画像の配信を改善・解決する方法」で図解入りで解説しています。
10：「テキスト圧縮の有効化」をする
作業目安は5〜10分です。
- 「.htaccess」を編集する
- RinkerのYahoo!ショッピング設定をLinkSwitchからアフィリエイトIDに変更する
①：「.htaccess」を編集する
.htaccessの最下部に以下のコードを追記します。
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-woff
AddOutputFilterByType DEFLATE application/x-font-opentype
</IfModule>
②：RinkerのYahoo!ショッピング設定をLinkSwitchからアフィリエイトIDに変更する
Rinkerを利用していて、Yahoo!ショッピングの設定に「LinkSwitch」を設置している場合は、アフィリエイトIDにsidとpidを入力して変更します。
sidとpidは以下の手順で取得します。
バリューコマースにログイン >>> Yahoo!ショッピングを選択 >>> MyLinkコードを取得
に進みます。
コード内にsidとpidの数字が記載されているので、Rinker設定の各項目に貼り付けて保存すればOKです。
まとめ
新たに表示速度改善で結果が出たものは、随時更新していきます。
表示速度を改善したら、僕自身が運営する全てのブログでアクセスアップに繋がったので、ぜひやっておきましょう。
読者さんにとってもストレスなく記事を読んでもらえますよ！
コメント