メインコンテンツへスキップ

​
アプリパフォーマンスの確認

アプリのパフォーマンスは、ユーザーへの読み込み速度と応答性に影響します。これは、ブラウザの Developer Tools を使って測定できます。 主要なパフォーマンスメトリクスには、Largest Contentful Paint (LCP)、Cumulative Layout Shift (CLS)、Interaction to Next Paint (INP) が含まれます。
ビルダープレビューではなく、常に公開されたアプリを確認してください。デスクトップとモバイルの両方でライブバージョンをテストすると、パフォーマンススコアが最も正確になります。
LCP、CLS、INP のパフォーマンスメトリクスを表示する Chrome DevTools の例。 LCP、CLS、INP のローカルパフォーマンスメトリクスを表示する Chrome DevTools の例。

​
アプリパフォーマンスの最適化

アプリの読み込み、実行、応答の速度に影響する主要メトリクスに焦点を当てて、アプリのパフォーマンスを最適化しましょう。各メトリクスはユーザー体験の異なる側面を強調しており、Base44 の AI チャットに直接最適化を促すことができます。

​
Largest Contentful Paint (LCP)

LCP は、フォールド上部の最大の可視要素(画像、テキスト、動画)が表示されるまでの時間を測定します。 LCP を最適化するには:
  • フォールド上部の可視コンテンツを軽量で高速に保ちます。
  • 重い要素(動画、iFrame、グリッド、リスト)をフォールド下部に移動します。
  • アップロード前に画像を最適化・圧縮します。
  • オフスクリーンの画像には遅延読み込みを使用します。
AI へのプロンプト: “Apply lazy loading to images and videos below the fold.”
AI が適切な属性または動的インポートを自動的に追加します。

​
Cumulative Layout Shift (CLS)

CLS は、読み込み中のアプリレイアウトの予期しない移動を測定します。 CLS を最適化するには:
  • サイズ定義を追加: すべての画像と動画に固定の高さと幅を与えて、読み込み中のずれを防ぎます。
  • カスタムフォントの最適化: CSS で font-display: swap; プロパティを使用して、フォント読み込み中の不可視テキストを防ぎます。
  • 動的コンテンツのスペースを確保: 広告、ポップアップ、または初期レンダリング後に読み込まれるものに固定スペースを設定します。
  • DOM 更新の最小化: 自動スクリプトによるレイアウト変更を制限します。
AI へのプロンプト:
  • “Set fixed height and width for all media elements.”
  • “Prevent layout shifts while fonts load.”
AI がコンポーネントスタイルまたは CSS を自動的に更新します。

​
Interaction to Next Paint (INP)

INP は、クリック、タップ、キーボード入力に対するアプリの応答速度を測定します。 INP を最適化するには:
  • ユーザーアクションによってトリガーされる長時間実行スクリプトを避けます。
  • 初期読み込みから不要なスクリプトを遅延または削除します。
  • レイアウトをシンプルに保ち、アニメーションを最小限に抑えます。
  • Performance タブで応答性を監視します。
AI へのプロンプト: “Defer non-critical scripts until after interaction” または “Simplify animations for better responsiveness.” AI は生成中にコード実行順序とアニメーションを最適化します。

​
コンテンツ配信ネットワーク (CDN) とキャッシング

コンテンツ配信ネットワーク (CDN) は、ユーザーの場所に最も近いサーバーからアプリのコピーを配信し、読み込み時間を改善します。Base44 はキャッシングと配信に Cloudflare CDN を自動的に使用します。
AI へのプロンプト: “Republish my app to refresh cached files.”
再公開により、Base44 の自動 Cloudflare キャッシュ更新がトリガーされます。
現在、CDN キャッシュを手動でクリアすることはできません。

​
FAQ

サイトパフォーマンスの最適化について詳しく知るには、以下の質問をクリックしてください。
Chrome DevTools または Google PageSpeed Insights を使用してアプリのパフォーマンスを確認できます。Chrome で確認するには:
  • クイックチェック:
    1. 公開したアプリを開きます。
    2. 任意の場所を右クリックし、Inspect を選択します。
    3. 右パネルで、Chrome は Largest Contentful Paint (LCP)、Cumulative Layout Shift (CLS)、Interaction to Next Paint (INP) のローカルメトリクスを表示します。
      これにより、ライブページのパフォーマンスを即座に確認できます。
  • 詳細チェック:
    1. Chrome DevTools を開きます。
    2. Performance タブをクリックします。
    3. Record をクリックし、ページを再読み込みし、読み込みが完了したら記録を停止します。
    4. First Contentful Paint (FCP)、LCP、メインスレッドのアクティビティを含む完全なパフォーマンスタイムラインを確認します。
PageSpeed で確認するには:
  1. PageSpeed Insights に移動します。
  2. アプリの URL を入力し、Analyze をクリックします。
  3. アプリのパフォーマンスを改善する方法について、Insights と Diagnostics セクションを確認します。
最高のエクスペリエンスのために、以下の推奨スコアを満たすか上回ることを目指してください:
  • Largest Contentful Paint (LCP): 2.5 秒以下。
  • Cumulative Layout Shift (CLS): 0.1 以下。
  • Interaction to Next Paint (INP): 200 ミリ秒以下。
これらのベンチマークは、優れたサイトパフォーマンスのための Google の基準に従っており、アプリが高速で安定して動作し、スムーズに応答するのに役立ちます。
パフォーマンススコアが低いということは、サイト上の一部の要素が予想より読み込みに時間がかかっていることを意味します。重いフォールド上部のコンテンツ、大きなスクリプト、最適化されていないメディアが最も一般的な原因です。トラブルシューティングするには:
  1. アプリを Google PageSpeed Insights で実行し、以下を確認します:
    • レンダリングブロックリソース: スクリプトを async または defer に移動します。
    • 大きな JavaScript バンドル: ベンダーコードを簡素化または分割します。
    • 最適化されていない画像: 圧縮して再アップロードします。
  2. Chrome DevTools で、Network タブを開き、Reload をクリックしてファイルがリアルタイムで読み込まれる様子を確認します。
    • 読み込みに 1〜2 秒以上かかるファイルに注意してください。これらはアプリの速度を低下させている可能性があります。
クイックフィックス:
  • 動画、データリスト、または重いセクションをフォールド下部に移動します。
  • アップロード前に画像を圧縮・リサイズします。
  • 未使用のスクリプトまたは CSS を削除します。
  • アプリを再公開して CDN キャッシングをリフレッシュします。
AI へのプロンプト: “Optimize my app for faster LCP and INP” または “Reduce above-the-fold load size.” AI は関連する場所に自動的に遅延読み込みとスクリプトの遅延を適用します。
  • 動画を外部(例: Vimeo または YouTube)でホストします。
  • 埋め込み動画や iframe に loading="lazy" を追加します。
  • テキストと画像を優先するために、動画をフォールド下部に配置します。
  • 大きな背景動画では autoplay または loop を無効にします。
モバイルテストは遅いネットワークとデバイスで実行されるため、スコアは通常デスクトップより低くなります。重いメディアの削減、重要でないスクリプトの遅延、レイアウトの簡素化により、まずモバイル向けに LCP と INP を最適化することに焦点を当ててください。
このページは AI を使用して翻訳されました。最も正確で最新の情報については、英語版 を参照してください。