【Shopify TIPS】
Shopifyのストアフロントで、Liquidページの初回応答が最大29%高速化したとのことです。
https://performance.shopify.com/blogs/blog/liquid-storefronts-now-start-loading-29-faster
これまではLiquidテンプレート全体の処理を待ってからHTMLを返していましたが、今回の改善では、<head>のレンダリングが完了した時点で、残りのテンプレートがまだ処理中でもブラウザへの送信を開始する仕組みが導入されました。
これにより、ブラウザはCSSやフォントなどのダウンロードをより早く開始できるため、購入者が実際に感じる表示速度(FCP・LCP)も2〜6%改善するようです。
ちなみに、この恩恵の大きさを左右するポイントの一つが、クリティカルなCSSやフォントの読み込みを{{ content_for_header }}より前に配置できているかどうかです。公式テーマで比較すると、Horizonはこの順序がほぼ徹底されているのに対し、Dawnではcontent_for_headerの後にbase.cssを読み込んでいます。そのため、同程度のTTFB改善でも、FCPの改善幅はHorizonの方が約3倍大きかったとのことです。
テーマの構造という点でも、ここではHorizonの新しい設計が有利に働いています。
カスタムテーマについても、日頃からアップデートを行い、テーマの構造を新しい状態に保っておくことで、こうしたShopifyプラットフォーム側の改善の恩恵を受けやすくなりそうです。
詳細は、スレッドに記載したブログ記事にまとめています。
スレッド
Shopifyのストアフロントが最大29%高速化 ― Liquidテーマ開発者が気をつけるべき3点
https://store-dojo.com/blogs/tips/shopify-liquid-streaming-speedup