こんにちは、Naokiです(@naoki_blogger)。
こんなお悩み・疑問を解決できる記事に仕上がっています。
- 専門知識はないけど、サイトを高速化させたい
- おすすめプラグイン〇〇選とか...もうどれがいいのか分からない！
- 手間がかからなくて、素人でもできる施策はないの？
この記事では、サイトの具体的な高速化方法を7つ紹介していきます。記事を読むことで、『画像の圧縮』『サイトの読み込み速度の改善』が理解できます。
僕自身、ブログ運営を始めて2ヶ月くらいは「おすすめプラグイン〇〇選」とか「サイトの高速化」といった記事に迷わされた経験があります。
プラグインを入れすぎた結果、サイトに不具合が起きたり、記事を書く時間がなくなったり...といったことになりました。経験から言えますが、専門知識がない状態でコードをいじったり、プラグインを入れすぎるのは危険です。
サイトを高速化する効果の高い施策をまとめました。
簡単にできるサイトの読み込み速度改善
- AFFINGER6の表示速度優先を活用する
- プロフィールカードに記載されたSNSの埋め込みを外す
- 画像の軽量化をする
上記の３つを行えば、すぐにサイトの高速化ができます。一つずつ、丁寧にやり方を解説します！
ブログ運営を始めたばかりの人に向けて、下記の記事もおすすめします。
サイトの読み込み速度が大切な理由3つ
そもそもなぜ、サイトの読み込み速度改善が大切なんでしょうか？ 主に3つ理由があります。
- ユーザーが繰り返しサイトに訪れやすくなる
- Googleが読み込み速度をランキング要素に取り入れている
- 記事からの離脱率が減る
【読者のため】ユーザーの直帰率の改善
サイトの表示速度は本当に大切です。Googleのデータでもこんな研究結果があります。Googleがディープランニングを用いて予測したデータです。
表示速度が1秒から3秒に落ちると、直帰率は32%上昇
表示速度が1秒から5秒に落ちると、直帰率は90%上昇
表示速度が1秒から6秒に落ちると、直帰率は106%上昇
表示速度が1秒から7秒に落ちると、直帰率は113%上昇
表示速度が1秒から10秒に落ちると、直帰率は123%上昇
引用元：『new industry benchmarks for mobile page speed』
上記のとおり、表示速度はサイトの離脱率に影響します。せっかく良質な記事を書いても、サイトの読み込み速度が遅いと読者を逃してしまうんです。
【検索エンジンのため】googleからも優遇してもらえる
下記はGoogleからの引用になります。
そこで 2018 年 7 月より、ページの読み込み速度をモバイル検索のランキング要素として使用することになりました。これを「Speed Update」と呼びますが、対象となるのは、ユーザーがかなり遅いと感じるようなページのみで、ごくわずかな割合のクエリにしか影響しません。
そのページがどのような技術を使用して制作されたかに関係なく、すべてのページに同じ基準が適用されます。検索クエリのインテントは依然として非常に強力なランキング シグナルです。
そのため、関連性の高い優れたコンテンツを含むページであれば、読み込み速度が遅くても上位に掲載される可能性があります。
引用元：『ページの読み込み速度をモバイル検索のランキング要素に使用します』
影響するのは、かなり読み込み速度の遅いWebサイトだけのようです。しかしながら、やはり検索順位の評価にgoogleが取り入れているのは事実。そのためサイトの高速化は大切です。
【4月19日時点】僕のPageSpeed Insightsスコア
デスクトップのスコア：92点
モバイルのスコア：84点 
ページの表示速度を計測できるサイト
- Googleの「PageSpeed Insights」
- GTmetrixの「GTmetrix」
AFFINGER6でサイトを高速化する施策9つ
上記は、当サイトに現在導入しているプラグインです。全て入れる必要はありませんので、いくつか参考にしてみてください。
おすすめの高速化プラグインは下の4つです
逆に導入しない方がいいプラグインもあります。
サイトの動作が不安定になります
- Scripts-To-Footer
- Autoptimizer
- キャッシュ系プラグイン
Scripts-To-Footerは不具合が起きたため、削除しました。またAutoptimizeは、設定項目が多く、初心者には向かないプラグインです。WebP Expressは、EWWW Image Optimizerで対応できるので不要。またキャッシュ系プラグインはサイトの整備に向かないので削除しています。
ブロガーの言うことをすべて、鵜呑みにしている方もいます。が、環境によっても合わないプラグインもあります。自分で試して、判断しましょう。
ご購入後は、『infotop経由のご購入ユーザー様へ』もあわせてお読みください。
①AFFINGER6の表示速度優先から高速化する
ここでは、AFFINGER6付属の表示速度優先項目を有効にします。手っ取り早くAFFINGERに付属している表示速度優先設定を触っていきます。AFFINGERの設定をいじることで、「表示速度」が最大に優先されます。しかし使えなくなる機能もいくつかあります。
- スライドショー機能（ショートコード含む）
- Googleフォント・マテリアルアイコン
- スクロール追尾広告
- コピー機能（SNSボタン）
- アニメーションクラス
- カウントダウン（EX）
- もっと読む（無限スクロール）（EX）
- レスポンシブ（ショートコード含む記事一覧）画像の画質を上げる（EX）
大体、動作のある機能は使えなくなりますね。スライドショーなどは有効にすると、Google社の計測ツール『Pagespeed Insights』のスコアが下がるのでお勧めはしないです。
表示速度優先のやり方は、AFFINGER管理からSEO→表示速度優先(β)→有効化。
AFFINGER6 EX版やAFFINGER5をお使いの方は、下記の画像と設定画面の表記が若干変わると思います。
②投稿ページをAMPに対応させる
サイトの記事をAMPに対応させると、競合の激しいキーワードで優位になれます。設定方法は、AFFINGER管理→Google・広告/AMP→AMP対応→「全ての投稿ページをAMP対応にする」にチェックを入れます。
そのあとSaveを押して設定を反映。
最後に投稿一覧から、AMPに対応させたい記事を選択。編集画面上の表示オプションから、AMP設定にチェックをいれます。
表示オプションを閉じて、右サイドバーのAMP設定から「AMPに対応する(β)」にチェックを入れましょう。
「AMPに対応する」にチェックを入れると、記事がAMPに対応します。AMPを無効化したいときは、同じく編集画面から「AMPに対応する(β)」のチェックを外します。
③画像圧縮サイトとファイルのjpg化
画像圧縮を事前にすると、サイトの読み込み速度を大幅にupできます。さらにjpeg化した軽量の画像を使うと、もっと軽量のサイトになります。
画像の圧縮方法は以下のとおり。
- Tiny JPGで画像を圧縮
- 画像ファイルの拡張子をpng→jpegにする
pngとjpegの違いは、拡大したときに画像が荒くなるかならないかです。画像を拡大しなければ、画像の見た目は変わりません。
④次世代画像フォーマットWebP Expressの導入
さきほど紹介した『WebP Express』を使って、画像を次世代フォーマットに対応させます。次世代フォーマットを使うと、サイトの読み込み速度が爆速になります。Wordpressの標準設定では、次世代画像フォーマットに対応してないので、プラグインを導入する必要があるんです。
WebP Expressの導入ガイド
- ダウンロード»WebP Express
- 設定方法»WebP Express
⑤SNSの埋め込みを外す
SNSなどの外部リンクはスクリプトを読み込むため、サイトの読み込みに時間がかかってしまいます。そのため当サイトでは、Twitter・Instagramの埋め込みを外しました。やり方は、ダッシュボードからユーザー→プロフィール→連絡先情報→TwitterとInstagram欄のURLを消す。
⑥JavaScriptの読み込みをプラグインで最適化
スクリプトの最適化をすることで、ページを読み込む際のレンダリングブロック時間を削減できます。簡単にレンダリングブロックソースについて説明しますね。
一般的なレンダリングブロックリソースは、ヘッダーにあるJavaScriptやCSSファイルです。ページを最初に表示する際のJavaScriptやCSSの使用は、画面の表示時間を大きく遅らせてしまいます。
Webサイトを表示するとき、ブラウザーはコンテンツを一定の順番でレンダリングします。その大まかな順番を紹介します。
- ブラウザーがHTMLファイルをダウンロードする
- HTMLファイルの読み込みと、CSSファイル、JavaScriptファイル、画像ファイルの確認
- 画像ファイルをダウンロード
- ページを表示するためにCSSファイルとJavaScriptファイルが必要になる
- CSSファイルをダウンロードして読み込む
- JavaScriptファイルをダウンロードして読み込む
- Webページを表示する
少しでもサイトの読み込み速度を改善したい場合は、やっておきましょう。スクリプトの最適化にはプラグイン『Async JavaScript』を使います。
当サイトでは以前まで、Scripts-To-Footerを使っていました。しかしプラグインが削除できない不具合が発生したので、現在は推奨していません。
プラグインも自分のサイトに合うかどうか、確認しましょう。ミスるとサイトにアクセス出来なくなったり、サイトの表示速度が下がる可能性もあります。
⑦導入しているプラグインを極力減らす
導入しているプラグインを見直すと、サイトの表示速度改善に繋がります。実はプラグインを入れすぎても、サイトの低速化に繋がっちゃうんです。多すぎるプラグインの量としては、10個以上ですね。
ぜひプラグインも見直してみてください。
最低限、サイトの高速化に影響するプラグインだけ残しましょう！
当サイトでは現在7コプラグインを入れています。7コの中でもサイトの高速化に繋がるプラグインは以下のとおり。
サイトの高速化につながるプラグイン
現時点では、高速化のプラグインは上記2つだけです。
⑧【初心者でもOK】Xserverのサーバーの設定をいじる
変更する設定は下記の３つ。
- XアクセラレータのVer変更
- ブラウザ・サーバーキャッシュの有効化
- PHPのVer.を最新にする(テーマの動作が不安定になるリスクあり)
プラグインではどうしても対応できない、「サーバーの応答速度」を改善するために行います。
XアクセラレータのVer変更
最初に、Xserverのサーバーパネルにアクセスします。サーバーIDとパスワードを入力し、ログイン。サーバー管理を選択してサーバーを選ぶ。その後、高速化の項目からXアクセラレーターを選択します。
Ver.1になっていた場合、設定を変更します。Ver.2の場合は変更する必要はありません。
「XアクセラレーターVer.2」を選択したあと、確認画面へ進みます。
変更後の設定がVer.2で終わっていれば、「変更する」を押しましょう。
上記のように赤文字で変更内容が書かれていれば、設定完了。
Xアクセラレーターを説明すると長くなりますが、Ver.を変更すると下記のとおりになるようです。
ブラウザ・サーバーキャッシュの有効化
サーバーキャッシュも同様に有効化できます。キャッシュの削除も同時にやっていきますね。
まずは、サーバーキャッシュを有効化します。高速化から「サーバーキャッシュ設定」を選択。
キャッシュの削除(Xserverのみ)
ブラウザキャッシュの設定もしていきます。高速化の項目から「ブラウザキャッシュ設定」を選択しましょう。
反映待ちと表示されたら、設定は完了。反映には15分ほどかかります。
15分経つと、反映待ちの表記が消えます。
⑨PHPのVer.を最新にする
PHPのバージョンもサイトの読み込み速度に影響します。最新バージョンに変更しておくと、安全性も向上しますので、ぜひ設定を触っていきましょう。
PHP項目から「PHP Ver.切り替え」を押します。
Xserver側の設定はこれで終わりです。上記の設定3つを終えると、サイトの読み込み速度も改善されると思います。
【高速化まとめ】AFFINGER6の高速化には、効果の大きいものから実践しよう！
変化が大きいものから実践すると、効果もすぐに出るのでオススメ。SNSの埋め込みや表示速度優先も大切な要素ですが、一番効果が高いのは画像類です。決まった順序はないので、あなたが「これなら簡単そう！」と思った手順からやってみて下さい。今回はWordpressのサイトの高速化施策を解説しました。
サイトの読み込み速度は、離脱率にも影響してくるので高速にしておいて損はないです。
メモ
これで全設定は終わりです。本当にお疲れさまでした！！
AFFINGER購入後の流れは、『infotop経由のご購入ユーザー様へ』の記事をご覧ください。
。 こんなお悩み・疑問を解決できる記事に仕上がっています。 読者 専門知識はないけど、サイトを高速化させたい おすすめプラグイン){kind=link}