Webページの表示速度改善への取り組み

HTML
PageSpeed Insights

Webページの表示速度はHTMLコーディングやプログラム処理で変わります。体感的に遅いと感じるのは論外ですが、Webページの軽さはユーザー体験としても大切です。Webページ表示の速さは検索順位のアルゴリズムの一つとなるので、HTMLコーダーにとって当然取り組むべきことです。

Webページの表示速度はGoogleのページスピードインサイトを使うとチェックできます。チェック後の改善レポートも表示されるので活用しましょう。

▼PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/

画像の遅延読み込みと適切な画像サイズ

表示速度改善において画像対応は必須です。画像対応として最低限取り組むべき事項は2つです。画像の遅延読み込みと画像サイズを適切とすることです。

画像遅延読み込みとは画面上に表示されている画像のみを読み込ませることです。画面上に表示されていない画像は読み込みをしません。スクロールをして画面上に表示されたタイミングで読み込みをします。不要な画像読み込みが発生しないので表示速度が変わったことが実感できるでしょう。

画像遅延読み込みはGoogle Chromeはバージョン76からネイティブに対応しています。ネイティブ対応しているので、IMGタグのloading属性を追加すれば自動的に画像が遅延読み込みをされます。

loading=“lazy"

ただし、Chrome以外のブラウザは非対応なので別途対応する必要があります。この場合は画像遅延読み込みのJavaScriptを使用します。具体的な実装方法についてはこちらをご覧ください。

▼「オフスクリーン画像の遅延読み込み」への対処方法
https://blogs.itmedia.co.jp/webnoma/2019/01/28.html

画像サイズについては表示サイズに合わせて適切にリサイズすべきです。適切な画像サイズはデスクトップとスマートフォンで異なります。デスクトップの場合、表示サイズ100%が望ましいです。対してスマートフォンの場合ディスプレイの解像度が高いので、表示サイズの2倍はないと画像が眠い印象となります。一つ一つリサイズできる場合は使用サイズの2倍で用意するのをお勧めします。その上で画像を圧縮して軽くするとより最適化できます。

画像圧縮についてはこちらのページの「⑨画像を最適化する」をご覧ください。

▼PageSpeed Insightsで合格点100点を取る方法/⑨画像を最適化する
https://www.web-ma.co.jp/column/crawlability/98.html

HTMLタグのネストの深さ、インデント削除、コメント文

当たり前のことですが、HTMLのファイルサイズは軽い方が表示が速いです。HTMLのファイルサイズはコード量で変わるので、HTMLタグのネストが深くなれば当然ファイルサイズも増えます。だからHTMLタグのネストは浅い方が軽くなります。また、空のHTMLタグとか不要な記述もない方が良いです。

ただし、HTMLのファイルサイズ縮小は画像最適化よりもインパクトはありません。ですが、クオリティの高いHTMLコーディングを目指すのでしたら必須と考えます。

また、HTMLタグのインデントも若干ですがファイルサイズ増加に繋がります。ですが、HTMLから改行タグも取り除いてしまうと運用保守に影響するのでお勧めしません。運用保守・メンテナンス性も大切なことなので、ファイルサイズ縮小はほどほどに取り組むことが良いでしょう。

コメント文は適切に使用した方が良いです。HTMLタグのコメントを使うと見た目は変わらなくてもHTMLファイル上に残ります。しかし、PHPのコメントはHTMLソース上に記述されないので、こちらの方が若干軽くできます。

CSSとJavaScriptの縮小

CSSとJavaScriptのファイルも縮小できます。不要な記述とコメント文を削除することで無駄を省くことができるのですが、削除し過ぎると内容が把握しづらくなります。そのためファイル縮小を優先し過ぎずに適度にコメントを使用する方が管理しやすいです。

CSSは見出しを設けてブロックごとに管理すると把握しやすくなります。また、更新日も入れておくと後でバージョン把握もしやすいです。

JavaScriptは他のサイトで使用しているものをそのまま使うのではなく、必要な処理のみ使用すると余計な記述を省くことができます。

表示コンテンツの優先順位

画面上に表示されないコンテンツのCSSの読み込は無駄な通信となります。画面表示分のCSSだけ読み込むようにすると画面表示がスピードアップできます。ただし、HTMLコーディング方法を変える必要があるので、コーダーとは事前に打ち合わせをしておく必要があります。CSSの管理方法から見直すことになりますので。

JavaScriptは非同期通信にすることも表示速度改善となります。非同期通信の場合、JavaScriptの処理結果を待たずにWebページを表示します。同期通信の場合はJavaScriptの記述位置で処理終了を待ちます。そのためJavaScriptで重い処理があると表示完了まで時間がかかります。

システムのSQLパフォーマンス問題

エンジニアが行う処理もWebページの表示速度に影響します。これは必ずしもHTMLコーダーが解決できる問題ではないのですが、システムがボトルネックとならないように連携を取れる体制を構築することが望ましいです。例えば以下ページではSQLパフォーマンスによるボトルネックについて解説しています。

▼なぜ、SQLは重たくなるのか?──『SQLパフォーマンス詳解』の翻訳者が教える原因と対策
https://employment.en-japan.com/engineerhub/entry/2017/06/26/110000

西部俊宏
執筆者:西部俊宏
株式会社Webの間代表取締役。上場企業でのSEOやWebサイト構築実績多数。ECサイトのカスタマイズ経験も多数あり。
会社概要はこちら

「ECサイトをより便利にしたい」「もっと集客したい」ECカスタマイズはお任せください