サイトスピード

重いサイトを軽くするにはどうすればよいのか?【保存版】

あなたは、1、2、3秒と待っても読み込み中のウェブサイトを利用しますか? 

おそらく、その情報が絶対に必要ではない限り、アクセスするのをやめてしまうのではないでしょうか。サイトスピードはユーザーの利便性を決定する重要な指標です。

この記事では、「重いサイトを軽くするにはどうすればよいのか?」について徹底解説します。なお、軽いサイトの代表例として話題となっている阿部寛さんのHPについて分析した記事もありますので、ご興味のある方はご覧ください。

軽いサイト・阿部寛さんのアイキャッチ画像です。
なぜ、阿部寛のホームページは軽いサイトで検索するとトップにくるのか?今日はWEBマーケティング業界で面白いネタとして話題となったトピックを紹介します。それは「軽いサイト」と検索すると、阿部寛さんのHPが表示されるという話です。なぜなのでしょうか!?この記事では、なぜ軽いサイトで検索すると阿部寛さんのHPが上位表示されるのか、その秘密について考察していきます。...

重いサイト=表示までに3秒以上かかる

そもそも重いサイトといっても、何を基準にして判断すればよいのでしょうか?

この問いを考えるにあたって、マーケティング系のデータ解析サービスを提供するPingdomが公開する『Does Page Load Time Really Affect Bounce Rate?』のデータが役に立ちます。

表示速度と離脱率Pingdom「Does Page Load Time Really Affect Bounce Rate? 」(最終確認日:2020/4/15)から引用

上記の引用を踏まえると、ユーザーが「このサイトは重いな……」と感じてアクセスを断念し始めるのは、ページの読み込みに3秒以上かかる時点からです。

したがって、重いサイトとはページを表示するまでに3秒以上かかるものといってよいでしょう。

サイトスピードを評価するには?

とはいえ、「自分のウェブサイトが読み込まれる時間」を評価するにはどうしたらよいのでしょうか?

ここでは代表的な3つのツールをリストアップしておきます。どれも簡単に使用できるので、以下の記事を参考に表示速度を計測してみてください。

サイトスピード 画像
サイトスピードを改善すべき3つの理由と4つの方法を紹介! ウェブサイトを利用する際に、読み込み時間が長いとイライラしますよね……。インターネットが当たり前になった現代では、通信速度が遅いだけで...

表示速度の最適化は完璧を目指すよりも遅すぎないことが重要です。そのため、極端に遅いと判断される場合にサイトスピードの改善を優先するようにしましょう!

軽くするにはどうすればよいのか?

それでは、重いサイトを軽くするにはどうすればよいのでしょうか?

ここでは、サイトスピードを加速させる8つの方法を紹介します。

これらをまとめて実践すれば表示速度を改善できるので、自分のサイトと照らし合わせて導入の有無を確認してみましょう!

方法1 画像ファイルを圧縮する

まずは、ウェブサイトにアップロードされている画像ファイルを圧縮しましょう

画像はウェブサイトのデザインを良くしたり、文章を図解して伝わりやすくしたりするのに役立つものです。

しかしながら、1MB(メガバイト)レベルの画像を何枚も挿入すると、ウェブサイトはあっという間に重たくなってしまいます

また、100KB(キロバイト)レベルの画像だったとしても、10、20、30と数が増えると、合計の転送量が増加するのでスピードは遅くなります

1MBと100MBの画像は質的に同じ

そのため、画像を使用する際はアップロードする前に必ず圧縮しましょう! 

なお、画像圧縮について詳しく知りたい方は、こちらの記事をご覧ください。

記事のタイトルとイメージを記述したアイキャッチ画像
画像圧縮ならパンダで有名なTinyPNG!使い方を解説ウェブサイトの表示速度を改善するなら、画像圧縮は必要不可欠です。画像圧縮のツールには複数の種類がありますが、TinyPNGは高性能かつ無料で使える便利なサービスです。この記事では、パンダのキャラクターで有名な画像圧縮サービスTinyPNGの使い方について解説します。ブログを始めた方やオウンドメディアを運営されている方の参考になれば幸いです。...

方法2 キャッシュ機能を使う

続いて、キャッシュ機能を使いましょう。キャッシュとは、一度訪れたページを端末に保存することで、再びアクセスしたときのデータ通信料を減らす仕組みのことです。

キャッシュの説明

これによって、ウェブサイトを継続的に利用するユーザーは逐一、ページを読み込む必要がなくなるので表示速度が上がります

なお、WordPressでウェブサイトを作っている方でキャッシュ機能の導入を検討している方は、こちらの記事がおすすめです。

WP SUPER CACHEの設定と導入前に注意すべきことのアイキャッチ画像
WP SUPER CACHEの設定と導入前に注意すべきこと【徹底解説】 ウェブサイトの表示速度を改善する手段として、キャッシュ機能を追加する方法が有効です。WordPressを利用している方なら、WP SU...

方法3 画像の遅滞読込を導入する

続いて、画像の遅滞読込を導入しましょう

