「クリエイターのたまご」の皆さんに贈る、デジタルハリウッドのお役立ちWebマガジン!「クリエイターになりたいなぁ」と、ちょっとでも思ったことのあるあなたは、「くりたま」です。

Webサイトが重い原因は?Webサイトの表示速度改善方法

スマホUI設計のコツ

Webサイトを見てみると、表示速度が遅く、1ページ表示するだけでも相当時間がかかってしまうことがあります。このままだと訪問者に対してもストレスを与えてしまい、ファーストビューで帰ってしまうかもしれません。Webサイトが重い原因を突き止めて解決しましょう。

 

Webサイト表示速度を計る無料のツール


まずは本当にサイト表示速度が遅く、Webサイトが重くなっているのかを確かめましょう。無料で使える速度を測るツールを活用することで、Webサイトの表示速度を知ることができます。

Googleアナリティクス

アクセス解析ツール、Googleアナリティクスを使用している場合は、これを利用してサイト速度を調べることができます。Googleアナリティクスのアカウントにログインしたら、[行動]→[サイトの速度]の順に選択しましょう。するとブラウザごとの速度を、国別、ページ別で比較できます。さらに[サイトの提案]を選択すると、具体的に改善すべき点を指摘してくれるので、対策法も見つけやすいです。

Page Speed Insights

Page Speed Insightsは、Googleが提供する速度チェックツールです。Chromeの拡張機能としても提供されており、よく使う場合は導入しておきましょう。同ツールで他サイトの比較もすることができます。Googleアナリティクスの機能と同様、どの部分を改善すべきか提案してくれる便利なツールです。

GTmetrix

GTmetrixでは、先程紹介したPage Speed InsightsとYSlowというYahoo!の提唱する項目に準拠しているかチェックするツールの2つの測定速度を同時に比較することができます。さらに、具体的に何が表示速度を遅くしているのか提示してくれるため、削除すべきWordPressのプラグインやJavaScriptが明確になることも特長です。

 

サイトが重い原因を1つずつ改善していこう


Webサイトが重い原因は、無料で使える速度チェックツールで調べ、個々で問題になっている箇所を修正していくことで解決できます。なお、サイトが重くなる原因の例として次のようなことが考えられます。

JavaScriptの影響で表示が遅い

JavaScriptを使用してメニューを表示しているなど、JavaScriptを多用していると、どうしてもページの読み込みに時間がかかってしまいます。これらが速度低下の原因となっているなら、JavaScriptではなく別の方法で表示させるか、ページが読み込まれるまでの間に訪問者が立ち去らない工夫が必要です。

画像のサイズが大きい

ファイルサイズの大きい画像を多用していると、読み込みが遅くなります。画像のサイズは、デジタルカメラやスマホで撮影したものをそのまま貼り付けると、かなり大きい場合が多いです。画像をリサイズするか、枚数を減らすなどしてページが重くならないよう対策しましょう。

アニメーションの挿入が原因

レイアウトが複雑であったり、途中でアニメーションが使用されていたりすると、スクロールの途中で、読み込みが遅くなってしまいます。アニメーションでFlashを使用し、それが原因でページの表示が遅くなっているなら、本当に必要なのか考え直してみましょう。

 

Webサイト表示速度を改善するポイント

Webサイトの作り方によって、サイトの表示速度が遅くなることもあります。技術者でなくても、大まかなポイントを理解しておくと、軽い表示を目指すことができるので、覚えておきましょう。

フロントエンドを高速化

HTML・CSS・JavaScriptなどの部分を改善すると、Webサイトの表示速度を高速化させることができます。ページ速度は、表示されるまでにサーバーとの通信量をどれだけ減らすかにかかっています。実は何回サーバーと通信するかは、HTMLに書かれている内容により変わっているのです。

また、外部CSS・外部JavaScriptのファイル数も表示速度に影響します。単純に、数が多ければサーバーとの通信回数が増え、通信が多くなることで速度が低下するのです。

CSS・JavaScriptは、画像に比べるとファイルサイズは小さいのですが、サーバーに負荷をかける存在であることに変わりはありません。少しでも通信速度をあげるために、不要な項目や空白、改行などを削っておきましょう。

 

まとめ

Webサイトが重いと感じたら、まずはどの部分が影響しているのか調べ、原因を払拭することが必要です。表示速度が遅いせいで機会損失をすることがないよう、表示速度を遅いと感じているのなら早急に対応しましょう。

 

B!

この記事におすすめのオンライン講座

こんな記事も読まれています

HTML・CSS・JavaScriptの違いは?わかりやすく解説【入門編】

VTuberの作り方は?個人勢向けに制作費用、活動に必要なものを解説!

ポートフォリオサイトのおすすめ21選!無料のポートフォリオサイトも紹介!

モバイルバージョンを終了