方法や基礎知識について解説。css、Javascriptのコードを画像付きで説明していきます。自分のサイトの読み込み速度を調べたい!なぜwebサイトの読み込みが遅くなってしまう?ページを高速化するにあたって、cssとjavascriptはWebページの見た目に影響を与える為に読み込みが終了してからページの描画が行われます。それらのファイルの容量が重い事が低速化の原因となります。読み込むファイルの容量が多いホームページを作成するにあたって、高画質の画像を何枚も使用してはいませんか?ページ内の画像が多すぎるとそれだけ読み込みも遅くなってしまいます。画像は圧縮する目的に合わせた拡張子を選択する必要以上の大きさにしないcss/javascriptを改変してページの遅延読み込みをするこれらの対策を行う事でたいていの場合は変化が見込めます。不要なファイルを読み込んでいる読者の中には長期間特定のサイトを運用している方も居ると思います。そのサイトの運用期間が長い場合、現在は読み込む必要のないコードが表示を遅くしている要因になっている可能性があります。不要となったコードを削除するセレクタを浅く記述する各種チェッカーツールを用いて余剰部分を削る以上を試すと改善するでしょう。画像やcss/javascriptの取り扱い方を学んだところで、次は実際にどうすれば読み込みを高速化出来るかの解決策を挙げます。画質を落とす、もしくはソフトウェアで最適化をして、サーバーの通信料を減らしましょう。(通信料が多ければそれだけ読み込みに時間がかかるからです)また、拡張子の選択もベストなものを選びましょう。写真ならjpg、ベタ塗りや透過のイラストであればpngにする等です。画質を落とす最も手軽かつすぐに効果の出やすい方法が、画像の圧縮です。表示速度に影響を与えるのはサイト内の画像が殆どだと言われています。ソフトウェアで最適化を行う自分の好みや目的に合わせて最適なソフトウェアを選びましょう(扱える拡張子の種類が多い、何枚まで一括で圧縮出来るか、等)今の時代はフリーでも高性能な圧縮ソフトが多くあります。以下に一例を挙げます。IMGお手軽な有用な軽量化ツール。品質とファイルサイズの一覧表やプレビュー機能がある。中には画像はさほど多くは使用していないホームページの方もいるでしょう。画像の圧縮と比較すると軽量化の度合いは小さいですが、更なる高速化を追求したいのであれば、CSSとJavaScriptも軽量化、レンダリングの改善もするべきでしょう。読み込みを遅延させるコードの記述内容にも寄りますが、html・css・javascriptを同時に読み込もうとすると表示が遅くなってしまいます。’scriptタグにdefer属性を付与することで非同期化させることが可能です。他には、画像の遅延読み込みの指示を出す(loading=”lazy”)も有効となります。極端に遅くするとcssが適用されずhtmlのみで表示された無機質なページとなる可能性もあるので注意です。loading=”lazy”と記述する。最初から全ての画像が読み込まれるのではなく、スクロールと共に画像が読み込まれる形式に変更される。url(“〇〇”);と記述。外部のCSSファイルを読み込み利用することを指します。不要となったコードを削除する長く運用しているサイトの場合、振り返ってみると不要な要素が見つかるでしょう。エディタを用いて消去していくことも出来ますが、何千行もあるCSS・JavaScriptの中身を手作業で削るとなるとかなりの時間が掛かります。画像と同じく、css/javascriptファイルを圧縮できるツールも存在するので活用しましょう。Diff上記3種以外にSass、json、CSV形式にも対応レンダリングの速度を低下しないようにする参考:https://web.dev/howbrowserswork/レンダリングとは、指示されたコンテンツをブラウザ画面に表示することです。ホームページの見た目を整える役割があります。htmlの記述次第でもブラウザの表示速度が下がる可能性があります。以前はJavaScriptをheadタグのなかに記述することが多かったと思いますが、近年ではbodyの閉じタグ直前への記述が推奨されています。headタグ内への記述が推奨されないのか?答えはブラウザの表示速度の低下が主な原因です。headタグの中に外部JavaScriptの読み込みがあると、先にJavaScriptの読み込みと実行がされてしまいます。基本的にどのホームページでも今回取り上げたプロセスを使用したりレンダリングを改善することで、サイトを高速化させてパフォーマンスの向上に繋がるかと思います。ページの読み込み速度が与える影響ホームページの読み込みを高速化することで得られるメリットは多くあります。読み込みに時間が掛かるとそのページから離れてしまうユーザーが大半と言われています。一般的にWebページが表示されるまで3秒以上の時間が経過するとユーザーがそのページを見ることなくブラウザバックをする確率が高くなると昔から言われています。このように読み込み速度はWebページにとって重要な要素の1つです。Insights」がおすすめです。上述の通り、3秒以内を目標としてホームページ作りをしていきましょう。パソコンスキルのソフトキャンパス。