Webサイトの表示速度を上げる方法

ホームページ制作

この記事は「Webサイトの表示速度を簡単な方法で改善したい人向け」の内容です。

SEO対策を色々調べるうちに、表示速度の改善に辿り着いた方もおられるかもしれません。

今回は専門知識がなくても手軽に行える方法を紹介しているので、まだの方は①〜③の順にぜひ試してみてください。

Webサイトの表示速度とは

Webサイトの表示速度は、URLをクリックしてからページが閲覧できるまでにかかる時間のことです。

Webサイトの読み込みが遅くてイライラしたり、ページを見る前にブラウザを閉じたりしたことはありませんか?

せっかく興味を持ってホームページに来てくれたにも関わらず、何も見ずに帰ってしまったと思うと勿体ないですよね。

特にスマートフォンでの表示速度が遅いと離脱に繋がりやすく、いかにストレスなく閲覧できるかということが、検索順位を決める際の指標としても重要になっています。

このような機会損失を減らすためにも、簡単に取り組める改善方法を紹介します。

PageSpeed Insightsで分析

PageSpeed Insights(ページスピードインサイト)は、Googleが提供する無料ツールです。

スマートフォンとPCでのサイトパフォーマンスを測定し、以下のような場合にかかる時間を数値化してくれます。

  • 最初のコンテンツが表示されるまで
  • ページが操作可能になるまで
  • 意図しないレイアウト崩れがないか
  • 最も大きなコンテンツが表示されるまで

操作方法はいたってシンプルで、測定したいWebサイトのURLを入力して、分析ボタンを押すだけです。

パフォーマンスの問題を診断が終了すると、モバイル|デスクトップでのパフォーマンスが表示されます。

【モバイルの測定結果】

モバイルでの表示速度

【デスクトップの測定結果】

デスクトップでの表示速度

それぞれの指標が▲0〜49点、■50〜89点、○90〜100点で表示され、緑の丸が表示されていると合格です。

現在はスマホユーザーがほとんどなので、デスクトップでのパフォーマンスだけでなく、モバイル表示での高得点を目指しましょう。

画像をリサイズする

各デバイスの切り替えに対応するには、撮った写真をそのまま使うのではなく、適切なサイズに縮小やトリミングする必要があります。

Webサイトに使用する画像のサイズは、以下の基準で決めるといいでしょう。

  1. 各デバイスの推奨画像サイズ
  2. リサイズする画像の縦横比
  3. レイアウトと画像の表示バランス

ちなみにこのサイトでは、アイキャッチ画像:1200×630px、本文画像:横幅750pxを目安にリサイズしていますが、くっきり見せたい時はサイズや解像度が大きめの画像を使っています。

画質によっては縮小すると見づらくなるので、先ほどの基準を考慮しながら最適なバランスを見つけることが大切です。

TinyPNGで画像圧縮

TinyPNG(タイニーピング)は、画質をほとんど劣化させることなく、画像の圧縮と軽量化が可能なツールです。

個人的にこのパンダは可愛いと思うのですが、皆さんはどうでしょうか?(笑)

TinyPNG

アップロードすると自動で圧縮と軽量化を行なってくれるので、あとは圧縮した画像をダウンロードするだけです。

一度に20枚・最大5MBまでという制限はありますが、大きめの画像だと50%以上軽くなる場合もあるので表示速度UPには欠かせません。

特に②と③は簡単な改善方法なので、Webサイトの表示が遅いと感じる方は一度試してみてください。

表示速度といえば某有名俳優さんの公式ホームページが爆速なので、まだ体感したことのない方はそちらも是非!

関連記事一覧