【SWELLで高速化】サイトの表示速度を改善する方法【ブログSEO】

WordPressのロゴ
URLをコピーする
URLをコピーしました!
悩んでいる人

ブログの表示速度を上げたい…

サイト(ブログ)の表示速度を上げる方法はいくつかありますが、その設定方法はWordPressテーマやプラグインによって異なります。

テーマの方に高速化の機能が備わっていることを知らず、同じような機能のプラグインを入れてしまった…なんてことも。

ジュンペイ

ありました…

へたをしたらテーマとプラグインが干渉して、WordPress自体に不具合が出てしまいます。

そこで今回は、テーマに依存しない高速化の設定方法と、当ブログが使っているテーマ「SWELL」で可能な設定方法に分けて、解説していきます。

SWELLの関連記事▼

この記事を書いた人

Twitter(@saishonojptw

この記事を書いている僕は、2021年8月ブログ開始。最初の記事がA8コンテスト入賞。ブログ3ヶ月目に収益:単月5桁。シンプルなブログ作りを発信。地味にコツコツ、が得意です。

この記事でわかること
  • WordPressテーマに依存しない高速化の設定方法
  • SWELLで可能な高速化の設定方法
目次

当ブログの表示速度

当ブログの表示速度(デスクトップ)

当ブログの表示速度(デスクトップ)は、99%のパフォーマンスになっています(上の画像)

当ブログの表示速度(モバイル)

モバイル(携帯電話)は、97%のパフォーマンスです。

サイトによると思いますが、当ブログではとくに「画像のWebP化」と「遅延読み込み」をしたら表示速度が大きく上がりました。

サイトの表示速度を改善する方法5つ

WordPress(ワードプレス)で製作したサイトやブログなら、次の方法で表示速度を改善できます。

高速化の方法5つ
  • 画像をWebP化する【共通】
  • PHPをバージョンアップする【共通】
  • コードを最適化する【SWELL】
  • サイト(ブログ)をキャッシュする【SWELL】
  • パーツ、画像、スクリプトを遅延読み込みする【SWELL】

上記のうち、【共通】は、WordPress(ワードプレス)テーマに依存せず、どんなテーマを使っていても設定できる方法になります。

【SWELL】は、WordPressテーマ「SWELL」の機能を用いた設定方法になります。

通常、高速化の設定はプラグインに頼ることが多いですが、SWELLは高速化の機能を組み込んでいるため、プラグインを使わず設定します。

ジュンペイ

SWELLの高速化設定は便利ですよ

1つずつ見ていきますね。

画像をWebP化する【共通】

WordPressテーマに依存しない設定方法です。

ただし、プラグイン「EWWW Image Optimizer」を使いますので、EWWW Image Optimizerと干渉するテーマの場合は他のプラグインがいいかもしれません。

PageSpeed Insightsの画面

上の画像は、Google公式の「PageSpeed Insights」で測定した当ブログの結果です。

「改善できる項目」欄に、「次世代フォーマットでの画像の配信」というものがありますね。

この次世代フォーマットが「WebP」のことを指し、サイトの画像をWebP化することによって表示速度の向上が見込めます。

EWWW Image Optimizerで画像圧縮・WebP化を行います。

▼EWWW Image Optimizerの設定方法と使い方

PHPをバージョンアップする【共通】

WordPressテーマに依存しない設定方法です。PHPのバージョンアップはサーバー側で行います。

WordPressのコアファイルはPHPで書かれているため、PHPのバージョンが古いとWordPress自体の動作に影響します。
とくに理由がなければ、バージョンを最新に保っておきます。

WordPressの公式サイトでも、PHPバージョンを最新に保つことが薦められています。

WordPress はプログラミング言語「PHP」で実装されています。この PHP のバージョン設定は、レンタルサーバー会社によりサーバー側で行われています。WordPress 本体やテーマ、プラグインの最新バージョンを使用することの重要性は理解されていると思いますが、PHP の最新バージョンを使用することも同じように重要です。
(〜中略〜)
Web サイトがより速くなります。PHP の最新バージョンは以前のバージョンよりも効率的に動作します。

WordPress公式サイト

PHPバージョンアップの設定方法は次のとおりです。

※ 本記事ではレンタルサーバー「ConoHa WING」を例にしています。

ConoHa WINGコントロールパネル

ConoHa WINGのコントロールパネルにアクセスします。

①コントロールパネルの上部にある「WING」⇒左側にある「サイト管理」⇒「サイト設定」⇒タブの「応用設定」⇒リストの「PHP設定」メニューをクリックします。

②「PHP設定」の画面が出てきますので、右側にあるペンマーク(編集)をクリックします。

ConoHa WINGコントロールパネル

③PHPバージョンの選択ボックスで、最新版(上の画像では8.0)を選びます。

④PHP設定欄の右下の「保存」ボタンをクリックします。

これで、PHPのバージョンアップは完了です。

コードを最適化する【SWELL】

SWELLのロゴ

SWELLの機能を用いた設定方法です。

といっても、SWELLは自動でコードの最適化をしているため、SWELLなら何もする必要はありません。

コードを最適化とは

ここでいうコードとは、サイトを構成するHTML、CSS、JavaScriptなどで書かれたソースコードのこと。

最適化とは、圧縮化・軽量化の意味で、サイトの表示に必要十分な(無駄のない)プログラムにすること。

SWELL以外のテーマの場合は「Autoptimize」で対応している方が多いようです。

Autoptimizeは、SWELLでは干渉の可能性が指摘されています。

>>SWELLで非推奨・不必要なプラグインと、推奨プラグインについて(SWELL公式サイト)

サイト(ブログ)をキャッシュする【SWELL】

SWELLの機能を用いた設定方法です。

サイト(ブログ)のデータをキャッシュしておくと、読み込み時間が短縮され、表示速度が上がります。

設定方法は、下記記事の目次「④サイト高速化設定」からご覧ください。

パーツ、画像、スクリプトを遅延読み込みする【SWELL】

SWELLの機能を用いた設定方法です。

サイト(ブログ)のファーストビューに使わないパーツや画像、スクリプトを遅らせて読み込むことで、表示速度が上がります。

ファーストビューとは

サイト(ブログ)にアクセスしたとき画面に表示される部分、スクロールせず最初に表示される部分のこと。

設定方法は、下記記事の目次「④サイト高速化設定」からご覧ください(上記の記事リンクと同じ)

スクリプトの遅延読み込みには「遅延させる秒数」という項目があります。秒数を変えて試すとPageSpeed Insightsの結果を調整できますよ。

ジュンペイ

当ブログは5秒にしてます

また、スクリプトの遅延読み込み機能については、SWELL公式サイトに詳しい解説があります。

>>「スクリプトの遅延読み込み」機能の使い方について(SWELL公式サイト)

表示速度を改善する方法にはいろいろな説がある

コーヒーのイラスト

Google検索をすると、サイトの高速化設定にはいろいろな方法が見つかります。

それらの方法にはほとんど効果がない、という説も検索上位に出てきます。

たとえば、「ファーストビューに必要なCSSを先にインラインで読み込む」という方法もあります。効果は微小のようですが、SWELLにも設定項目があるので、とりあえずオンにしています。

プラグインを入れなくても、テーマ単体で高速化対策が充実しているのはSWELLの魅力ですね。

いろいろな方法がある中で、僕が実際にやってみて効果のあった方法をピックアップさせていただきました。

本記事で紹介したリンク

>>SWELLで非推奨・不必要なプラグインと、推奨プラグインについて(SWELL公式サイト)

>>「スクリプトの遅延読み込み」機能の使い方について(SWELL公式サイト)

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
  • URLをコピーしました!
目次
トップへ
目次
閉じる