ヘルプセンター
ヘルプセンター
スタート
Tilda の仕組み
新しいページを作成する
ページをコピーする
ページを転送する
ページの並べ替え
ドメインとHTTPS
ドメイン名の購入方法
ドメイン名の設定方法
DNSの管理方法Tilda
レジストラ側でのDNS設定方法
カスタムドメインのエラー
HTTPSの設定方法
ドメインの所有権を確認する方法
カスタムドメインメールの設定方法
サイト設定
サイト設定
無料tilda.ws サブドメイン
ドメイン名の接続
HTTPSの設定
ヘッダーとフッター
ウェブサイトのフォントを設定する
ウェブサイトの配色とデザイン
ホームページ
ページフォルダー
ページ編集
ページ編集
ナビゲーション・メニューの追加
アンカーと内部リンク
ページ アクション
ページ出版
URLと他のページへのリンク
HTMLコードを埋め込む
フォーム
カバーを投げる
モバイルデバイスでの視聴
SEO
ポップアップ
オンライン出版用の画像を準備する
多言語ウェブサイトの作成
フィードバック・ウィジェットを追加する
ソーシャルメディアとメッセンジャーでのページプレビュー
ブログの作り方
コメント欄の追加
目標達成率の提出方法
検索バーの追加方法
ノン・ブレイキング・スペース&ソフト・ハイフン
このページをPDFとして保存
ページテンプレートの作成方法
マイクロデータマークアップの追加方法
ツールチップ
投稿一覧またはインデックスページ
クリック可能な電話番号とメールアドレス
固定の入力形式を設定する方法
スクロールや読み込み時のマイクロアニメーションの作成方法
オンラインストアと支払い
オンラインストアと決済処理
オンラインストア カスタマーアカウント
見込み客
オンラインストアに商品を追加する
製品バリエーションの追加
在庫切れのお知らせ
商品をお気に入りに追加する
オンラインストアのカテゴリとサブカテゴリの作成
ダイナミック・ディスカウントの設定方法
プロモコード(割引)を作成する
ショッピングカートの設定
商品の直接販売
支払いシステムの割り当て
ストライプの設定
ペイパルの設定
ベリフォンのセットアップ
Selling a Single Product
配送オプション
注文通知の送信
製品カタログのアイテムをインポートおよびエクスポートする方法
フォーム
データ収集フォーム
データ取得フォームの設定
電子メール
グーグル シート
メールチンプ
グーグルフォーム
センドグリッド
センディンブルー
セルジー
コンモ
パイプドライブ
Zoho CRM
トレロ
テレグラム
スラック
ザピア
メーラーライト
ノーティオン
セールスフォース
ハブスポット
ウェブフック
フォームのミスを避ける
マンデードットコム
アナリティクス
ウェブサイト統計の追跡
オンラインストア統計へのアクセス方法
目標達成率の提出
グーグル・アナリティクス
グーグルタグマネージャー
Facebookピクセル
SEO
オンライン・プロモーション
Zero Block
カスタムブロックの作成
レスポンシブデザイン
Zero Block内のカスタムモジュラーグリッド
キーボードショートカット一覧
アニメーション
ステップ・バイ・ステップ・アニメーション
アニメーションのトリガー
Figmaからのインポート
ベクターエディター
メールキャンペーンビルダー
電子メールの作成、編集、送信
プランと請求
プラン
自動購読更新のキャンセル
価格と支払い
入金確認
Tilda ビジネス・プランへのアップグレード
特別プラン
開発者向け
コード輸出
Tilda API
HTMLコードを埋め込む
ウェブフック
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