WORDPRESS

【2021年】WordPress高速化におすすめな方法「7選」を初心者向けに1から解説【ブログを最適化してサイトスピード向上】

WordPress高速化におすすめな方法7選
 

あずきです🐥

WordPressでブログをやるなら必ず押さえておきたい「超重要」な施策の1つ…

WordPressの高速化

におすすめな方法を、ブログ初心者さん向けに1から解説していきます

 

まず!

「表示スピードが遅いブログ」というのは訪問者にとって想像以上にストレスとなり、それが原因で「ページ離脱」や「SEO面のマイナス」にもなりかねません

”たった数秒” のロスが、離脱率に大きな影響をもたらす
 

そんな「WordPressの高速化」について、専業ブロガー4年目の経験から実践しているおすすめな方法は、結論「7つ」です

  1. WordPressを構成している各種コードを「最適化」する
  2. サーバーから送信されるテキストファイルを「GZIP圧縮」する
  3. 画像のサイズを「リサイズ」する
  4. 画像ファイルを「圧縮」する
  5. 画像ファイルを「遅延読み込み」させる
  6. 「キャッシュ」を生成、管理する ※ページキャッシュとブラウザキャッシュの2種類!
  7. 「Webフォント」を削除して、通常フォントを使う

また!

この記事の最後では【おまけ】として、今回の「WordPress高速化」以前に「根本的なメンテナンス作業」としても重要な…

PHPのアップデート

についても、あわせてご紹介していきます

 

さっそく見ていきましょー🐥

 

注意

今回ご紹介する各種内容をほかのプラグインやテーマ側の機能などですでに有効化している場合、機能の重複はWordPressの不具合につながる可能性がありますのでご注意ください

 

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

ACTION AFFINGER6

今ならプラグイン「すごいもくじLITE」の無料配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

Contents

【2021年】WordPress高速化におすすめな方法「7選」を初心者向けに1から解説【ブログを最適化してサイトスピード向上】

WordPress高速化におすすめな方法1:WordPressを構成している各種コードを「最適化」する【プラグイン「Autoptimize」を使用】

WordPress ヘッダー c-01

 

WordPressの高速化におすすめな方法、その1つ目は…

各種コードの最適化

です

 

WordPressを水面下で構成している…

  • HTML
  • CSS
  • JavaScript

といった各種ソースコードを「最適化」してサイズを軽減させることで、表示スピードの高速化が期待できます

 

ちなみに!

ここで言う「最適化」とは、例えば…

  • コード内のスペースや改行などを詰めて「縮小」させたり
  • コードが記載された複数のファイルを「連結」させたり

といった処理のこと

つまり、「プログラムを読み取るコンピューター側」にとっての ”ムダ” を省いてあげること!
 

そんな「各種コードの最適化」におすすめなのが…

Autoptimize

というプラグインです

 

最初に初期設定を済ませるだけで、あとは文字通り「Auto=自動」で「Optimize=最適化」の処理を行ってくれます(もちろん無料です)

WordPressの最適化には欠かせない有名プラグインだよ!

WordPress高速化におすすめな方法2:サーバーから送信されるテキストファイルを「GZIP圧縮」する【プラグイン「Enable Gzip Compression」を使用】

WordPress ヘッダー c-02

 

WordPressの高速化におすすめな方法、その2つ目は…

GZIP圧縮

です

 

まず!

「GZIP圧縮」とは、WEBページを表示する際に「サーバー」側から「読者」側へ送られる…

  • HTML
  • CSS
  • JavaScript

といった各種テキストファイルの「圧縮形式」の1つ

 

一般的な圧縮形式である「ZIP」と比べても、テキストファイルに強力な圧縮をかけることができ、その圧縮率は「70~80%」前後とも言われています

つまり、読み込みの負荷をぐんと軽減させられるよ!
 

そんなWordPressの高速化には欠かせない「GZIP圧縮」ですが…

Enable Gzip Compression

という「GZIP圧縮」専用のプラグインを使えば、一瞬で有効化できます(こちらも無料のプラグインです)

WordPress高速化におすすめな方法3:画像のサイズを「リサイズ」する【手動リサイズなら「ペイント」、自動リサイズならプラグイン「Imsanity」を使用】

WordPress ヘッダー c-03

 

WordPressの高速化におすすめな方法、その3つ目は…

画像のリサイズ

です

 

まず!

カメラで撮影した写真にしても、画像サイトから取得した画像にしても…

 

画像ファイルというのは、想像以上に容量がかさばるもの

 

なんですね

例えばスマホで撮った写真をそのままブログに載せると、激重になってしまう
 

言い換えれば…

画像ファイルを軽量化させる

だけでも、WordPressの高速化という面で「極めて大きなプラス」になるということ

 

で!

そんな「画像を軽くする」ための方法はいくつかありますが、基本中の基本となるのが…

