Tilda ウェブサイトを高速化する方法
インターネット上では、ウェブサイトの読み込みに特別な注意が払われています。そのため、ウェブページの読み込み速度に取り組むことは、当社にとって日常的な作業となっています。私たちは新しい技術を導入し、技術的なプロセスを最適化しています。アップデートの一部はユーザーの目に見えますが、一部は見えません。これは現在進行中のプロセスであり、私たちはすでに成し遂げた進歩を誇りに思っています。
この記事では、既存のTilda ツールを使用し、設定を変更することで、ウェブサイトの読み込み速度を向上させる方法について、簡単なチェックリストを提供します。各ポイントを詳しく説明しますので、ご自身でウェブサイトの設定を調整し、さらに読み込みを速くすることができます。
この記事では、既存のTilda ツールを使用し、設定を変更することで、ウェブサイトの読み込み速度を向上させる方法について、簡単なチェックリストを提供します。各ポイントを詳しく説明しますので、ご自身でウェブサイトの設定を調整し、さらに読み込みを速くすることができます。
ウェブサイト高速化のためのチェックリスト
- ウェブサイトがLazy Loadを有効にしていることを確認する。
- ページ上の画像を手動で最適化する
- システムフォントを使用するか、設定でインスタント・コンテンツ・レンダリングを有効にする。
- ウェブサイト上のすべてのサードパーティのスクリプトとコードを無効にする。
- 遅延カウンターの初期化をオフにしない
- ページの長さを短くする
- ページ上部の画像数を減らす
- ウェブサイトがエクスポートされているか確認する
各ポイントを説明する前に、ページの読み込み速度を評価する方法を見てみましょう。
ページの読み込み速度を見積もる方法
Tilda ユーザーの多くは、GoogleのPageSpeed Insightsを使ってウェブサイトのページ読み込み速度をチェックしている。このサービスは、モバイルデバイスとデスクトップ上のウェブサイトの読み込みをシミュレートし、効率性の評価を割り当てる.
これは従来の技術的なツールであり、実際の読み込み速度を反映しているとは限らない。私たちの経験では、Chromeが収集し、開発者パネルに表示されるデータは、PageSpeed Insightsシミュレーションで得られるものよりもはるかに優れています。そのため、私たちはPSIに全面的に依存することをお勧めしていません。
ウェブサイトの実際のページ読み込み速度を監視することが、より良い選択肢です。Chrome のデベロッパーツールでこれを行うことができます。コンソール（Option + Ctrl + I / Alt + Cmd + I）を開き、デバイスツールバーの切り替え → ネットワークタブ → 評価したいページをリロードします。最も重要なパラメータはDOMContentLoadedで、これはページ構造の読み込みにかかる時間を示し、Loadはすべてのテーブルとスタイルを含むページの読み込みにかかる時間を示します。
ウェブサイトの実際のページ読み込み速度を監視することが、より良い選択肢です。Chrome のデベロッパーツールでこれを行うことができます。コンソール（Option + Ctrl + I / Alt + Cmd + I）を開き、デバイスツールバーの切り替え → ネットワークタブ → 評価したいページをリロードします。最も重要なパラメータはDOMContentLoadedで、これはページ構造の読み込みにかかる時間を示し、Loadはすべてのテーブルとスタイルを含むページの読み込みにかかる時間を示します。
Tilda テンプレートyourbeststylist.tilda.wsの実際のページ読み込み速度を、内蔵のChromeブラウザバーで評価し、DOMContentLoadedとLoadパラメータをチェックします。
この方法も完璧ではありません。ツールバーの高速3Gシミュレーションでは、モバイルデバイスでのウェブサイトの読み込みを明確かつ正確にシミュレーションできないため、実際のデバイスでの読み込み速度を確認し、データに基づいて結論を出す必要があります。
Tilda ウェブサイトの高速化
Tilda には、ページの読み込みを高速化するための最適化が数多く実装されている。コードやサードパーティのスクリプトがない基本的なウェブサイトはすぐにロードされます.あなた自身のために見ることができます：Tilda テンプレートを選択し、PageSpeed Insightsを使用してページの読み込み速度を参照してください。
実際のウェブサイトで確認してみましょう：私たちは、Tilda テンプレートライブラリからテンプレートのいずれかを選択し、テンプレートから個人スタイリストアニーのウェブサイトを作成しました。PageSpeed Insightsを使用して、その読み込み速度を推定してみましょう。
実際のウェブサイトで確認してみましょう：私たちは、Tilda テンプレートライブラリからテンプレートのいずれかを選択し、テンプレートから個人スタイリストアニーのウェブサイトを作成しました。PageSpeed Insightsを使用して、その読み込み速度を推定してみましょう。
もちろん、読み込み速度はウェブサイトの複雑さ、特定のブロックの有無、ウェブサイトの読み込みを遅くする可能性のあるサードパーティのウィジェット、カウンター、統計、その他のアドオンを接続しているかどうかによって異なります。
この記事は、あなたがこの問題を理解し、読み込みの速いウェブサイトを作成するのに役立つ設定を識別する方法を学ぶことができるように書きました。しかし、重要な決断を下さなければなりません-チェックリストのヒントをすべて適用することは、ウェブサイトの読み込み速度だけでなく、デザインにも影響します。
この記事は、あなたがこの問題を理解し、読み込みの速いウェブサイトを作成するのに役立つ設定を識別する方法を学ぶことができるように書きました。しかし、重要な決断を下さなければなりません-チェックリストのヒントをすべて適用することは、ウェブサイトの読み込み速度だけでなく、デザインにも影響します。
チェックリストの説明ウェブサイトのスピードアップ
1.あなたのウェブサイトがLazy Loadを有効にしていることを確認してください。
レイジー・ロードは、閲覧者がページをスクロールする際に、画像を一度に読み込まず、徐々に読み込ませる機能です。この設定はデフォルトで有効になっており、ウェブサイトのパフォーマンスに直接影響します。
カスタムウェブサイトを作成するデザイナーが、何らかの理由でLazy Loadをオフにしているのをよく見かけます。
あなたのウェブサイトでLazy Loadが有効になっていることを確認してください。これを行うには、サイト設定 → 詳細に移動し、"Disable Lazy Load for images "ボックスのチェックが外れていることを確認します。また、Zero Block の画像と図形の設定で、この機能が無効になっていないか確認してください。
カスタムウェブサイトを作成するデザイナーが、何らかの理由でLazy Loadをオフにしているのをよく見かけます。
あなたのウェブサイトでLazy Loadが有効になっていることを確認してください。これを行うには、サイト設定 → 詳細に移動し、"Disable Lazy Load for images "ボックスのチェックが外れていることを確認します。また、Zero Block の画像と図形の設定で、この機能が無効になっていないか確認してください。
2.ページ上の画像を手動で最適化する
レイジー・ロードと手動による画像の最適化は、あなたが最適化できる最も重要な2つのことです。画像はウェブサイト上で最も重い要素であるため、ページの読み込み速度の70%は画像に依存します。
Tilda 、独自の機能-AdaptiveImage Loading（アダプティブ・イメージ・ローディング）があります。これは特別な画像処理技術で、ユーザーのデバイスに応じて、ウェブサイト上のコンテナのサイズに合わせて画像を拡大縮小します。また、画質を損なうことなく画像を圧縮する次世代フォーマットであるWebPに画像を変換するため、ウェブサイトの読み込みが速くなります。この変換は、追加の操作を行わなくても自動的に行われます。
場合によっては、"オンザフライ "での自動最適化は手動での画像圧縮とは比較になりません。ページの読み込み速度が重要な場合は、TinyPNGを使用して画像を最適化することをお勧めします。TinyPNGは、ロスレスデータ圧縮技術を使用して、目に見える品質を損なうことなく画像を圧縮する無料のオンラインサービスです。
また、デスクトップ版とモバイル版で異なるブロックを追加し、サイズや重さの異なる画像をアップロードする方法もあります。例えば、ウェブサイトのカバーページにそれを行うことができます。
Tilda 、アルゴリズムは次のようになる。ページが読み込まれると、画像を「その場で」最適化し、最適化された画像が元の画像よりも容量を取らない場合は、自動的にそれを表示する。これは、キャッシュがウォームアップしているときや、システムが必要な解像度の画像を事前に準備するためにトラフィックの統計情報を収集しているときに起こる可能性があります。手動で最適化しても害はありませんし、場合によっては画像を最適化してページの読み込み速度を上げるのに役立つことさえあります。
Tilda 、独自の機能-AdaptiveImage Loading（アダプティブ・イメージ・ローディング）があります。これは特別な画像処理技術で、ユーザーのデバイスに応じて、ウェブサイト上のコンテナのサイズに合わせて画像を拡大縮小します。また、画質を損なうことなく画像を圧縮する次世代フォーマットであるWebPに画像を変換するため、ウェブサイトの読み込みが速くなります。この変換は、追加の操作を行わなくても自動的に行われます。
場合によっては、"オンザフライ "での自動最適化は手動での画像圧縮とは比較になりません。ページの読み込み速度が重要な場合は、TinyPNGを使用して画像を最適化することをお勧めします。TinyPNGは、ロスレスデータ圧縮技術を使用して、目に見える品質を損なうことなく画像を圧縮する無料のオンラインサービスです。
また、デスクトップ版とモバイル版で異なるブロックを追加し、サイズや重さの異なる画像をアップロードする方法もあります。例えば、ウェブサイトのカバーページにそれを行うことができます。
Tilda 、アルゴリズムは次のようになる。ページが読み込まれると、画像を「その場で」最適化し、最適化された画像が元の画像よりも容量を取らない場合は、自動的にそれを表示する。これは、キャッシュがウォームアップしているときや、システムが必要な解像度の画像を事前に準備するためにトラフィックの統計情報を収集しているときに起こる可能性があります。手動で最適化しても害はありませんし、場合によっては画像を最適化してページの読み込み速度を上げるのに役立つことさえあります。
3.システムフォントを使用するか、設定でインスタントコンテンツレンダリングを有効にする。
このカテゴリの最適化は、重さと重要性の点で2番目に来る。ArialやGeorgiaなどのシステムフォントは、どのコンピューターでも利用できます。また、UbuntuやRobotoのようなプラグイン可能なフォントもあります。
ウェブサイトをできるだけ高速化したい場合は、カスタムフォントを使用せず、代わりにシステムフォントのいずれかを選択することをお勧めします。
ブランディングやコーポレート・アイデンティティを使用する必要がある場合は、新機能のインスタント・コンテンツ・レンダリングをご利用ください。この設定により、ブランドフォントが読み込まれているかどうかに関係なく、ウェブサイトにコンテンツを表示することができます。ウェブサイトにはまずシステムフォントが表示され、数秒後にフォントが読み込まれると、テキストは再びブランドフォントでレンダリングされます。
この機能はデフォルトでは有効になっていません。読み込みのスムーズさやビジュアル面よりも読み込み速度を重視する場合は、サイト設定 → フォントと色 → 詳細設定でこの機能を有効にしてください。
ウェブサイトをできるだけ高速化したい場合は、カスタムフォントを使用せず、代わりにシステムフォントのいずれかを選択することをお勧めします。
ブランディングやコーポレート・アイデンティティを使用する必要がある場合は、新機能のインスタント・コンテンツ・レンダリングをご利用ください。この設定により、ブランドフォントが読み込まれているかどうかに関係なく、ウェブサイトにコンテンツを表示することができます。ウェブサイトにはまずシステムフォントが表示され、数秒後にフォントが読み込まれると、テキストは再びブランドフォントでレンダリングされます。
この機能はデフォルトでは有効になっていません。読み込みのスムーズさやビジュアル面よりも読み込み速度を重視する場合は、サイト設定 → フォントと色 → 詳細設定でこの機能を有効にしてください。
インスタント・コンテンツ・レンダリング機能は、デフォルトでは有効になっていません。ウェブサイトの読み込み速度を上げたい場合は、サイト設定で有効にできます。
4.ウェブサイト上のすべてのサードパーティのスクリプトとコードを無効にする。
チャットやカウンターなど、サードパーティのスクリプトやコードが接続されていないか確認してください。Tilda では、T123ブロックを介してそれらを接続することができます。したがって、このブロックがページ上またはウェブサイトのヘッダーにあるかどうかを確認してください。
私たちの観察によると、95％のケースで、ウェブサイトに追加されたコードはローディング戦略に最適化されておらず、ページのレンダリングが著しく遅くなる可能性があります。そのため、サードパーティ製スクリプトの使用を避けるか、正しい接続で使用することをお勧めします。
サードパーティのコードがどうしても必要な場合は、スクリプトの読み込みと初期化を遅らせてください。ページレンダリングの最初の数秒は非常に重要なので、不要なものは何も読み込まない方がよいでしょう。例えば、Intercomウィジェットを追加したとします。この場合、メインコンテンツがレンダリングされた（「DOMContentLoaded」または「document ready」イベント）3秒後に、スクリプトを接続して初期化するとよいでしょう。このステップにより、メインの読み込みストリームがブロックされるのを防ぐことができ、ページのレンダリングが速くなります。
例えば、Tilda 、カウンターはデフォルトで2秒遅れてロードされます。これについては次の段落で詳しく説明します。
私たちの観察によると、95％のケースで、ウェブサイトに追加されたコードはローディング戦略に最適化されておらず、ページのレンダリングが著しく遅くなる可能性があります。そのため、サードパーティ製スクリプトの使用を避けるか、正しい接続で使用することをお勧めします。
サードパーティのコードがどうしても必要な場合は、スクリプトの読み込みと初期化を遅らせてください。ページレンダリングの最初の数秒は非常に重要なので、不要なものは何も読み込まない方がよいでしょう。例えば、Intercomウィジェットを追加したとします。この場合、メインコンテンツがレンダリングされた（「DOMContentLoaded」または「document ready」イベント）3秒後に、スクリプトを接続して初期化するとよいでしょう。このステップにより、メインの読み込みストリームがブロックされるのを防ぐことができ、ページのレンダリングが速くなります。
例えば、Tilda 、カウンターはデフォルトで2秒遅れてロードされます。これについては次の段落で詳しく説明します。
5.遅延カウンターの初期化をオフにしない
カウンターの遅延初期化は、最近すべてのTilda ・ユーザーが利用できるようになった新機能です。ページ上のカウンターが接続するために、ブラウザはスクリプトをロードし、コードを分析し、実行する必要があります。Google Analyticsのファイルはかなり重いので、一度にすべて読み込むとページの表示速度が遅くなります。そのため、デフォルトではページがロードされてから2秒後にこれらのカウンターを接続するようになっています。
この設定が無効になっていないことは、サイト設定 → アナリティクスで確認できます。
この設定が無効になっていないことは、サイト設定 → アナリティクスで確認できます。
ウェブサイトの読み込みを速くしたい場合は、カウンタとピクセルの初期化遅延を無効にすることはお勧めしません。
6.ページの長さを短くする
ページ上の情報が少なければ少ないほど、読み込みは速くなる。あなたのウェブサイトを批判的な目で見てください：ページにすべての情報や画像を掲載することがそれほど必要なのか、それとももっと短くできるのか？例えば、非常に長いページ（20画面以上）がある場合、読み込み速度を上げるためにコンテンツの一部を別のページに移動させます。これは、あなたが直接影響を与え、調整できることです。
7.ページ上部の画像数を減らす
ユーザーは最初の画面に大きなカバー写真を配置し、次のブロックに4枚の小さな写真を配置することがある。この場合、ブラウザは1枚ではなく5枚の画像をダウンロードしなければなりません。これは、特にモバイルインターネットに関しては、トラフィックを詰まらせます。これが、私たちがページの上部にあまり多くの写真を配置することを推奨しない理由です。
ページの読み込み速度に悪影響を与えるため、ページ上部に画像を多く配置することはお勧めしません。
8.ウェブサイトがエクスポートされているか確認する
つまり、ウェブサイトがTilda のサーバー上にあることを確認してください。
Tilda は、質の高い内部インフラを構築し、その改善と開発を続けています。信頼性が高く高速なサーバー、画像配信を高速化するCDN、DDoS攻撃からの保護、その他、Tilda ウェブサイトの読み込み速度を最大化することを目的としたいくつかの技術的な調整などです。
サードパーティホスティングに関しては、システム管理者の作業量や質をコントロールすることはできません。
- CDNに接続し、分散コンテンツ・デリバリー・ネットワーク経由で画像を表示する。
- ウェブ・サーバーの設定でCSS/JS/HTMLキャッシュ・ヘッダをオンにし、ブラウザが毎回ダウンロードするのではなく、キャッシュから取得するようにする。
- CSS、JS、HTMLファイルのGzipまたはBrotli圧縮を有効にする。
- 設定で、テキストファイルの圧縮を有効にする：
- サードパーティのJSスクリプトに "async "属性を追加して、そのスクリプトの読み込みがページの読み込みを遅くしないようにする。
- 必要なときだけサードパーティのウィジェットを追加し、初期化を2～3秒遅らせて、ページのコンテンツがレンダリングするのに十分な時間があるようにする。
Tilda は、質の高い内部インフラを構築し、その改善と開発を続けています。信頼性が高く高速なサーバー、画像配信を高速化するCDN、DDoS攻撃からの保護、その他、Tilda ウェブサイトの読み込み速度を最大化することを目的としたいくつかの技術的な調整などです。
サードパーティホスティングに関しては、システム管理者の作業量や質をコントロールすることはできません。
- CDNに接続し、分散コンテンツ・デリバリー・ネットワーク経由で画像を表示する。
- ウェブ・サーバーの設定でCSS/JS/HTMLキャッシュ・ヘッダをオンにし、ブラウザが毎回ダウンロードするのではなく、キャッシュから取得するようにする。
- CSS、JS、HTMLファイルのGzipまたはBrotli圧縮を有効にする。
- 設定で、テキストファイルの圧縮を有効にする：
- サードパーティのJSスクリプトに "async "属性を追加して、そのスクリプトの読み込みがページの読み込みを遅くしないようにする。
- 必要なときだけサードパーティのウィジェットを追加し、初期化を2～3秒遅らせて、ページのコンテンツがレンダリングするのに十分な時間があるようにする。
概要
Tilda ウェブサイトはデフォルトでかなり速く読み込まれます。ウェブサイトをさらに高速化したいのであれば、チェックリストで紹介したおすすめの方法を利用してください。超高速のウェブサイトを作るのに役立ちますが、デザインやビジュアル面で少し妥協しなければなりません。これらの決定や優先順位は、常にユーザーに委ねられています。
弊社では、お客様のウェブサイトをさらに高速化するために、プラットフォームの最適化と新しいソリューションの実装に常に取り組んでいます。
弊社では、お客様のウェブサイトをさらに高速化するために、プラットフォームの最適化と新しいソリューションの実装に常に取り組んでいます。
