ヘルプセンター
ヘルプセンター
スタート
Tilda の仕組み
新しいページを作成する
ページをコピーする
ページを転送する
ページの並べ替え
サイト設定
ドメイン名の購入
ドメイン名の接続
DNSの設定
カスタムドメインのエラーのトラブルシューティング
ホームページ
ヘッダーとフッター
ウェブサイトのフォントを設定する
コード輸出
プロジェクト移管
無料tilda.ws サブドメイン
カラー設定
URLリダイレクトの作成
HTTPSの設定
ページフォルダー
ページ編集
ナビゲーション・メニューの追加
アンカーと内部リンク
モバイルデバイスでの視聴
HTMLコードを埋め込む
グーグルマップを追加
多言語ウェブサイトの作成
オンライン出版用の画像を準備する
カバーを投げる
ノン・ブレイキング・スペース&ソフト・ハイフン
ページ出版
フィードバック・ウィジェットを追加する
フェイスブックでプレビュー
コメント欄の追加
インスタグラムのフィードを埋め込む
投稿一覧またはインデックスページ
オンラインストアと支払い
オンラインストアと決済処理
オンラインストアに商品を追加する
ショッピングカートの設定
商品の直接販売
支払いシステムの割り当て
ストライプの設定
ペイパルの設定
2Checkoutの設定
注文通知の送信
オンライン決済システムなしで販売する
単一製品の販売
製品バリエーションの追加
配送オプション
補完製品
プロモコード(割引)を作成する
フォーム
データ取得フォームの設定
データ収集フォーム
電子メール
グーグル シート
メールチンプ
グーグルフォーム
センドグリッド
センディンブルー
セルジー
コンモ
パイプドライブ
Zoho CRM
トレロ
テレグラム
スラック
ザピア
メーラーライト
ノーティオン
セールスフォース
ハブスポット
ウェブフック
カスタムスクリプト
フォームのミスを避ける
マンデードットコム
アナリティクス
ウェブサイト統計の追跡
グーグル・アナリティクス
グーグルタグマネージャー
目標達成率の提出
SEO
オンライン・プロモーション
Zero Block
カスタムブロックの作成
レスポンシブデザイン
キーボードショートカット一覧
アニメーション
ステップ・バイ・ステップ・アニメーション
Figmaからのインポート
メールキャンペーンビルダー
電子メールの作成、編集、送信
プランと請求
プラン
価格と支払い
自動購読更新のキャンセル
入金確認
Tilda ビジネス・プランへのアップグレード
特別プラン
開発者向け
HTMLコードを埋め込む
コード輸出
ウェブフック
Tilda API
WordPressプラグイン
tilda ヘルプセンター
画像読み込みの最適化
遅延ロードについて話そう
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