リサイズ

という処理です

 

つまり、WordPressにアップする画像の…

  • 横幅
  • 高さ

の値(px)をリサイズ=縮小させることで、大幅な容量ダウンにつながります

pxは、ピクセルと読むよ!
 

この「画像リサイズ」を行う方法としては、大きく…

  1. 「ペイント」などの画像編集ソフトを使い、「自分でリサイズ」してからWordPressにアップする!
  2. 専用のプラグインを導入し、WordPressにアップした画像を「自動でリサイズ」させる!

という【2パターン】です

「ペイント」は、Windows10に標準で入ってる有名な画像編集ソフト!
 

まず…

「自分でリサイズできる」とか「ブログにアップする前に編集を加えたりもする」という場合は、前者の「自分でリサイズ」が断然おすすめ(自分もこちらの方法です)

プラグインはなるべく使わない方が、表示スピードの面でもおすすめだよ!
 
 

一方で!

「自分で毎回リサイズするのは面倒…」という人は、後者の「プラグインで自動リサイズ」という方法になります

 

ズバリ…

Imsanity

という「自動リサイズ」専用のプラグインが定番です(もちろん無料です)

補足

このあとご紹介するプラグイン「EWWW Image Optimizer」にも自動リサイズの機能は付属されていますが、「自動リサイズ」に限って言えば「Imsanity」の方がより詳細な設定が可能です

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

ACTION AFFINGER6

今ならプラグイン「すごいもくじLITE」の無料配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

 

WordPress高速化におすすめな方法4:画像ファイルを「圧縮」する【プラグイン「EWWW Image Optimizer」を使用】

WordPress ヘッダー c-04

 

WordPressの高速化におすすめな方法、その4つ目は…

画像ファイルの圧縮

です

 

さきほどの「リサイズ」とよく混同されがちですが、この「圧縮」というのはあくまで…

画像の大きさ(px)はそのまま

で、容量=ファイルサイズを「縮小」させる処理を指します

WordPressにアップする画像は、「リサイズ」と「圧縮」の併用が基本だよ!
 

で、そんな「画像の圧縮」におすすめなのが…

EWWW Image Optimizer

という、「画像の最適化」に特化した超有名プラグイン

 

WordPressにアップロードした画像ファイルを「自動で圧縮」してくれるプラグインで、設定もいたって簡単です

WordPress高速化におすすめな方法5:画像ファイルを「遅延読み込み」させる【同じく「EWWW Image Optimizer」を使用】

WordPress ヘッダー c-05

 

WordPressの高速化におすすめな方法、その5つ目は…

画像の遅延読み込み

です

 

まず!

「遅延読み込み」とかいきなり聞くと、一見「凄くマイナスな機能」にも思えるかもしれませんが、むしろこの…

遅延読み込み = Lazy Load

によって、「WordPressの高速化」が期待できます

特に、画像をたくさん貼ってるようなブログには超必須!
 

この「遅延読み込み」とは、簡単にまとめると…

  • 本来Webページというのは、「読者がアクセスしたタイミングで、すべての画像を読み込む」仕様になっている
  • 一方で「遅延読み込み」の場合、読者がアクセスした時点で読み込むのは「ファーストビューで映る画像」だけ
  • そこから下の画像については、「画像の付近まで画面がスクロールされてから、段階的に読み込む」ようにする

というもの

そうすることで、「アクセス時点での読みこみ負荷」をぐんと減らして高速化できるよ!
 

で!

肝心の「遅延読み込み=Lazy Load」を有効化する方法についてですが、さきほど挙げた「画像の最適化」専用プラグイン…

EWWW Image Optimizer

のなかに、付属の機能として備わっています

WordPress高速化におすすめな方法6:「キャッシュ」を生成、管理する【ページキャッシュとブラウザキャッシュ】

WordPress ヘッダー a-01

 

WordPressの高速化におすすめな方法、その6つ目は…

キャッシュの生成と管理

です

 

Web上の「キャッシュ」とは、ページの読み込み情報を…

自動的に整理して「一時保存」しておく

ことで、「次回のページ表示にかかる工程」を簡略化させるための仕組みを指します

キャッシュを活用することで、1度読みこんだことのあるページについては表示速度がぐんと上がるよ!
 

ただし!

そんな便利な「キャッシュ」も、使い方を間違えてしまうと…

  • 古いページ情報を読みこんでしまったり
  • かえってWordPressが重たくなってしまったり

といったデメリットが生じかねないので、最低限のポイントは最初に押さえておくのがおすすめです

 

まず…

ひとえに「キャッシュ」と言っても、いくつかの種類があります

ごっちゃに把握しないように気をつけよう!
 

