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

URLをコピーする
URLをコピーしました!

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

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

この記事では、「重いサイトを軽くするにはどうすればよいのか?」について徹底解説します。なお、軽いサイトの代表例として話題となっている阿部寛さんの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つのツールをリストアップしておきます。どれも簡単に使用できるので、以下の記事を参考に表示速度を計測してみてください。

  1.  PageSpeed Insights
  2.  Testmysite
  3.  SEOアナライザー

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

キャッシュの説明

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

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

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

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

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

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

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

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

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

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

動画を見る人

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

重いサイトを軽くするための記事 アイキャッチ画像

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!

本記事の監修者

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

目次
閉じる