WORDPRESS

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

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

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

 

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

WordPressの高速化

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

 

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

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

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

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

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

WordPress高速化におすすめな方法1:WordPressを構成している各種コードを「最適化」する

WordPress ヘッダー c-01

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

各種コードの最適化

です

 

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

  • HTML
  • CSS
  • JavaScript

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

 

ちなみに!

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

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

といった処理のこと

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

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

Autoptimize

というプラグインです

 

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

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

WordPress高速化におすすめな方法2:画像のサイズを「リサイズ」する

WordPress ヘッダー c-03

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

画像のリサイズ

です

 

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

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

なんですね

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

言い換えれば…

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

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

 

で!

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

リサイズ

という処理です

 

具体的には、WordPressにアップロードする画像の…

  • 横幅
  • 高さ

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

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

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

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

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

「ペイント」は、Windowsに標準で入ってる無料の画像編集ソフト!
 

まず…

「自分でリサイズできる!」とか「いろいろ編集・加工してからブログに貼りたい!」という場合は、前者の「手動でリサイズ」が断然おすすめ(当ブログもこちらの方法です)

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

補足

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

横幅 1024px

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

 

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

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

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

 

※あくまで「上限サイズ」なので、そもそも上記より小さいサイズの画像をアップする場合は関係ありません

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

 

一方で!

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

 

なかでも…

Imsanity

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

 

補足

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

 

WordPress高速化におすすめな方法3:画像ファイルを「圧縮」する

WordPress ヘッダー c-04

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

画像ファイルの圧縮

です

 

2つ目の「リサイズ」と混同されがちですが、この「圧縮」というのはあくまで…

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

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

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

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

EWWW Image Optimizer

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

 

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

 

WordPress高速化におすすめな方法4:画像ファイルを「遅延読み込み」させる

WordPress ヘッダー c-05

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

画像の遅延読み込み

です

 

まず「遅延読み込み」とか聞くと、一見「凄くマイナスな機能」にも思えるかもですが、むしろこの…

遅延読み込み = Lazy Load

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

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

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

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

というもの

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

で!

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

EWWW Image Optimizer

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

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

WordPress ヘッダー a-01

 

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

キャッシュの生成と管理

です

 

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

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

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

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

ただし!

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

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

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

 

まず…

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

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

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

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

ということで…

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

 

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

 

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

サーバー側

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

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

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

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

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

 

ただ!

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

使用中の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高速化におすすめな方法6:「Webフォント」を削除して、通常フォントを使う

WordPress ヘッダー a-02

 

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

Webフォントの削除

です

 

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

Webフォント

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

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

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

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

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

 

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

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

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

「Noto Sans JP」は、Googleフォントの一種!
 

で!

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

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

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

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

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

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

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

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

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

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

というステップで、「Googleフォント」を始めとしたWebフォントは取り除いておくのが無難です

補足

「自分のWordPressがGoogleフォントを使用しているかどうか?」の確認方法は、お使いのWordPressテーマなどによって変わってきます

 

参考までに、当ブログでも愛用中のテーマ「ACTION AFFINGER6」における、設定フォントの確認・変更手順は下記の通りです

 

まずは…

  1. WordPress管理画面の左側一覧から「AFFINGER管理」
  2. 「AFFINGER管理」内の左側一覧から「全体設定」タブ

の順にクリックし、そのなかの「フォントの種類」というエリアに表示されている…

WordPressでGoogleフォントを使用しているかどうかの確認&通常フォントへの変更方法(AFFINGERの場合) 1-01

↑ こちらの…

  • M PLUS Rounded 1c
  • Noto Sans

という2つが、Googleフォントにあたります(ほかに、特定のGoogleフォントを自分で追加していない限り)

 

デフォルトの設定では…

WordPressでGoogleフォントを使用しているかどうかの確認&通常フォントへの変更方法(AFFINGERの場合) 1-02

↑ このように「記事タイトル・見出し…」という項目で、Googleフォント【Noto Sans】が適用されています

 

これを「通常フォント」に変更するには…

WordPressでGoogleフォントを使用しているかどうかの確認&通常フォントへの変更方法(AFFINGERの場合) 1-03

↑ こちらの【使用しない】を選択し、右上の「Save」ボタンをクリックすればOKです

 

これで、【メイリオ】というAFFINGER標準の通常フォントに変更されます

 

ちなみに右側の【游ゴシック】と【游明朝】も通常フォントですが、この2つは…

WordPressでGoogleフォントを使用しているかどうかの確認&通常フォントへの変更方法(AFFINGERの場合) 1-04

↑ こちらの注釈にもあるように、一部ブラウザで「若干のズレ」が生じてしまうことから、基本的には推奨しません

 

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

 
 

なお…

現在提供されているGoogleフォントの種類については、「Google Fonts」で簡単に確認できます(「Language」というタブを開き、「Japanese」を選択!)

 

人気記事

 

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

”全8章” の総合TOPページです

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

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

ACTION AFFINGER6 バナー 01-300px

インフォトップ ワードプレステーマ売上

第1位

ACTION AFFINGER6

 

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

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

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

すごいもくじLITE

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

 

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

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

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

続きを見る

※2021年発表Infotop Affidemy

About me

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

suzu azuki
あずき鈴々

 

独立5年目の専業ブロガー / 元アパレル → 歴10年

 

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

-WORDPRESS