旅とショッティ|海外旅行・国内旅行、日常の役立ち情報を発信

役立ち情報

【WordPress高速化】知識がなくても表示速度を早くできる方法

WordPressの表示速度が遅いと離脱率や直帰率が上がりますよね?
マイナビニュースによると、ページの読み込み時間が2秒までは直帰率は9%ほどだが、3秒を超えると直帰率が一気に増え、5秒になると38%まで増えるとされています。

さらに2018年からGoogleのいわゆる「スピードアップデート」がおこなわれ、モバイルサイトの表示速度が検索順位に影響するように。

僕のモバイルサイトの表示速度を「PageSpeed Insights」で調べてみると、モバイルスコアは18、パソコンスコアは60と超がつくほどのロースコアでした。
パソコンの知識がほぼゼロの僕がそこからいろいろ調べながら試行錯誤すること数日。
ついにモバイルスコアが87、パソコンスコアが91まで回復することに成功しました

この記事では僕が試した方法をすべて紹介します。
調べてもまったく出てこなかった方法もあります。
その方法が一番きいたと思ってます。参考にしてみてください。
(2019/3/21 エックスサーバー向けの方法を追記しました。)

念のためバックアップを取って試してみてくださいね。

【WordPress高速化】知識がなくても表示速度を早くできる方法

それでは「WordPress高速化(Webページの表示速度を早める)」を知識がなくてもできる方法を詳しく説明していきます。

表示速度を調べることができる「PageSpeed Insights」

表示速度を調べるのにはGoogleが提供している「PageSpeed Insights」というツールを使って調べます。
以下の画像の赤い部分にご自身のウェブページのURLを入れて、分析を押すだけで、スコアが出ます。
スコア90~100が速い、50~89が平均、0~49が遅いです。

【WordPress高速化】知識がなくても表示速度を早くできる方法

何の読み込みスピードが遅いのか「改善できる項目」として提示してくれるので、基本的にはここを改善すればいいわけです。
ただ、実際どうすればいいかわからないんですよね。


僕のブログのページスピードスコア

僕のブログのページスピードを久しぶりに調べたら、パソコンの方は60で平均にはおさまっていますが、モバイルのスコアは18と致命的でした。

ここまで数値が悪いと、検索順位に悪影響を及ぼしかねないので改善しないといけませんよね。

【WordPress高速化】知識がなくても表示速度を早くできる方法2【WordPress高速化】知識がなくても表示速度を早くできる方法3

WordPressを高速化するために試した方法

ここからはWordPressを高速化するために試した方法を紹介します。

エックスサーバーの設定で高速化

エックスサーバーを使用されている方はまずはエックスサーバーでの高速化を試してみましょう。
WordPressに余計なプラグインを入れなくて済むのがありがたいです。

エックスサーバーの「サーバーパネル」にログインすると右のほうに高速化というところがあります。
それでは個別に機能を紹介していきます。

【WordPress高速化】知識がなくても表示速度を早くできる方法10

「アクセラレータ」

設定をオンにするだけで、Webサイトを高速・安定化させるための機能です。
2019年2月下旬から「Xアクセラレータ Ver.2」が提供され、静的ファイルの高速化(キャッシュ)に加え、PHP処理速度が大幅にアップし、WordPress最大で10倍の高速化と大量の同時アクセスへの耐性がより強化されました

「WP Super Cache」や「WP Fastest Cache」などのキャッシュ系プラグインとは同じような機能で不具合が起こる可能性があります。どちらかを無効にした方がいいかもしれません。
※僕の場合は「WP Super Cache」よりも「アクセラレータ」の方が効果ありました。

Xアクセラレータ(エックスアクセラレータ)の詳しい説明や設定方法についてはエックスサーバーのHPを参考にしてください。

「mod_pagespeedの設定」

Googleが開発した拡張モジュール「mod_pagespeed」を使用し、Webサイトの表示速度を向上させる機能。
ファイルを圧縮してデータ転送量を削減する、同種のファイルを一つにまとめて無駄な通信を削減するなどの最適化処理を実施します。
これにより、Webサイトにアクセスしたブラウザはデータ転送量が減少し、ページのロード時間を短縮できます。

2019年3/28以降、新規の受付が終了となりました。
すでに理由中の方は引き続き利用できます。

「サーバーキャッシュ設定」

サーバー上でファイルのキャッシュが作成され、Webサイトの表示速度・同時アクセス数を大幅に向上してくれます。

サーバーキャッシュ設定の詳しい説明や設定方法についてはエックスサーバーのHPを参考にしてください。

「ブラウザキャッシュ設定」

同じファイルへの再アクセス時にはブラウザ側のキャッシュファイルを利用し、表示速度の向上や転送量の軽減を行ってくれます。

ブラウザキャッシュ設定の詳しい説明や設定方法についてはエックスサーバーのHPを参考にしてください。

Autoptimize

「Autoptimized」はHTMLコードやCSS、JavaScriptの縮小をして、ページ表示速度を向上してくれるプラグイン。
設定も簡単なので、僕みたいに機械に弱い方にもおすすめです。

「Autoptimized」のプラグインを追加して「有効化」し、「Setting(設定)」をします。
以下の画像のように「HTMLコードを最適化」、「JavaScriptコードの最適化」、「CSSコードの最適化」にチェックを入れ、「変更を保存してキャッシュを削除」を押します。

【WordPress高速化】知識がなくても表示速度を早くできる方法4

「Autoptimized」はこれだけです。これだけですがけっこう効果あります。

