画像読み込みの最適化

遅延ロードについて話そう
Tilda では、すべてのウェブサイトで遅延ローディングがデフォルトで有効になっている。これにより、モバイルデバイスでもウェブサイトの読み込みが速くなります。
遅延ローディングの実装は、Tilda のウェブサイトを最適化し、より高速なローディングを実現するための新たなステップです。テクノロジーは常に進化しており、私たちは常に読み込みの高速化に取り組んでいます。
Lazy Loadは、表示領域外での画像の読み込みをブロックするプラグインです。つまり、ユーザーがページをスクロールする際に画像が読み込まれます。その仕組みを見てみましょう。

Tilda http://project130385.tilda.ws/

ブラウザの開発者コンソールを開き、設定で低速模倣(3G)を有効にし、ページを更新します
DOMContentLoaded:628ミリ秒
このパラメータは、基本的なスクリプトとHTMLがすべてロードされたことを示し、ユーザーがすぐにページを表示できるようにします。

Finish: 1.65 seconds
このパラメータは、ウェブサイト全体のロードにかかった時間を示します。

転送されました:263KB
このパラメータは、転送されたデータ量(バイト)を示します。
この数字はとても楽観的に見えますが、何事も相対的なものですよね?サイト設定 → もっと見る で、「画像の遅延読み込みを無効にする」チェックボックスを選択します。もう一度ページをテストしてください。
DOMContentLoaded:697ミリ秒
このパラメータは、すべての基本スクリプトとHTMLコードがロードされたことを示します。

Finish: 10.14秒
このパラメータは、ウェブサイト全体のロードにかかった時間を示しています。

転送されました:1.8MB
このパラメータは、転送されたデータ量(バイト)を示します。
ページ全体のロード時間と転送データ量が倍増している。

PageSpeed Insightsを使って他に何が分かるのか見てみよう。最適化をオフにしたページを確認してみよう。
では、画像のレイジー・ロードを有効にしてみよう:
Lazy Loadは、ユーザーから見えない画像をブロックし、
、ウェブサイトの読み込みを高速化します。
ページ上部の表示を妨げるJavaScriptとCSSコードを削除するには?
この質問は、テストを受けた後によく出てきます。グーグルは、ページ上部にスクリプトを使用しないようアドバイスしている。
理論的には、スクリプトを削除することができる。しかし、これは自動分析であり、正確ではないことを念頭に置く必要があります。これまで見てきたように、レイジー・ロードを有効にするとページの読み込みが非常に速くなる。解析の結果、スクリプトを削除すると0.3秒節約できることがわかりましたが、ほとんど違いはありません。

ですから、ページ上部のスクリプトにあまり反応しない自動テストの結果は無視することをお勧めします。

ところで、グーグルはどうやって独自のテストをパスしているのだろうか?
おっと!
製造元
Tilda