WORDPRESS

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

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

専業ブロガー4年目のあずきです🐥

 

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

WordPressの高速化

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

 

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

たった数秒のロスが、離脱率に大きくつながる
 

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

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

【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圧縮」専用のプラグインを使えば、一瞬で有効化できます(こちらも無料のプラグインです)

 

追記:2021年11月

「Enable Gzip Compression」は、現在プラグインのキーワード検索にかけても出てこない状態であることが確認できています。 この「GZIP圧縮」につきましては、2022年以降で(ほかのプラグインに差し替えるなど)情報を更新予定です。 あしからずご了承ください

 

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

WordPress ヘッダー c-03

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

画像のリサイズ

です

 

まず!

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

 

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

 

なんですね

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

言い換えれば…

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

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

 

で!

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

リサイズ

という処理です

 

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

  • 横幅
  • 高さ

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

pxは「ピクセル」って読むよ!
 

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

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

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

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

まず…

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

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

補足

ブログで使用する画像のサイズ(px)はもちろん任意ですが、ただ一般的には…

横幅 1024px

というのが、上限サイズとして定番です

 

参考までに当ブログでは…

  • アイキャッチ画像を始め、画質を優先させたい画像 → 横幅 1024px
  • それ以外の画像 → 横幅 700px

を基本的な上限に、その都度「リサイズ」してから画像を貼っています(「高さ」については、「横幅」のリサイズ比率にあわせて自動的に縮小される形です)

 

※あくまで「上限サイズ」なので、そもそも上記より小さいサイズの画像を使う場合は、当然これより小さい数値(px)になります

※Facebookで記事がシェアされる際のサムネ画像を「大きいサイズ」で表示させたい場合、「横幅1200px・高さ630px」が推奨されています

 

一方で!

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

 

なかでも…

Imsanity

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

 

補足

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

 

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上の「キャッシュ」とは、ページの読み込み情報を…

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

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

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

ただし!

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

  • 古いページ情報を読みこんでしまったり
  • かえって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. 「変更」ボタンをクリック!
 

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フォント」を一通り確認することができます🐣

 

人気記事

 

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

 第5章 内部設定 編          

次の章はこちらからどうぞ

 第6章 デザイン 編          

全8章のTOPページです

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

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

ACTION AFFINGER6 バナー 01-300px

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

ACTION AFFINGER6

 

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

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

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

すごいもくじLITE

の限定特典キャンペーンも実施中!!!

 

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

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

AFFINGER6って実際どう?良い点&気になる点を専業ブロガーが本気レビュー
【1番の本質】ACTION AFFINGER6って実際どう?良い点&気になる点を専業ブロガーが本気レビュー【WordPressの愛用テーマ】

続きを見る

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

 

独立4年目 / 元アパレル → 歴10年

 

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にいるので覗いてもらえると嬉しいです^^

-WORDPRESS