サイトの表示スピードを改善する2つの方法

2020-06-11

(LastUpdated: 2020-06-11)

サイトの表示速度を改善する方法をお伝えします。

サイトのスピード改善は大きく二つの方法があります。

一つは、体感速度を改善 させる方法。もう一つは、ロードのスピードそのものを改善 することです。

一見、どちらも同じように感じると思いますが、全く別物です。以下で説明していきます。

一見複雑そうに見えるサイトの軽量化ですが、非常にシンプルです。中でも画像類の軽量化が占める割合は、とても大きいと言えます。

HTMLが読み込まれてから表示されるまでの流れ

シャツの男性がホワイトボードにフロー図を書いている姿まずはHTMLの動きを理解すると、スムーズです。画面が表示されるのは、HTML上に書かれた要素が読み込まれた後です。テキストや画像、CSSやJavascriptなど、色々な要素で構成されていますが、その全てが読み込まれてから画面に表示されます。

つまり、重い画像ファイルなどがあった場合、それを読み込み終わるまでは全ての要素を表示してくれません。

よく、計測ツールを</body>タグの直前に置きますが、これによりページが全て読み込まれて表示される時に計測を開始できるためです。

夕刻にランニングする女性のシルエット

体感速度の改善とは、ユーザーが「待ち時間」と感じる時間を短くすることです。実際のファイルサイズなどは変わらないのですが、ロードのタイミングをずらすなどの工夫をします。

ページ全体のデータをロード中に、トップに表示させる要素をだけを優先して表示させる ことで、空白の時間を減らし、ユーザーの離脱を防ぎます。

Lazy Loadはその代表的なもので、初期アクセス時に画面外にある画像は、読み込ませません。

CSSはインラインが最も早く処理されるので、ユーザーがアクセスしてきた時に表示されるエリアだけでもインラインにしておくと、ストレスを軽減することが期待できます。

ごく単純な解決策としてローディング画像を置くというものがあります。しかし、これ自体は、問題を解決するものではないと思うのです。ユーザーからすれば、本質的に空白と変わらないからです。

ローディングの表示は、あくまでローディングを示すものであり、ユーザーの求めるコンテンツは表示されていないのです。

よって、まずはコンテンツを如何に早く表示させるかを最初に取り組むべきでしょう。

コーディング中のラップトップディスプレイの拡大画像

基本的にはひたすら減量します。画像は圧縮し、CSSの記述を最小限にとどめます。また、jsも不要なものがないか、精査していきましょう。

画像類をSVGにして、インライン化することで軽量化が大幅に進みます。

サービースワーカーは少し技術レベルが必要ですが、有効な一案となります。

また、ハードルは上がりますが、インフラの見直しなども大きな改善に繋がるものと思います。

山の上で四人のストーム・トルーパーたちがポーズを決めて記念撮影中 webpなどの次世代画像フォーマットを使う方法があります。 iOSのサファリなど、対応していないブラウザが存在しており、安易に手が出せません。

未対応ブラウザ向けに、フォールバック画像(jpgなど従来型画像フォーマット)を提供する仕組みを用意する必要があります。

シンプルに、十分に圧縮されたjpgであれば、問題がない場合もあります。

また、web上のコンバーターなどを通して変換したことで、サイズそのものが大きくなるケースがありました。

次世代画像フォーマットについては、自身のプロジェクトの用途とマッチしているのかを見極めましょう。