先日、Shopifyテーマ「ホライゾンコレクション」のアップデートが配信されたので、バージョンアップを行いました。

ホライゾンコレクションにテーマを変更してから「PageSpeed Insights」のスコアがあまり良くなかったため、今回のパフォーマンス改善を含むアップデートには期待を込めてすぐに適用しました。

計測結果：アップデート前と後でそれぞれ５回ずつ計測

アップデートには「パフォーマンスの最適化」が含まれていたため、 アップデート前（1.0.5）と後（2.0.3）で比較をしたところ、JavaScript処理の最適化によるTotal Blocking Time（TBT）の改善が見られました。

バージョン2.0.3

バージョン1.0.5

以下はアップデートの内容になります。

バージョン2.0.3
このリリースでは、パフォーマンスの最適化とモバイル互換性の修正に重点を置きました。主な改善点としては、重要な読み込みパスと商品カードリンクの動作のリファクタリング、iOS特有の画像の歪みとSafariのスクロールに関する問題の修正、そしてUIの配置に関する様々な問題の解決などが挙げられます。さらに、「Powered by Shopify」フッターオプションに新しいトグルが追加されました。

修正と改善

・スウォッチブロックの配置設定を修正しました
・[パフォーマンス] クリティカルローディングパスをリファクタリングしました
・[パフォーマンス] 商品カードのリンクの動作をリファクタリングしました
・[パフォーマンス] メガメニューとドロワーの画像読み込みを改善しました
・ホームページ上のロゴの非表示を修正しました
・Safari のドロワーの背後でページがスクロールする問題を修正しました
・モバイルでの「カートに追加」ボタンの切れ目を修正しました
・iOSデバイスで製品画像が歪んで表示される問題を修正しました
・検索バーの最小高さが小さすぎる問題を修正しました
・パスワードフッターが他のコンテンツと重ならないようにする
・注目の画像をメインブログ投稿に動的に接続
・製品メディアの「自動」アスペクト比に関するいくつかの問題を修正しました

引用元：Shopify Thema Store

まとめ

Shopifyのアップデートは毎回コンフリクトが起きやすくて、なかなか大変です。できれば、もう少し気軽にアップデートできる方法を探したい。