HTMLのページが重い原因を調べて読み込み速度を改善する方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLのページが重い原因を調べて読み込み速度を改善する方法について解説しています。最初に、GoogleのPageSpeed Insightsでサイトの読み込みの速度を調べる方法について説明します。次に原因となる箇所のチェック方法と改善の手順について見ていきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

HTMLのページが重い原因を調べて読み込み速度を改善する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

ページが重い原因を調べて読み込み速度を改善する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

読み込み速度を調べる方法

読み込み速度はかつては、開発者向けのブラウザとしてお馴染みだったFirefox、そのアドオンの「Firebug」「YSlow」でWebページの読み込み速度が検証されていました。

しかし、これらのアドオンが開発中止になってからは、Googleの「PageSpeed Insights」で調べることが一般的です。

このツールはWebサイトの読み込み速度を点数として、視覚的に結果を表示するためわかりやすいといえるでしょう。

 

Webサイトが重いとどうなるか

簡潔にいえば、Webサイトが重ければユーザーの離脱を招きます。

理由としては、表示に時間が掛れば掛かるほどストレスを感じるためです。

また、検索サイトの順位付けにおいても悪影響があるため、サイト設計者にとっても重いサイトは改善の必要があります。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

原因調査

調査の項目として具体的かつ詳細にも列挙する場合、膨大な数になるため、試しとしてテックアカデミーのトップページを調査します。

下図を参考に入力が可能なユーザーインターフェースに調査対象のURLを入力しましょう。

送信してから、しばらくして速度に対する点数が表示されます。

 

パソコンページとモバイルページのどちらも確認することが可能です。

 

上記の画像からでは、難解な項目に感じられるものの、ページが遅くなる原因は下記のようなものです。

この結果では、

  • 画像の容量や個数が肥大化していること
  • ファイルを参照するための通信の発生回数が多いこと
  • HTMLの構造が複雑になっていること

などがページの読み込み速度を低下させている原因として挙げられています。

 

改善効果をチェックしてみよう

前述で上げられていたWebサイトの読み込み速度を低下させる原因を全て取り除き、100点としてになった場合をみていきましょう。

「改善できる項目」が特にないため、ページパフォーマンスの監査の対象となっている項目をみてみましょう。

100点として計測されたWebサイトは、ブラウザがページを読み込んでから1秒未満でページを表示します。

厳しい文法の規則を厳守し、HTMLの構造を簡素にすることや各種ファイルの容量や個数を減らして通信の回数も削減することで、100点を目指すことが可能です。

なお、Googleの「PageSpeed Insights」での検査の項目は、『ハイパフォーマンスWebサイト』が全盛期だった頃の「YSlow」での検査項目と類似しています。

目標として全ファイルの容量も計200KB未満に抑えてから、1秒未満にてページをブラウザに表示しなければならないなどの理由がありましたら挑んでいきましょう。

 

執筆してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

HTMLのページが重い原因を調べて読み込み速度を改善する方法がよくわかったので良かったです!

田島悠介

ゆかりちゃん、今後も分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので参加してみてください。