「ホームページの表示速度」を改善する為の「4つのポイント」

「ホームページの表示速度」を改善する為の「4つのポイント」

2022年2月28日

ホームページの表示がちょっと、遅いようなので、
「ホームページの表示を速くする為の方法」
について知りたい。

こんなお悩みを解決する記事です。


ホームページの表示させた際の「表示速度」については、
 ホームページを運用
する上で、
 重要なポイントのひとつ
にあげることができます。

その理由は、そのサイトの表示速度が遅いと、
 離脱率が高くなり、
また、
 SEO的にもマイナスポイント
となってしまうからです。

離脱率に関しては、少し古いデータになりますが、
Googleの2017年と2018年の調査では、
 ページ表示速度が1秒から3秒になると直帰率が32%増加、
 6秒になると106%増加、
 10秒まで遅くなると123%増加する

と報告がなされています。

また、モバイルユーザーにおいては、
 読み込みに3秒以上かかると53%が閲覧を止めて離脱する
と言われています。

Google’s Official Digital Marketing Publication. New research shows it's cr…
www.thinkwithgoogle.com

ですので、2秒以内に表示させることが望ましいと言えます。

せっかく、良いコンテンツを作っても、表示速度の問題で読んでもらえないとなると、もったいないことになってしまいます。

また、SEO的にも、表示速度は評価の対象となっており、
 表示速度を早くする
ことで、検索順位にも良い影響がでます。

下記に表示速度の改善方法について、記載していきます。

スポンサーリンク

現在の表示速度を確認する

会社設立、法人設立時のホームページ作成

最初のステップとしては、まず、
 現状把握
を行うことになります。

それには、googleの「pagespeed insight」のサイトが便利です。

pagespeed.web.dev

サイトにURLを入力して、
 携帯
 と
 PC
での表示速度が、色と数値で表示されます。

色は、
 緑    速い
 オレンジ 平均
 黄色   遅い

となっていますので、少なくとも、平均以上を目指しましょう。

携帯の場合は、PCに比べると、数値が上がりにくい面があります。

ちなみに、本サイトのトップページは、下記数値となっています。

携帯表示
ホームページ表示速度
PC表示

表示速度の改善項目

表示速度の改善を行う際には、主に、下記の項目を改善していきます。

1.画像を軽くする
2・プラグインを見直す
3.各種の高速化の為の設定をする
4.速いサーバーに切り替える

それぞれについて説明していきます。

画像を軽くする

ページ内で使用している画像が重いと、結果、表示速度が遅くなります。
ですので、使用する画像を軽くする処理を行います。

その為の方法としては、
 画像をアップロードする際に、事前に軽くしておく
 もしくは、
 アップロードしてから、プラグインを使って、画像を軽くする

画像をアップロードする際に、事前に軽くしておく

下記のようなネット上のサービスを利用しても良いでしょう。

■Squuash
「Google Chrome Lab」が開発したブラウザ上で利用できる画像圧縮Webアプリ
Google推奨なので、安心です。

Squoosh is the ultimate image optimizer that allows you to compress and compare …
squoosh.app

■あっしゅくま
複数の画像を一括で処理できます。

「あっしゅくま」はJPEGやPNGの画像を軽量化するブラウザ上で使えるフリーの画像圧縮ツールです。ローカルで圧縮するためオフラインで通信容量やプライバシーを気に…
imguma.com

アップロードしてから、プラグインを使って、画像を軽くする

画像を軽くするプラグインとしては、下記が有名です。

EWWW Image Optimizer

Smaller Images, Faster Sites, Happier Visitors. Comprehensive image optimization…
ja.wordpress.org

※Swellというテーマをご利用の際は、マニュアルをみると、相性があまりよくないようで、圧縮処理をするとき以外は、無効化しておいたほうが良いとの記載があります。

WebP Converter for Media
画像をWebP対応にします。
WebPの対応のブラウザに対してのみ、WebP画像を表示させてくれるので、便利です。

Speed up your website by using our WebP & AVIF Converter. Optimize images and se…
ja.wordpress.org

プラグインを見直す

プラグインが多いと、結果、表示速度が遅くなります。
ですので、プラグインは、
 必要最低限
に絞って、設定されることをお勧めします。

また、なかには、
 表示速度への影響が大きいもの
や、
 テーマ(デザインテンプレート)との相性がよくないもの
がありますので、注意が必要です。

各種の高速化の為の設定をする

その他の高速化の為の設定は、
 キャッシュの設定をする
 CSS/JavaScriptを圧縮する
 JavaScriptの読み込みを非同期化する

など、いくつかの項目があります。

方法としては、
 プラグインで対応する
もしくは、
 高速化設定のあるテーマを選定する
という選択肢があります。

プラグインで対応する場合は、目的に応じたプラグインを使用することになります。
ただ、結果、使用するプラグインの数も増えてしまいます。

高速化の為のプラグイン

キャッシュの設定 「W3 Total Cache」

Search Engine (SEO) & Performance Optimization (WPO) via caching. Integrated cac…
ja.wordpress.org

CSS/JavaScriptを圧縮する 「Autoptimize」

Autoptimize は、以下を最適化することでサイトの反応を高速にします。JavaScript、CSS、画像 (遅延読み込みを含む)、HTML、Google…
ja.wordpress.org

JavaScriptの読み込みを非同期化する 「Async JavaScript」

Async Javascript lets you add 'async' or 'defer' attribute t…
ja.wordpress.org

プラグインの数のことを考えると、
 高速化の設定ができるテーマ
を使ったほうが、設定の手間も効率化することができます。

本サイトは、
 ystandard
という無料のテーマ(国産)を使用しています。

「自分色に染めた、自分だけのサイトを作る楽しさ」を感じてもらうために作った一風変わった無料WordPressテーマyStandard。カスタマイズありきのシンプ…
wp-ystandard.com

より便利に使う為の有料のプラグインもありますが、基本機能のみの利用でしたら、無料のままでOKもです。

もしくは、高速化に強い有料のテーマを使うという選択肢もあります。

最近、評判の良いテーマとしては、「swell」というテーマがあります。
表示速度やデザインの良さ、使いやすさで人気があります。

WordPressテーマ「SWELL」

速いサーバーに切り替える

レンタルサーバーのスペックが弱い場合は、
 上位プランに切り替える
あるいは、
 レンタルサーバー自体を切り替える(引っ越し)
といった方法があります。

いずれにしても、データを移行することになると、ある程度、手間がかかってしまいます。

ですので、
 高速化の設定をしても、改善がみられない場合
で、
 その原因がサーバーのスペックの可能性が高い
といった場合に検討することになります。

レンタルサーバーも、有名な先は、高速化の為の改善を行っていますので、同程度のプランの場合は、あまり差がない可能性もあります。
ですので、事前に十分検討しましょう。

【参考;レンタルサーバー】

■コノハウィング(ConoHa WING) ■エックスサーバー ■ロリポップ!

まとめ

スタビジ

近年は、モバイルユーザーの割合が高くなっていますので、特に、
 モバイルでの表示速度
を意識しておく必要があります。

通常は、PCに比べて、モバイルの表示速度の数値が低くなってしまいますが、少なくとも、
2秒以内に表示させること
を目標に、改善を図っていきましょう。