回答者：エンジニア
“比較的すぐできる”ページ高速化TIPS（HTML編）
皆さんがサイトを閲覧する際、「1番」ではなく2番目、3番目に気になることはなんでしょうか。
デザイン、フォントサイズ、動き、もちろんコンテンツの内容……他にもあるでしょうが、私個人としては、ページにアクセスしてコンテンツがすべて表示されるまでのスピードです。
コンテンツを把握するまでの時間があまりに長いと、よほど興味のあるページでない限りタブを閉じてしまいます。
最近では、時間短縮のため倍速でドラマや映画などを見る人も増えてきましたが、そういったせっかちな現代人に向けて、自社サイトの表示速度を改善する必要がある、と感じた方も多いのではないでしょうか。
すべてではありませんが、コーディングをする際に、ちょっとずつ、あちこちを気にすることで、表示速度が改善する可能性はあります。
「（サイト表示が遅くて）直帰率が増える」ということは、すなわちSEOへも影響するので、自分は別に倍速で生きているせっかちさんじゃないし……とは思わず、一度、改善について考えてみてはいかがでしょうか。
とにかく読み込むファイル数とそれぞれのファイルサイズを減らす
ユーザーがページにアクセスしてから、ブラウザがページのコンテンツをすべて表示するにはページ内にあるHTMLや画像、CSSやJavaScriptファイルをダウンロードする必要がありますが、これは性質上、同時に複数、ダウンロードすることはできません。
常にシングルタスクです。
そのため、ひとつひとつのファイルがどんなに小さくてもファイルの数ぶん、ダウンロードを繰り返し、表示のための時間はどんどん長くなっていきます。
ダウンロードするファイルの「数」と「サイズ」は、少なければ少ないほど表示速度が上がるという考えは間違いではないでしょう。減らす手段はいろいろありますが、例えば下記のようなものがあります。
●動画ファイルを除き、ページ容量の多くを占める「画像ファイル」を最適化、圧縮する
- アイコンはSVGファイルにする
- 写真はPNGではなくJPGファイルにする
- グラデーションを使っていないロゴや地図などはPNGファイルにする。
- 透過しなくてもよいPNGファイルは、形式を「PNG24」などではなく「PNG8」にする
など、その画像に合った拡張子を選べると無駄な容量が減るため、ページ容量のダイエットになります
●画像圧縮ツールを使って解像度を保ったままファイルサイズを小さくする
JPEGmini：https://www.jpegmini.com/
Tiny PNG：https://tinypng.com/
●複数あるCSSファイルはひとつにまとめる
ご存知の通り、CSSはあとに書いたものが上書きされるので、まとめる際は順番に気をつけてください。
ファーストビュー内のスタイルは外部CSSファイルではなく、別途HTMLの<head>の中に直接記入することでより表示が高速になります。切り分けずにすべて直接記入する方法もありですが、管理上、煩雑になりがちなのでファーストビューだけにするのがおすすめです。
●小さいアイコン画像などは複数枚を1枚にまとめるCSSスプライト、画像をテキスト化するBase64エンコードなどといった手法を試す
●HTMLやCSSをminify化（圧縮）する
●CDNを活用する
●大きく見せたい画像は遅延ロードを試す
ブラウザは現在の画面より下にある画像もダウンロードしようとするのでスクロール領域に入って初めて画像を読み込むプラグインがありますので、そういったものを試してみるのもよいでしょう。
●ブラウザのキャッシュ期間を長くする（.htaccessを編集できる環境のみ）
●不要な計測タグは削除する
今回ご紹介したのは、「ダウンロードするファイル数・サイズを減らす」方法の一部です。実践することをおすすめしますが、まずはPageSpeed Insightsなどで、現状の表示速度を調べてみるとよいでしょう。問題点が可視化され、俯瞰して考えることができるようになりますので、ぜひ一度試してみてください。
以下も閲覧しています
