概要

この記事では、サイトのパフォーマンスを向上させる方法について説明します。  AEM アプリケーションとアーキテクチャの様々な側面を強調表示することにより、ほとんどのパフォーマンスの問題を引き起こしています。  ここに記載されている最適化を実装することで、一般的な問題を回避できます。

サイトのパフォーマンス

1. 定期的なメンテナンスを実行します。
2. バックエンドサービスコールの耐障害性を作成します - 詳しくは、この記事を参照してください。
3. サードパーティの UI フレームワークを使用する場合は注意してください - AEM / Sling Web フレームワークの上のレイヤー全体を構築するライブラリを使用または構築している多くの顧客を見てきました。  UI(ACS Commons など)で特定の機能を対象とするユーティリティではなく、AEM でアプリケーションの実装方法を根本的に変更するフレームワークを参照していることに注意してください。  これらのフレームワークは開発時間をわずかに短縮する場合がありますが、パフォーマンスに悪影響を与える可能性があることを多くの時間をかけて確認してきました。

サードパーティのフレームワークは、Adobe ではサポートおよびテストしません。  このようなフレームワークを使用または実装する場合は、実際のトラフィックを使用してアプリケーションの負荷テストとストレステストを行ってください。  
4.クライアント側のパフォーマンス

  • AEM クライアントライブラリを使用および最適化します - クライアントライブラリを使用すると、サイトの CSS および JavaScript コードの管理と最適化を間単に一元管理することができます。
    • クライアントライブラリを埋め込み、少数のファイルに統合します。
    • ライブラリを縮小します。
  • 配置された CSS は、HTML の <head> タグに含まれます - これにより、読み込み後にページのちらつきと再描画を回避できます。
  • 配置された JavaScript <script> は <body>タグの最後に含まれ、非同期スクリプトの属性を追加します - これにより、ページのレンダリング中にブラウザーで JavaScript ファイルを同時に読み込むことができます。
  • ドメインのシャーディングを実装します - デフォルトでは、ページの読み込み中に Web ブラウザーでドメインごとに同時リクエストの最大数を制限します。  これにより、ページがレンダリングされる前に読み込む必要のある CSS、JavaScript などのリソースが多数ある場合にページの読み込みが遅れることがあります。  ドメインのシャーディングは、この問題を回避するための解決策です。  ドメインのシャーディングは、複数のサブドメインを介してサイト上の CSS や JavaScript などのファイルを含める場所です。
    •  例:
      <script src="//includes1.yoursite.com/etc/clientlibs/test.js"></script>
      <script src="//includes2.yoursite.com/etc/clientlibs/test2.js"></script>
    • ACS Commons - Static Reference Rewriter を使用して、ドメインのシャーディングを実装します。
  • 長い一定の時間で JavaScript と CSS をキャッシュします - 長い一定の時間で JavaScript と css のキャッシュを許可するには、ACS Commons - Versioned Clientlibs を活用します。
  • サイトを最適化する方法について詳しくは、Google PageSpeed ルールのドキュメントを参照してください。
  • サイトの最適化について詳しくは、この AEM Gems のセッションを参照してください。

オーサーインスタンス編集パフォーマンス

1. 定期的なメンテナンスを実行します
2. ページ全体のコンポーネントを削減します - オーサーインスタンスの AEM ページで読み込まれる個々の編集可能なコンポーネントが多数ある場合、これはエディターの UI のパフォーマンスに大きく影響します。  アプリケーションを設計するときは、サブコンポーネントが多い一般的なコンポーネントより、サイトにさらに固有であり、エディターの使用が簡単であるコンポーネントを使用します。
3. 多くのレベルの段落システムコンポーネントのネストを回避します - 多くのレベルの段落システムコンポーネントのネストを回避します。  段落システムをネストすると、/editor.html ページの読み込みが低速になります。  これは、特に、段落システムにコンテンツの長いリストが含まれる場合のケースです。  ネストしている段落システムではなく、他のページからコンテンツを参照するアプリケーションを設計するか、エクスペリエンスフラグメントを使用します。

キャッシュの最適化

一般的な AEM サイトアーキテクチャでは、HTTP リクエストは、最終的に AEM のパブリッシュインスタンスに到達する前に複数のキャッシュをパススルーします。  サイトのパフォーマンスを向上させる最も簡単な方法の 1 つは、サイトのキャッシュ機能を最適化することです。

サイトのキャッシュを最適化する方法の手順について詳しくは、この記事を参照してください。

カスタム JCR クエリーのインデックスの最適化

パフォーマンスを向上させるためのもう 1 つの最適化は、カスタム JCR クエリーの Oak インデックスを設定および最適化することです。  アプリケーション内で JCR クエリーを使用している場合、これは一般的に必須のタスクです。

カスタムアプリケーションクエリーの Oak インデックスを実装する方法については、公式のドキュメント([1] と [2])を参照してください。

[1] https://docs.adobe.com/docs/en/aem/6-3/deploy/platform/queries-and-indexing.html

[2] https://helpx.adobe.com/jp/experience-manager/6-3/sites/developing/using/troubleshooting-slow-queries.html

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー