WORDPRESS

WordPressで、ページ表示速度の改善におすすめな「7つ」の方法【サイトスピードの高速化】

WordPressで、ページ表示速度の改善におすすめな「7つ」の方法 アイキャッチ



あずきです🐥

WordPressブログで、ユーザーに「読み込み時間のストレス」を与えないために大切な…

ページ表示を高速化するための方法

について、ブログ初心者さん向けに1から解説していきます

具体的には、次の7つです

  1. まずは、「PageSpeed Insights」で表示スピードを計測
  2. Lazy Load機能で、画像などを遅延読み込み
  3. プラグイン「Autoptimize」で、各種コードを最適化
  4. プラグイン「WP Fastest Cache」で、キャッシュを最適化
  5. 同じく「WP Fastest Cache」で、テキストファイルの「GZIP圧縮」を有効化
  6. PHPのバージョンを更新
  7. 【任意】Googleフォントを削除

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

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで アイキャッチ
【超時短】ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで【WordPress】

続きを見る

 

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

WordPressブログガイド 第9章「豆知識」編 

About me

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

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

あずき

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

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

プラグインの種類によっては、導入済みのテーマや他のプラグインとの干渉などでWordPressに不具合が発生する可能性があります。 プラグインのご利用にあたっては、あらかじめのバックアップをおすすめします

関連:WordPressプラグイン「BackWPup」の基本的な設定方法【ブログに必須なバックアップ】

WordPressにおける、ページ表示速度を高速化させる7つの方法【初心者向け解説】

まずは、「PageSpeed Insights」で表示スピードを計測【速度のスコア化と、課題の分析】

WordPressブログ「完全初心者」ガイド 見出し a-01

まずは、現時点におけるブログの表示スピードを「計測」しましょう

ズバリ…

  • PageSpeed Insights

というツールを使います

「PageSpeed Insights」は、Googleが無料で提供している「WEBサイトの表示スピード計測」のための代表的なツールです

主な機能は次の通り

  • URLを貼って「分析」をクリックするだけで、表示速度を計測して「スコア=点数」化してくれる!
  • このスコアは、「モバイル」と「パソコン」の2パターンで出してくれる!
  • さらに、計測の「内訳」も表示してくれる!
  • その上、「改善できる項目」まで親切に教えてくれる!

具体的な使用方法は ↓ から♪

「PageSpeed Insights」とは?ページの表示速度を簡単計測する方法 アイキャッチ
「PageSpeed Insights」とは?ページの表示速度を簡単計測する方法【Googleの無料ツール】

続きを見る

Lazy Load機能で、画像などを遅延読み込み【SEO対策までケアできるプラグインが◎】

WordPressブログ「完全初心者」ガイド 見出し a-02

「Lazy Load」とは、WEBサイトの表示スピードを高速化するために、画像などをあえて「遅延読み込み」させる機能です

「遅延読み込み」とか急に聞くと、なんとなく「表示スピード遅くなりそう…」と思うかもですよね

でも基本的には、この「遅延読み込み」という機能を取り入れることで、表示スピードは格段に改善できます

この「Lazy Load」機能の詳細については ↓ から♪

ブログの「Lazy Load」機能とは? アイキャッチ
ブログの「Lazy Load」機能とは?「画像の遅延読み込み」で、ページ表示速度を高速化しよう【WordPressブログ】

続きを見る

で、僕が実際に愛用してる「Lazy Load」系プラグインは…

  • LazyLoad SEO

というプラグインです

ちなみにこのプラグインは、WordPressテーマ「WING(AFFINGER5)」「STINGER PRO2」専用の有料プラグインで、料金は「5,000円(税込)」になります

主な機能は2つ

  1. 「LazyLoad」の機能 ⇒ 画像だけでなく、ブログに埋め込んだ「YouTube動画」や「Google Map」なども遅延読み込みできる!
  2. さらに、検索エンジンにも画像の存在を認識させられる ⇒ 「Lazy Load」の弱点であるSEO面もしっかりカバー!

具体的な購入・導入手順、また設定方法については ↓ から♪

