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