WP Super Cache

「WP Super Cashe」はキャッシュを利用してページの表示速度を高速化できるプラグインです。
毎回負荷のかかる処理を行わずに、以前生成したキャッシュを利用することで、表示速度を高速化します。

「有効化」させたあとに設定をします。
今回は簡易設定のみ行いました。
「キャッシング利用(推奨)」にチェックを入れ、「ステータスを更新」を押します。

【WordPress高速化】知識がなくても表示速度を早くできる方法5

キャッシュ系のプラグインは他にもいろいろあるので、これでないといけないということはありません。

EWWW Image Optimizer

「EWWW Image Optimizer」は有名なのでご存知の方も多いかもしれません。
画像を圧縮・軽量化し、ページを高速化してくれるプラグインです。
画像は容量が大きいので、できるだけ小さくして、なおかつこのプラグインで圧縮しましょう。

「有効化」させたあとに設定をします。
これの設定は「Remove Metadata」にチェックを入れ、設定を保存するだけです。

【WordPress高速化】知識がなくても表示速度を早くできる方法6

その後、設定画面のトップに戻り、一括最適化を押します。

【WordPress高速化】知識がなくても表示速度を早くできる方法7

次に「最適化されてない画像をスキャンする」を押して、画像を最適化すればオッケーです。

【WordPress高速化】知識がなくても表示速度を早くできる方法8

Lazy Load by WP Rocket

「Lazy Load」はあえて画面に見えてない画像の読み込みを遅れさせることで、表示を高速化させるプラグインです。
ページを下にスクロールさせることで、徐々に画像を読み込んでいきます。

「有効化」させたあとに「設定(Setting)」をします。
「Images」、「Iframes&Videos」、「Replace Youtube videos by thumbnail」にチェックを入れて保存(SAVE CHANGES)したら、

【WordPress高速化】知識がなくても表示速度を早くできる方法9

※最初は「a3 Lazy Load」を使用していましたが、トップページの画像が全く表示されなくなったので「Lazy Load by WP Rocket」に変更しました。
僕が使っているテーマの「JIN」もしくは他のプラグインとの相性が悪いのだと思われます。

Optimize Database after Deleting Revisions

WordPressでは「Revisions(リヴィジョン)」という機能があります。
記事を下書きするときに、変更前の記事を保存してくれる機能です。
これが増えると、もちろん容量も増加し、表示速度が遅くなってしまいます。

「Optimize Database after Deleting Revisions」では過去のリヴィジョンの削除や保存するリヴィジョン数の設定をおこなえます。

こちらの設定は複雑ですので、「WordPressのリビジョンとデータベースを最適化 Optimize Database after Deleting Revisions」を参考に設定していただくといいと思います。

文字のフォント・サイズを標準にする

JINでは「外観」→「カスタマイズ」→「サイト基本設定」→「フォント選択」から文字のフォントを選択できます。

少しでもサイトが重くならないよう標準フォントに変更しました。
また、いつも20pxにしていた文字サイズを標準の16pxに戻しました。

画像サイズを小さくする

画像は容量が大きいのでできるだけ小さいほうがいいです。
先ほどご紹介した「EWWW Image Optimizer」で圧縮する前に画像を小さくしておきましょう。
横幅の表示できるサイズもあるので、横幅を500~600pxくらいにするのが個人的におすすめ。

僕はwindowsに最初から入っている「ペイント3D」で編集してますが、「JPEG」で保存できず、「gif」でしか保存できなかったので、容量が大きくなってました。
ペイントではJPEGで保存できなかったのですが、JPEGで保存する方法を発見したのでほぼ全てJPEGに変更しました。

メディアライブラリに入っていて、使ってない画像を削除する

WordPressのメディアライブラリに入っている中で、使ってない画像を削除します。
僕のブログで一番効果あったのはこの方法だと思ってます。

サイズや保存名を変更して一度記事に貼り付けると、結局使用しない場合でも二重でメディアライブラリに残ってしまうんです。
この使用してない画像が溜まりすぎると遅くなってしまうようです。

WordPressのダッシュボードから「メディア」の「ライブラリ」を選択。

【WordPress高速化】知識がなくても表示速度を早くできる方法10

いらない画像は「完全に削除する」を押します。
左側をチェックして、一気に削除することも可能です。
僕の場合はこれで画像を500枚ほど削除しました。

【WordPress高速化】知識がなくても表示速度を早くできる方法11

記事で使用中の画像を削除しないこと。
使用中の画像を削除してしまうと記事からも画像が消えてしまいます。
一度、消してしまうと元に戻りません。

WordPress高速化を試した結果

以上のWordPress高速化を試した結果、モバイルのスコアが87、パソコンのスコアが91に大きく回復しました。
というより、元の数字よりむしろよくなりました。
これでページスピードはばっちりですね。

【WordPress高速化】知識がなくても表示速度を早くできる方法11【WordPress高速化】知識がなくても表示速度を早くできる方法12

おわりに

今回は知識がなくてもWordPressのWebページ表示速度を高速化する方法を紹介しました。
離脱率を上げないためにも、Googleのペナルティを受けないためにも表示速度は非常に大切です。

この記事を参考に表示速度アップ目指してみてください。

リアル体験にもとづいた、とっておきの役立ち情報をご紹介しています!

ショッティがこれまでに体験したとっておきの役立ち情報を公開しています。
ご覧の皆さんのお役に立てること間違いなし。

とっておきの役立ち情報はコチラをクリック