WordPressにおける「キャッシュ」は、大きく次の【3パターン】です

  1. ページキャッシュ ※運営者が契約している「サーバー」側に保存されるキャッシュのこと!
  2. ブラウザキャッシュ ※訪問者それぞれの「ブラウザ」側に保存されるキャッシュのこと!
  3. その他、いくつかの専門的なキャッシュ ※あまり触れられることのない領域なので、基本的にはスルーでOK!(データベースキャッシュ、オブジェクトキャッシュなど)

ということで…

3つ目の専門領域は置いておいて、1つ目の「ページキャッシュ」と2つ目の「ブラウザキャッシュ」について、順に見ていきましょう🐣

 

「ページキャッシュ」の生成と管理

 

「ページキャッシュ」とは、ブログ運営者自身が契約している…

サーバー側

に保存されるキャッシュのことで、そのまま「サーバーキャッシュ」とも呼ばれたりします

ブラウザキャッシュと区別する意味で、「WordPressキャッシュ」と言われたりもするよ!
 

で、この「ページキャッシュ」を生成するには通常…

キャッシュ管理系のプラグイン

を導入するのが一般的です

 

ただ!

この「ページキャッシュ」というのは、便利な反面…

使用中のWordPress環境によっては、不具合などが起きやすい

という繊細な面もあるんですね

例えば、使ってるテーマとの相性の問題だったりで
 

実際このブログでは、代表的なキャッシュ管理プラグインである…

WP Fastest Cache

を導入してページキャッシュを生成&管理していましたが、「スマホヘッダーメニューの表示が不安定になる」という不具合が生じたので、現在は使用していません

プラグインを無効化&削除したら、元に戻ったよ
 

補足

代替策で「Cache Enabler」というキャッシュプラグインも試してみましたが、「WP Fastest Cache」と同様のエラーが見られたので使用を止めました

 

で!

結論としては「キャッシュ系プラグイン」を使わない代わりに、「コード最適化」用のプラグイン…

Autoptimize

にてページキャッシュを生成&管理する方法に切り替えたところ、不具合なく使えるようになりました

※正常に機能するかどうかはお使いのWordPress環境などによって異なるので、一概にどのプラグインが正解とは言えません

 

「Autoptimize」は、プラグインを有効化するだけで…

  • 「ページキャッシュの自動生成」機能がONになる
  • 「古いキャッシュファイルの削除」も、WordPress管理画面から1クリックで可能

です

コードの最適化もできて、一挙両得!

「ブラウザキャッシュ」の生成

 

「ブラウザキャッシュ」とは、文字通り…

ブラウザ側

に保存されるキャッシュのこと

つまり、「ブログを訪れたユーザーごとのブラウザ」に一時保存される仕組みだよ!
 

まず!

さきほど挙げた「ページキャッシュ」の場合、蓄積した古いキャッシュファイルを削除するのは…

ブログ「運営者」側の操作

です

 

一方で「ブラウザキャッシュ」の場合、そのキャッシュファイルを削除するのは…

ブログ「訪問者」側の操作

というのが大きな違いです

 

ただし!

そもそも「ブラウザキャッシュ」を使ってスムーズに閲覧してもらうためには、自分のブログの「ブラウザキャッシュ生成機能」を有効化している必要があるんですね

 

この「ブラウザキャッシュ生成」を有効にするには、「ページキャッシュ」と同様に…

プラグインを使う

のが1つの手です

 

補足

キャッシュ系プラグインには「ページキャッシュ用」もあれば「ブラウザキャッシュ用」もあり、なかには「ページキャッシュとブラウザキャッシュ兼用」のプラグインもあります

 

一例として、有名な「WP Fastest Cache」はページキャッシュプラグインですが、そのなかに「ブラウザキャッシュ」という項目も付属されています

 

ただ!

自分のように「キャッシュ系プラグインを入れると不具合が生じてしまう」という場合は…

「レンタルサーバー」側のブラウザキャッシュ機能

を使ってみるという方法もあります

 

参考までに…

このブログでは、エックスサーバー に用意されているブラウザキャッシュ機能を有効にしています

 

エックスサーバーで「ブラウザキャッシュ機能」を有効化する手順

  1. サーバーパネル」にアクセス
  2. 「高速化」という項目内の、「ブラウザキャッシュ設定」をクリック
  3. 該当のドメインを選択
  4. 「変更後の設定」タブで、 ON[全ての静的ファイル] ※推奨設定 という項目を選択
  5. 「変更」ボタンをクリック

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

ACTION AFFINGER6

今ならプラグイン「すごいもくじLITE」の無料配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

 

WordPress高速化におすすめな方法7:「Webフォント」を削除して、通常フォントを使う【Googleフォントは「Autoptimize」で削除】

WordPress ヘッダー a-02

 

WordPressの高速化におすすめな方法、その7つ目は…

Webフォントの削除

です

 

まず!

WordPressでは、使用するテーマによって「Googleフォント」を始めとした…

Webフォント

