ホームページの表示速度を上げる方法

ホームページ制作

ホームページの表示速度がなぜ重要なのか?

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

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

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

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

① PageSpeed Insightsでサイトを分析

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

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

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

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

パフォーマンスの問題を診断するが終了すると、モバイル/PC画面でのパフォーマンスが表示されます。

【モバイルでの測定結果】

【PCでの測定結果】

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

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

② デバイスに合わせて画像をリサイズ

PC・スマホ・タブレットの切り替えに対応するには、撮った写真をそのまま使うのではなく、適切なサイズに縮小したり、トリミングしたりする必要があります。

ホームページに使用する画像のサイズは、以下の基準で決めると良いでしょう。

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

ちなみにこのブログでは、アイキャッチ画像:1200×660px、本文の画像:680×440pxにリサイズしています。

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

③ TinyPNGで画像を圧縮&軽量化

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

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

TinyPNG(タイニーピング)

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

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

特に②と③は簡単な改善方法なので、ホームページの表示が遅いと感じる方は、一度試してみて下さい。

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

関連記事一覧