帯域幅の使用の最小化

モバイルユーザにはネットワークの制約があるため、コンポーネントの作成時にはモバイルデバイスの帯域幅を考慮してください。

CSS と JavaScript のリソースが多いと、読み込み時間に影響します。読み込み時間を短縮するには、CSS と JavaScript ライブラリを最小限にします。コメントや空白を削除し、静的リソースとしてファイルをアップロードする前にリソースを圧縮します。画像やその他のアセットに静的リソースを用いると、キャッシュや、Salesforce に組み込まれたコンテンツ配信ネットワーク (CDN) を有効に活用することができます。「静的リソースへのアクセス」を参照してください。

Lightning Web コンポーネントの JavaScript ファイルの最大ファイルサイズは 128 KB (131,072 バイト) です。サードパーティの JavaScript ライブラリを使用する場合は、必要な関数に限定した JavaScript ライブラリのカスタムバージョンを構築することを検討してください。多くのオープンソースの JavaScript ライブラリにはこうしたオプションがあり、ファイルサイズを大幅に縮小できます。「サードパーティ JavaScript ライブラリの使用」を参照してください。

大きな画像ファイルや高解像度の画像ファイルを読み込むと、パフォーマンスに大きな影響を与える可能性があります。使用する画像数を減らすと同時に背景のテクスチャを小さくし、可能な場合は画像の代わりに CSS を使用します。複数の画像や大きな画像を扱う必要がある場合は、画像圧縮ツールを使用して画像ファイルを 10 ～ 30% 圧縮し、画像のダウンロードサイズを縮小します。

個別の画像の代わりに、CSS スプライトを使用することを検討してください。CSS スプライトを使うと、ボタンやアイコンなどよく似たサイズのグラフィックを 1 つのファイルにまとめることができます。まとめた画像の一部を表示するには、CSS background-image と background-position プロパティを使用します。使用する画像ファイルの数を減らすことで、HTTP 要求の数を最小限に抑えることができます。また、また、画像をまとめたスプライトファイルは簡単にキャッシュされるため、すべてのデバイスのパフォーマンスが向上します。

SVG 画像としても知られるベクターグラフィックスを優先してください。これらは、ファイルサイズが小さいことが多く、どのような画面サイズでも効率的に調整できるためです。JPEG や PNG ファイルなどのラスター画像を使用するには、一般的な反応型設計のガイドラインに従って、高解像度画面にのみラスター画像をプロビジョニングすることを検討してください。サポートする予定のデバイスの画面解像度を確認して、さまざま解像度に対応する画像を用意し、画面サイズに応じた最適な画質の画像を提供します。「SVG リソースの使用」を参照してください。

全体的な帯域幅の使用状況を改善するには、作成のベストプラクティスに従います。シンプルなランディングページをモバイルユーザに提示し、後からより複雑なコンポーネントやページにリンクします。同様に、ページを遅延読み込みして、カスタムライブラリを読み込む前に基本的な HTML を最初に読み込めるようにします。

モバイル接続の問題はよく発生するため、アプリケーションでオフラインシナリオを適切に処理することをお勧めします。オフラインアクセスは Salesforce for Android および Salesforce for iOS で使用できます。データをキャッシュしてオフラインで使用できるようにすると、全体的なパフォーマンスが向上し、モバイルユーザは以前にアクセスしたレコードにより速くアクセスできます。「Salesforce モバイルアプリケーションのオフラインアクセスおよびオフライン編集の有効化」を参照してください。Mobile SDK してカスタムモバイルアプリケーションを作成する場合は、オフラインで使用するためのデータを保存および同期することを検討してください。「オフライン管理」を参照してください。

一貫性のあるエクスペリエンスを実現するためには、Lightning Design System の「Design Guidelines (設計ガイドライン)」 (英語) に従うことをお勧めします。ページの読み込み時に顕著な lag が予想される場合は、スピナー (lightning-spinner) や別のアニメーションを使用した SVG や GIF 画像などの読み込みインジケータを使用します。データの取得に 300 ミリ秒を超える時間がかかる場合は、軽量のプレースホルダコンテンツを使用します。SLDS の「Design Guidelines (設計ガイドライン)」の「Loading (読み込み)」 (英語) を参照してください。

関連トピック