というのが付属されていて、かつそれが「標準のフォント設定」になっている可能性があります

つまり、文字デザインの種類のこと!
 

そもそも、普段目にするWEBサイトの「フォント=文字タイプ」というのは…

  • 通常フォント(例 「メイリオ」「游明朝」「游ゴシック」など)
  • Webフォント(例 「Noto Sans JP」「M PLUS Rounded 1c」など)

この2タイプに大きくわかれるんですね

 

参考までに、当ブログでも愛用中のテーマ「ACTION AFFINGER6」の場合…

  • 基本 → 通常フォント「メイリオ」
  • 記事タイトル・見出しなど → Webフォント「Noto Sans JP」

というフォントが、それぞれデフォルトで設定されています

 

で!

後者の「Webフォント」というのは、限られた種類の「通常フォント」と違って…

ブログの雰囲気に合わせて、こだわりのフォントを自由にもってこれる

のが魅力なんですが、その一方で「専用のフォントデータを読み込む」という処理が必要になるため…

ページ表示が重たくなってしまう

といったデメリットも抱えているんですね

「日本語」のWebフォントは特に重たいと言われてるよ
 

関連

 

なので結論、「WordPress高速化」という観点で見ると…

 

どうしても使いたいWebフォントがある!

 

ということでもない限り…

  1. WordPressのフォントに「Webフォント」を設定している場合、「通常フォント」に切り替える!
  2. かつ、導入済みの「Webフォント」についてはWordPressから削除しておく!

というステップで「Webフォント」は取り除いておくのが無難です

やり方は次の通り!
 

ステップ1:WordPressの「フォント設定」を変更する方法

「フォント設定」の変更手順については、使用しているWordPressテーマによって異なります

 

一例として、このブログでも使用しているテーマ「ACTION AFFINGER6」のフォント設定については、下記の項目で確認・変更が可能です

WordPress管理画面 > 「AFFINGER 管理」 > 「デザイン」タブ > 「フォントの種類」

 

ステップ2:WordPressに導入済みの「Webフォント」を削除する方法

「導入済みWebフォント」の削除手順については、そのWebフォントによって異なります

 

ただ基本的には、デフォルトで入っている可能性が高い「Googleフォント」シリーズを削除しておけば、ひとまずの「WordPressの高速化」対策としてはOKだと思います

 

Googleフォントの削除は、プラグイン「Autoptimize」を使えば簡単です ↓

「Autoptimize」の設定方法と使い方
【2021年】「Autoptimize」の設定方法と使い方を初心者向けに解説【WordPressプラグイン/コードの最適化でサイトスピードを高速化】

続きを見る

現在のフォントに削除予定のWebフォントを設定している場合、必ず別のフォントに切り替えてから行ってください

万が一の不具合に備えて、各種バックアップを必ず済ませたうえで行ってください

 

ちなみに!

「フォント名を見ても、そもそもGoogleフォントかどうかわからない…」という場合は…

Google Fonts」へアクセス > 「Language」タブを開いて「Japanese」を選択

という手順で、現在提供されている「日本語版Googleフォント」が一通り確認できます

 

WordPress高速化におすすめな方法【おまけ】:PHPは最新バージョンに更新していますか?【レンタルサーバー管理画面からアップデート】

WordPress ヘッダー a-03

 

最後に【おまけ】です

WordPress運営において、わりと見落としがちな盲点である…

PHPのアップデート

について

 

まず!

PHPとは、「動的」なコンテンツを生成するためのプログラミング言語です

 

よく挙げられる例として、通販サイトで商品をカートに入れると…

カート内容が自動で切り替わる

という現象、あれがまさにPHPがもつ「動的」な機能の1つになります

WordPressでは、この「PHP」というシステムが(通販サイトに限らず)至るところで使われてるよ!
 

で!

そんな「PHP」は、WordPress本体やプラグインと一緒で「バージョン更新」を怠っていると…

  • WordPressの動作に支障が出たり
  • セキュリティー面で欠陥が生じたり

といったリスクにつながりかねないので、随時アップデートを行うのが鉄則です

具体的なアップデート手順は、契約してるレンタルサーバーごとで違うよ!
 

今回の記事はこちらの章に属しています

 第9章 ブログの豆知識 編       

全9章のTOPページです

あずきのワードプレスブログ「完全初心者」ガイド

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

ACTION AFFINGER6

 

 ✔ 洗練されたビジュアルと、ターゲットに合わせた「変幻自在」な柔軟性!

 ✔ 時間のかかる面倒なカスタマイズも「クリック1つ」でさくさく実現!

 ✔ 本気で戦うためのSEO対策と、「稼ぐ」に特化したアフィリエイト機能!

 

※新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

今ならプラグイン「すごいもくじLITE」の無料配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで
【2021年】WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで1から解説

続きを見る

 

-WORDPRESS