画像の遅滞読込とは、通称「Lazy Load(レイジーロード)」と呼ばれており、ユーザーが最初に見るページ以外の画像を後から読み込むことによって、アクセスしたときの転送量を減少させる技術のことをいいます。

Lazy Loadが画像を読み込む流れ

WordPressでウェブサイトを作成しているなら、プラグインの設定だけで実装できます。ただし、いくつかの注意点もあるので詳細を知りたい方は、次の記事をご覧ください。

Lazy Loadの使い方 アイキャッチ
Lazy Loadの使い方【WordPressの利用者必見】画像データの圧縮、キャッシュ機能の追加、不要なCSSの削除以外にも、Lazy Load(レイジーロード)というサイトスピードを改善する方法があります。Lazyは英語で「動きがのろい」という意味なので、ウェブサイトの表示速度を上げる技術と関係ないように思えますが、有効な改善策のひとつです。この記事では、Lazy Loadの概要と使い方について解説していきます。遅滞読込を活用してウェブサイトの表示速度を改善したい方の参考になれば幸いです。...
アイキャッチ画像
a3 Lazy Loadの設定方法|遅滞読み込みでサイトを高速化 Google botは、Lazy Loadが適用されたデータを読み込むことができないといわれています。すなわち、SEOに悪影響があるか...

方法4 動画はYoutubeチャンネルで再生してもらう

続いて、動画を埋め込みをすぎている場合は専用のYoutubeチャンネルを作成して、リンクからアクセスしてもらいましょう

Youtubeなどの動画コンテンツはユーザーに伝わりやすいだけではく、ユーザーの滞在時間を伸ばしてコンバージョン率を高めることにつながります

動画を見る人

ただし、 Wi-Fi無しでアマゾンプライムの動画を見ると、あっという間に通信速度が制限されてしまうように、動画のデータ容量は画像をはるかに超える大きさです

したがって、Youtubeチャンネルなどのリンクを活用して、サイト内に動画コンテンツを置くことは可能な限り控えることを推奨します。

方法5 CSS・JavaScript・HTMLコードを圧縮する

続いて、CSS・JavaScript・HTMLコードは圧縮しましょう

CSS・JavaScript・HTMLの各種コードはウェブサイトのデザインや機能を充実させるのに欠かせない存在です。しかし、これらのコードも複雑化したり、量が増えるにつれて、サイトが重たくなってしまいます

WordPressの場合は、Autoptimizeというプラグインを使えば5分もかからず、これらのコードを圧縮できます。詳しく知りたい方は、以下の記事を参考にしてください。

Autoptimizeの記事アイキャッチ
Autoptimizeの設定方法とメリットを解説|プラグイン WordPressで作ったウェブサイトを運営しているなら、プラグインを導入するだけで表示速度を改善できる場合があります。Autopti...

方法6 絵文字や特殊なフォントは削除する

続いて、絵文字や特殊なフォントを使用している場合は削除しましょう。

一般的なユーザーは全部の文章を読むわけではありません。自分たちが必要とする部分だけをピックアップして読んでいくことを念頭に置いて情報コンテンツを作成する必要があります。

発信側からすれば、文字のデザインや色とりどりの絵文字を使ったほうが良いコンテンツになると思いがちですが、スピードが遅いほうが圧倒的に不便です。

CSS・JavaScript・HTMLのコードを圧縮する方法と同様に、WordPressを使っている方ならAutoptimizeというプラグインを使用すれば、絵文字や特殊なフォントを自動的に削除できます。

方法7 サーバープランを確認する

続いて、サーバープランを見直してみましょう

各企業が提供するサービスによってスペックに違いがあります。具体的には、次の項目を意識して予算と相談しながら、ウェブサイトに最適なサーバープランを選択することが大切です。

  • CPUのコアはより大きいものを選ぶ
  • メモリの数もより大きいものを選ぶ
  • HDDよりもSSDのほうが処理が速い

また、使用容量を確認して残量が少ない場合は、プランを一段階引き上げることで表示速度が改善する場合があります。

方法8 不要なファイルを削除する

最後に、サイト内の不要なファイルは定期的に削除しましょう

ウェブサイトのコンテンツを作成していると、いつ間にか不要なファイルが溜まってしまいます。

塵も積もれば山となるので、画像ファイルや書きかけの記事のデータで使わないものは廃棄して無駄なデータ容量を使わないことが重要です。

月一度、不要なファイルを削除する日にちを決めることをオススメします!

検索順位にも悪影響がある

Googleはユーザーのために検索エンジンを最適化し続けています。サイトスピードも検索順位に影響を与える基準のひとつです。

Googleのポリシーにも「遅いよりも速いほうがいい」とあるように、極端に重いサイトはユーザーにとっても不便なので、いくら内容が優れたものであっても利用されないおそれがあります

そのため、この記事で紹介した方法のなかでも実践できる項目から始めて、だれもが使いやすいウェブサイトを作っていくことが大切なのです。

ABOUT ME
PENDELION編集部
PENDELION編集部はライター・構成担当・編集担当・グロースハッカーから成り立っています。専属のライターさんが執筆した記事に関しては、希望がある場合にのみプロフィールを掲載します。