WordPressプラグイン「LazyLoad SEO」とは?購入手順と、ダウンロード&解凍方法 アイキャッチ
WordPressプラグイン「LazyLoad SEO」とは?購入手順と、ダウンロード&解凍方法【AFFINGER系専用】

続きを見る

WordPressプラグイン「LazyLoad SEO」の導入手順と、基本的な設定方法 アイキャッチ
WordPressプラグイン「LazyLoad SEO」の導入手順と、基本的な設定方法【画像の遅延読み込み+SEO対策】

続きを見る

プラグイン「Autoptimize」で、各種コードを最適化【JavaScript/CSS/HTML/画像の最適化】

WordPressブログ「完全初心者」ガイド 見出し a-03

「Autoptimize」は、各種コードや画像を「最適化」するツールとして代表的なプラグインです

主な機能は、次の4つになります

  • 「JavaScript」の最適化
  • 「CSS」の最適化
  • 「HTML」の最適化
  • 「画像」の最適化

初心者の方にとっては、間違いなく「なんのこっちゃ?」ですよね(←経験談)

そもそも!

僕らが普段目にする「いわゆるWEBサイトの画面」というのは、その画面には直接映らない「水面下の膨大なコードたち」で形成されてます

ただ、ページ表示に必要なコード内において「記述構成の(実質的な)ムダ」があると、それだけ読み込みに時間がかかってしまうんですね

そんなコードの構成を自動で整えて ”最適化” してくれるのが、今回の「Autoptimize」です

具体的な導入&設定方法については ↓ から♪

WordPressプラグイン「Autoptimize」の基本的な設定方法 アイキャッチ
WordPressプラグイン「Autoptimize」の基本的な設定方法【ブログのページ表示速度を高速化】

続きを見る

プラグイン「WP Fastest Cache」で、キャッシュを最適化【GZIP圧縮もついでに有効化】

WordPressブログ「完全初心者」ガイド 見出し a-04

「WP Fastest Cache」は、WordPress全般の「キャッシュ管理」ができるツールとして代表的なプラグインです

まず「キャッシュ」とは…

以前に取得した「ページ読み込み時のデータ」を利用することによって、
次回のページ読み込みをスムーズに行う

ための、「事前にまとめられたデータ」のこと

もしくは、その仕組みのことを言うよ!

ただ、ひとえに「キャッシュ」と言っても…

  • インターネット全般に使う「ブラウザ」に溜まっていくキャッシュ(=ブラウザキャッシュ)
  • WordPressブログ固有のキャッシュ(=WordPressキャッシュ)

など、厳密にはいくつかの種類があります

で、今回の「WP Fastest Cache」で管理できるのは、基本的に「WordPressキャッシュ」の方です

具体的な導入&設定方法については ↓ から♪

WordPressプラグイン「WP Fastest Cache」の基本的な設定方法 アイキャッチ
【2020年版】WordPressプラグイン「WP Fastest Cache」の基本的な設定方法【ブログのキャッシュ削除】

続きを見る

リクナビNEXT

30代向け

約85%がリクナビNEXT限定求人

正社員求人は9割以上

無料登録はたった5分で完了!!!

同じく「WP Fastest Cache」で、テキストファイルの「GZIP圧縮」を有効化

WordPressブログ「完全初心者」ガイド 見出し a-05

もう1つ、同じく「WP Fastest Cache」を使ってやっておきたいことがあります

それは…

  • テキストファイルのGZIP圧縮

という設定です

一瞬でおわるよ!

初心者の方にとっては「GZIP圧縮」という言葉を聞いただけで、「なんか超むずかしそう…」と思うかもですよね(←経験談)

でも要は…

  1. ページ表示に必要な「材料=ファイル」をサーバー側から読者(ブラウザ)側へ送る際に、そのままだと重たすぎて読み込みが大変だよね…
  2. だから、各ファイルをなるべく「軽く=GZIP圧縮」して送るようにするよ!
  3. そうすることで、「実際にページが表示されるまでの時間」が速くなるはずだよ!

こんな感じにイメージしておけばOK♪

