icon
icon

CSSの読み込み速度が遅い原因と対処法を現役エンジニアが解説【初心者向け】

初心者向けにCSSの読み込み速度が遅い原因と対処法について解説しています。最初にChromeのデベロッパーツールのNetworkタブを使った速度の確認方法を説明します。次に読み込みが遅くなる主な原因とそれぞれの対処方法を学びましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

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

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

CSSの読み込み速度が遅い原因と対処法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

読み込み速度が遅いとどうなるか

WebページはHTMLやCSS、JavaScriptなどで構成されます。CSSはWebページの見た目に影響するため、読み込みが終わってからWebページが描画されます。読み込み速度が遅いということは、Webページが表示されるまでの時間が長くなるということです。

一般的にWebページが表示されるまで3秒以上かかるとユーザーがWebページを見ずに去る確率が高くなると言われており、読み込み速度はWebページにとって重要な要素の1つです。

 

[PR] Webデザインで副業する方法とは

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

読み込み速度を調べるにはブラウザChromeのデベロッパーツールのNetworkタブを使用します。Networkタブを開いたままWebページをリロードすると、ページの読み込み速度を確認することが出来ます。

 

読み込み速度が遅い原因と対処法

読み込み速度が遅い場合、いくつかの原因が考えられます。

 

不要なCSSファイルの読込

CSSファイルはheadセクションで読み込みを行います。読み込みが完了するまでWebページの描画(レンダリング)が行われないため、レンダリングブロックリソースと呼ばれています。複数のライブラリなどを使用している場合、不要なCSSファイルを読み込んでいないか、再確認しましょう。

また圧縮形式のCSSファイルの使用、CDN(Content Delivery Network。インターネット上でライブラリを共用する仕組み)の利用も検討しましょう。レンダリングブロックリソースについては以下の記事も参考にしてください。

Web Fundamentals – レンダリングブロックCSS

 

JavaScriptファイルの読込位置

JavaScriptファイルはbodyタグの最後で読み込むようにします。headセクションで読み込むと、Webページのレンダリング速度に影響するため注意しましょう。

 

重い動画や画像ファイルの使用

現在のスマートフォンのカメラの性能はとても向上しており写真のファイルサイズも大きくなっています。スマートフォンで撮影した写真をそのままWebページに組み込むと表示に支障をきたすレベルのファイルサイズです。とくにWebサイトの背景や見出しのイメージには重い動画や画像ファイルは使用しないようにしましょう。

画像ファイルはファイルサイズを小さくするか、減色処理を行うようにします。大きくても500kByteは超えないぐらいのサイズが理想的です。

 

読み込み速度を改善しよう

先程の例を再度確認すると、CSSの読み込みに非常に時間がかかっていることが分かります。

不要なCSSを整理した結果が以下となります。

CSSの読み込み速度が早くなったことでWebページ全体の読み込み速度も改善されたことが確認できます。

 

まとめ

今回の記事ではCSSの読み込み速度が遅い原因と対処法について学習しました。

 

監修してくれたメンター

太田和樹(おおたかずき)

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績:画像認識技術を活用した駐車場混雑状況把握、音声認識を活用したヘルプデスク支援システム、ロボットアプリの開発、大規模基幹系システムの開発・導入マネジメント。著書「知識ゼロからの機械学習入門(技術評論社)」。

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

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

大石ゆかり

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

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

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