HTMLの読み込みが遅い場合の原因を現役エンジニアが解説【初心者向け】

初心者向けにHTMLが重い場合の原因について解説しています。ここではWebの読み込みが遅いときに考えられる原因と、それぞれの場合の対処方法を説明します。サイトが重いときの参考にしてみましょう。

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

HTMLの読み込みが遅い場合の原因について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

読み込みが遅い場合の原因について詳しく説明していくね!

大石ゆかり

お願いします!

 

HTMLの読み込みが遅いとき(重いとき)に考えられる原因

HTMLはクライアントサイドのため、何かを読み込む時や表示に対して時間が掛かります。

プログラミングのコードを見る前に、画像や動画を埋め込んでいる場合には、そのサイズが大きすぎないかを検討しましょう。

また、サーバー自体の特性により速度が変わる場合も少なくありません。

例えば、マイナーなサーバーの場合は処理能力が高くないため、HTMLの表示が遅い場合もあります。

HTMLのコーディングの内容を見てみると、外部ファイルや参照ファイルが多すぎる場合や外部ファイルのサーバー自体に問題がある場合は遅くなりやすいといえます。

 

 改善方法、解決方法

HTMLに埋め込む画像等は圧縮し、実際の表示の大きさはCSSで調整するようにしましょう。。

外部ファイルに関しても少なく済むよう調整します。

画像自体を外部ファイルから読み込んでいる場合には、ローカル環境などにダウンロードしてから使用するほうが外部ファイルのサーバーやWeb環境に左右されないため、表示が早くなります。

外部スクリプトなどを読み込まなければならない場合は、HTMLコードの一番下に書きましょう。

HTMLは上から読み込まれ、head内に書いていたscriptタグのJavaScriptは一番最初に読み込まれます。

処理時間のかかるscriptタグはbody内の閉じタグの直前に記述するようにしていきましょう。

 

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

執筆してくれたメンター

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。

WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

HTMLの読み込みが遅い場合の原因がよく分かったので良かったです!

田島悠介

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

大石ゆかり

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

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

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