プラグイン「WP Fastest Cache」を使えば、この「GZIP圧縮の有効化」もクリック1つで超簡単です

「GZIP圧縮」の詳細と具体的な手順については ↓ から♪

GZIP圧縮とは?WordPressで「GZIP圧縮」を有効化するおすすめな方法 アイキャッチ
【初心者向け】GZIP圧縮とは?WordPressで「GZIP圧縮」を有効化するおすすめな方法【プラグインが便利】

続きを見る

PHPのバージョンを更新【各レンタルサーバーの管理ページで行う】

WordPressブログ「完全初心者」ガイド 見出し b-01

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

ちょっと意味不明かもですね

例えば、通販サイトで商品をカートに入れると「カート内容が自動で切り替わる」現象

あれもまさに、PHPがもつ「動的」な機能の1つです

そしてWordPressの場合、このPHPというシステムが(通販サイトに限らず)至るところで使われてます

で!

そんなPHPのバージョンは、定期的に「アップデート」されているんですね

新バージョンのPHPがリリースされてるのに、昔のバージョンを使い続けていると…

  • ブログの動作に支障が出たり
  • セキュリティー面のリスクが高まったり

してしまいます

プラグインとかテーマと一緒!

結論、WordPressのPHPは定期的にアップデート(更新)しましょう

PHPのバージョン更新は、契約してる「各レンタルサーバーの管理ページ」で行うのが普通です

このブログで愛用中の「エックスサーバー 」におけるPHPの更新手順については、↓ から♪

WordPressのサイトヘルスで「PHPの非常に古いバージョン…更新をおすすめします」と出たときの対処方法 アイキャッチ
WordPressのサイトヘルスで「PHPの非常に古いバージョン…更新をおすすめします」と出たときの対処方法【エックスサーバー版】

続きを見る

【任意】Googleフォントを削除【テーマによって、使われてる場合・使われてない場合がある】

WordPressブログ「完全初心者」ガイド 見出し b-02

WordPressでは、使用するテーマによってWebフォントの1種である「Googleフォント」というのが採用されてる可能性があります

というのも、そもそも普段見てるWEBサイトの「文字フォント」というのは、大きく…

  • 通常フォント
  • Webフォント

この2種類にわけられるんですね

で、結論「Webフォント」というのを自分のブログに採用してる場合…

ページの表示速度を遅くしてしまう可能性が高い

です

これについては、まず「Webフォントとは何か?」から目を通しておくことをおすすめします ↓

「Webフォント」とは?通常のフォントとの違いって?メリット&デメリット アイキャッチ
「Webフォント」とは?通常のフォントとの違いって?メリット&デメリットを初心者向けに優しく解説

続きを見る

で、実際にWebフォントの1種「Googleフォント」を削除する方法は ↓ から♪

WordPressで「Googleフォントの削除」を行う方法 アイキャッチ
【Autoptimizeなら一瞬】WordPressで「Googleフォントの削除」を行う方法【表示スピードの改善】

続きを見る

「表示速度は確かに改善したいけど、Googleフォントの削除は迷ってる…」という方は、↓ をどーぞ♪

WordPressで、Webフォント「Googleフォント」の削除は実際するべきか? アイキャッチ
WordPressで、Webフォント「Googleフォント」の削除は実際するべきか?【サイト表示の高速化】

続きを見る

おしまい♪

あずき🐥

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

✔ 研ぎ澄まされた美しいデザインと、「変幻自在」に豊富なバリエーション!

✔ 時間のかかる面倒だったカスタマイズも、「クリック1つ」で瞬時に実現!

✔ 「本気で戦う」ための、最適化されたSEO対策と収益UPの機能が標準装備!

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

公式:「稼ぐ」に特化したWordPress テーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入&導入ステップを画像つきで1から解説

ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで アイキャッチ
【超時短】ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで【WordPress】

続きを見る

 

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

WordPressブログガイド 第9章「豆知識」編 

あずきのWordPressブログガイド 総合TOP 

About me

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

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

あずき

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

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

-WORDPRESS

© 2020 あずきのぶろぐ