Tildaでは、遅延読み込みはすべてのWebサイトでデフォルトで有効になっています。これにより、モバイルデバイスでもWebサイトの読み込みが速くなります。
遅延読み込みの実装は、読み込みを高速化するためにTilda上のWebサイトを最適化するためのさらに別のステップです。テクノロジーは常に進化しており、読み込みをさらに高速化するために常に取り組んでいます。
Lazy Loadは、画像が表示領域外に読み込まれるのをブロックするプラグインです。つまり、ユーザーがページをスクロールすると画像が読み込まれます。それがどのように機能するかを見てみましょう。
通常のTildaテンプレートを選択して公開しましょう。http://project130385.tilda.ws/
ブラウザの開発者コンソールを開き、設定で低速模倣(3G)を有効にして、ページを更新します。
通常のTildaテンプレートを選択して公開しましょう。http://project130385.tilda.ws/
ブラウザの開発者コンソールを開き、設定で低速模倣(3G)を有効にして、ページを更新します。
DOMコンテントロード:628ミリ秒
このパラメーターは、すべての基本スクリプトと HTML が読み込まれ、ユーザーがページをすぐに表示できることを示します。
フィニッシュ:1.65秒
このパラメーターは、Web サイト全体の読み込みにかかった時間を示します。
転送済み: 263KB
このパラメーターは、転送されたデータの量 (バイト単位) を示します。
このパラメーターは、すべての基本スクリプトと HTML が読み込まれ、ユーザーがページをすぐに表示できることを示します。
フィニッシュ:1.65秒
このパラメーターは、Web サイト全体の読み込みにかかった時間を示します。
転送済み: 263KB
このパラメーターは、転送されたデータの量 (バイト単位) を示します。
これらの数字は非常に楽観的に見えますが、すべてが相対的ですよね?[サイトの設定] → [詳細] に移動し、[画像の遅延読み込みを無効にする] チェックボックスを選択します。ページをもう一度テストします。
DOMコンテントロード:697ミリ秒
このパラメーターは、すべての基本的なスクリプトと HTML コードが読み込まれたことを示し、ユーザーがページをすぐに表示できることを意味します。
フィニッシュ:10.14秒
このパラメーターは、Web サイト全体が読み込まれるまでにかかった時間を示します。
転送:1.8メガバイト
このパラメーターは、転送されたデータの量 (バイト単位) を示します。
このパラメーターは、すべての基本的なスクリプトと HTML コードが読み込まれたことを示し、ユーザーがページをすぐに表示できることを意味します。
フィニッシュ:10.14秒
このパラメーターは、Web サイト全体が読み込まれるまでにかかった時間を示します。
転送:1.8メガバイト
このパラメーターは、転送されたデータの量 (バイト単位) を示します。
全体的なページ読み込み時間と転送されるデータ量は何倍にもなりました。
PageSpeed Insights を使用して他に何が学べるか見てみましょう。最適化をオフにしたページを確認してみましょう。
PageSpeed Insights を使用して他に何が学べるか見てみましょう。最適化をオフにしたページを確認してみましょう。
それでは、画像の遅延読み込みを有効にしましょう。
遅延ロードは、ユーザーに表示されない画像をブロックします。
これにより、Webサイトの読み込みが速くなります。
これにより、Webサイトの読み込みが速くなります。
ノート
ページ上部の表示を妨げている JavaScript および CSS コードを削除するにはどうすればよいですか?
この質問は、試験を受けた後によく出てきます。 Google は、ページの上部でスクリプトを使用しないことをお勧めします。
理論的には、スクリプトを削除できます。ただし、これは自動分析であり、正確ではないことに注意してください。これまで見てきたように、Lazy Load を有効にすると、最適化する必要のあるすべてを最適化したため、ページが非常に速く読み込まれます。分析によると、スクリプトを削除すると 0.3 秒節約できますが、ほとんど違いはありません。
そのため、ページ上部のスクリプトへの反応が非常に悪い自動テストの結果を無視することをお勧めします。
ところで、Google はどのようにして独自のテストに合格するのでしょうか?
そのため、ページ上部のスクリプトへの反応が非常に悪い自動テストの結果を無視することをお勧めします。
ところで、Google はどのようにして独自のテストに合格するのでしょうか?
おっと！
