Jamstackを遅くしますか？勝負を受けて立つ。

「Jamstackはslowwwwです。」特にスピードに対するJamstackの評判を考えると、それを聞くことはめったにありません。ただし、Jamstackサイトでさえパフォーマンスの問題に苦しむ可能性があります。 Jamstackが自動的に燃えるようなパフォーマンスに等しいと仮定しないでください。スマートな選択は非常に重要です。貧弱な決定がジャムスタックサイトのスピードを損なうことができる方法を探りましょう。

パフォーマンスのボトルネックを理解するために、ゆっくりとしたギャツビーサイトを意図的に構築します。継続的なパフォーマンステストとGoogle Lighthouseを使用して、すべての変更を追跡し、完璧な灯台スコア100から始めて、意図的にDismal 17に分解します。

遅いジャムスタックサイトを構築します

ギャツビーを使用します。まず、ギャツビーCLIをインストールします。

 npmインストール-g gatsby -cli

新しいギャツビーサイトを作成します：

 Gatsby New Slow-Jamstack

プロジェクトディレクトリに移動し、開発サーバーを起動します。

 CDスロージャムスタック
ギャツビーが発展します

灯台のテストには、生産ビルドが必要です。 Vercelは便利なホスティングソリューションを提供します。 VercelCLIにインストールしてログインします。

 NPMインストール-G Vercel -Cli
ヴェルセル

これにより、サイトがvercelに展開されます。通常、デフォルトのギャツビーサイトは高速で、灯台で100を獲得しています。それを妨害する方法を見てみましょう。

CSSで減速します

CSSフレームワークは強力ですが、間違ったものを選択するか、非効率的に使用するとパフォーマンスを損なう可能性があります。モジュラーフレームワークまたはCSS-in-JSを選択して、必要なスタイルのみをロードします。

私たちは不十分な選択をします：jQuery（依存関係）を含むセマンティックフレームワーク全体を直接ロードするHTMLの。これには、デフォルトの<code>html.jsファイルをコピーする必要があります。

 cp .cache/default-html.js src/html.js

次に、semanticui styleSheetとjqueryをsrc/html.jsに追加します。

<link href="https://cdn.jsdelivr.net/npm/%5Bemail%C2%A0protected%5D/dist/semantic.css" rel="stylesheet">

変更を展開します：

 vercel -prod

灯台のスコアは66に低下し、不要なCSSをロードするだけで大​​幅に減少します。インタラクティブ（TTI）までの時間は劇的に増加します。

マーケティング依存関係で減速します

GoogleアナリティクスとFacebookトラッキングスクリプトをsrc/html.jsに追加しましょう：

 

<img  src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="Jamstackを遅くしますか？勝負を受けて立つ。" >

もう一度展開：

 vercel -prod

スコアは51に縮小します。これらの一見小さなスクリプトには、パフォーマンスに大きな影響があります。

画像で減速します

https://placeimg.comから100個の画像をindex.jsに追加し、最適化せずに直接ロードします。

 const indexpage =（）=> {
  const items = array.from（{length：100}、（_、i）=>（
    <img key="{i}" src="%7B%60https://placeimg.com/200/200/%24%7Bi%7D%60%7D" alt="Jamstackを遅くしますか？勝負を受けて立つ。">
  ））;

  戻る （
    <layout>
      {アイテム}
    </layout>
  ）;
};

再び展開すると、灯台のスコアが17、TTIが16.5秒で、劇的に遅いサイトが発生します。

ポイント？すべての決定はパフォーマンスに影響します。 Jamstackでも、パフォーマンスは無料ではありません。

速度の復元

Jamstackの主要なパフォーマンスの利点は、静的ファイルのエッジキャッシングであり、時間を最初のバイト（TTFB）に短縮します。これは、サーバー側のレンダリングよりも高速です。ただし、クライアント側の最適化は依然として不可欠です。高灯台のスコアが高いことは望ましいが、それらは常にユーザーエクスペリエンスを完全に反映しているわけではないことを忘れないでください。この演習は、Jamstackを使用しても、パフォーマンスへの熱心な注意が必要であることを示しています。

以上がJamstackを遅くしますか？勝負を受けて立つ。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。