WORDPRESS

【2022年】WordPress高速化におすすめな方法6選。サイトスピード向上【ワードプレスブログ「完全初心者」ガイド/第5章/No.9】

WordPress高速化におすすめな方法6選。サイトスピード向上【ワードプレスブログ「完全初心者」ガイド/第5章/No.9】
 

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

 

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

WordPressの高速化

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

 



 

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

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

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

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

【2022年】WordPress高速化におすすめな方法6選。サイトスピード向上【ワードプレスブログ「完全初心者」ガイド/第5章/No.9】

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

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

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

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

ひとえに「キャッシュ」と言っても実際にはいくつかの種類にわかれますが、ここでご紹介するのは…

ブラウザキャッシュ

という最も基礎的な種類になります

 

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

ブラウザ側

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

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

なおこの「ブラウザキャッシュ」を始め、各種キャッシュの生成を有効化するには「プラグイン」を導入するのが手っ取り早い方法です

 

参考までに、代表的なキャッシュ系プラグインとしては「WP Fastest Cache」や「WP Super Cache」などが挙げられます

 

ただし!

 

こうした「キャッシュ系プラグイン」というのは、「レイアウト崩れ」を始めさまざまな…

WordPressの不具合

が生じやすいというデメリットもよく聞くので、自分は現状使用していません

 

実際に自分は、過去に「WP Fastest Cache」という有名なキャッシュ系プラグインを使っていましたが、「スマホヘッダーメニューの表示が不安定になる」という不具合が起きたんですね(このプラグインを削除したところ、正常に戻りました)

あくまで自分のWordPress環境での話だよ!
 

で、こうした「プラグインを入れる」という手段の代わりに、現在は…

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

という方法を採用しています(少なくとも自分のブログ環境では、この方法によるサイトの不具合などは起こっていません)

 

もちろんレンタルサーバーごとでキャッシュ機能の有無や内容はそれぞれですが、このブログで愛用中のレンタルサーバー「エックスサーバー 」における「ブラウザキャッシュ機能」の設定手順を、下記に載せておきますね ↓

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

キャッシュは「サイトパフォーマンスを向上させる」という魅力がありますが、一方で「古いページ情報が表示される」「ブログに不具合が生じる」といったリスクもあるため、よほどWeb知識に自信があるという方でない限りは…

 

最低限の設定だけ済ませたら、あとはなるべく深入りしない。プラグインにも頼らない

 

のが賢明だと、自身の経験から思っています🐥

 

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ページです

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

 

あずき猫 - Azuki Cat

猫です。独立5年目の専業ブロガー / アパレル歴10年 / Twitterでは、ブログに限らず「色々うまくいかへん…」「どないしよ…」というときのための、本質的な思考を発信しています。ニャー!!!

-WORDPRESS