重要なアセットをプリロードすると、Shopifyウェブサイトのパフォーマンスがどのように向上するのでしょうか

重要なアセットをプリロードすると、Shopifyウェブサイトのパフォーマンスがどのように向上するのでしょうか

訪問者があなたのオンラインShopifyストアを閲覧すると、バックグランドであなたも訪問者も見えない多くの事が起こります。Shopifyウェブサイトは訪問者のブラウザに提供されますが、そこでは全ての要素が訪問者に完全なウェブサイトとして表示される前にブラウザはデータを塊でダウンロードします。

ブラウザは、ウェブサイト内のどのリソース/アセットを最初にダウンロードして表示するか(ウェブフォントや画像等)を優先順位を付ける必要があります。多くの場合、ブラウザがウェブサイトをダウンロードしてユーザーに提供する方法は、ページの読込時間に悪影響を及ぼし、結果必要なShopifyショップの最初のページの読込が遅くなります。

Shopifyショップの最初のページの読込が遅いと、直帰率が高くなり、売上が減少する原因となります。統計によりますと、ページの読込時間が1秒遅れただけでもコンバージョン率が7%減少する可能性があるのです!

幸いなことに、ページ上のどのリソースに優先順位を付けてダウンロードするかについて、ブラウザに「ヒント」を与えることができます。これらのブラウザヒントは、コーディングの世界では「プリロード」および「プリフェッチ」としてよく知られています。

このプロセスは、JavaScriptタグの非同期読み込みをサポートしています。これは、多くの最新のウェブサイトがサイトのパフォーマンスを向上させるために採用している方法です。非同期読み込みにより、JavaScriptコード(インタラクティブなウェブサイト効果の作成に使用される)を残りのページコンテンツと一緒に処理することができます。これはウェブサイトの他の要素の読み込みが遅い場合、JavaScriptコードがページの残りの部分の速度を落とさないことを意味します。

 この記事では、これらのブラウザヒントの仕組み、プリロードできるリソース、Shopifyテーマ内にコード行を追加して「プリロード」タグと「プリフェッチ」タグを設定する方法を学びます。コーディングが得意でなくてもご心配なく!またTinyIMGアプリが自動的に学び、プロセスを簡単にします。

プリロードタグ - どのように機能するか

プリロードタグは次のようになります: <link rel="preload"> これは、Shopifyテーマ―コードに、ヘッドセクション内のリンク要素として追加できます。

preload tag code*web.devからのスクリーンショット 

必要な時にすぐに利用できるように、特定のアセットをダウンロードしてキャッシュする必要があることをブラウザに伝えます。プリロードタグは、現在のページに必要なリソースに使用する必要があります。

どのリソースをプリロードする必要があるかをブラウザに正確に伝えるには、別のコードをプリロードタグに追加します。上記のスクリーンショットは、main.cssファイルをプリロードする必要があることを示しています。

下記に別の例を示します。

<link rel="preload" href="fonts/K2D.woff2" as="font"> 

コードの「href」部分は、ダウンロードする必要があるアセットを指します。この場合、それはフォントです。コードの最後の「フォント」値は、コンテンツタイプを指定します。また「as」属性も同様に重要です。これにより、ブラウザはリソースのロードに優先順位を付け、ダウンロードを適切にスケジュールすることができます。

プリロードとプリフェッチタグの違いは?

プリフェッチタグは、プリロードタグと同様に機能します。次のページで必要なリソースを早期に要求し、それをキャッシュし、必要に応じて提供することで、将来のナビゲーション要求を高速化するのに役立ちます。プリフェッチタグの表示例を次に示します。

<link rel="prefetch" href="details.css"> 

プリフェッチは、優先度が低く、すぐには必要のないリソースに使用する必要があります。重要なリソースにのみ使用されるプリロードと混同しないようにしましょう。

どのアセットがプリロード可能?

プリロードタグを使用して、音声ファイル、ビデオファイル、画像、フォント、スタイルシート、Javascriptファイル、iframe要素内に埋め込まれたドキュメントなどをプリロードするようブラウザに指示できます。以下は、ブラウザでプリロードできるコンテンツタイプの詳細なリストです。

大まかな目安として、Shopify ウェブサイトを閲覧するときにショップ訪問者が必要とする可能性のあるリソースの上位80%を考慮し、それらをプリロードに使用します。商品ページでは、おすすめの画像をプリロードすることをお勧めします。

誤ってサイトのパフォーマンスを損なわないよう、全てのリソースをプリロードしないでください。また、全てのブラウザがプリロードタグとプリフェッチタグの両方をサポートしているわけではないことに注意してください。これは、ショップ訪問者の中には、これらのブラウザヒントがサイトのパフォーマンスを改善していることに気付かない人がいることを意味します。

さて、楽にShopifyテーマにプリロードタグとプリフェッチタグを追加する2つの方法を次に示します。

解決策1 - 手動で必要なコードをテーマに追加する

shopify theme code*Shopify.からのスクリーンショット

お客様が技術に精通していない、またはショップを管理する時間がないという場合は、Shopifyのテーマにコードを追加することができるShopify開発者を雇うという方法もあります。

コードの編集に精通していて、ご自分でこれを突き詰めていきたい場合には次のことを行う必要があります。

ステップ1:コードを編集する前に、Shopifyテーマのバックアップを作成します。これを行うには、オンラインショップにアクセスし、テーマをクリックしてから、現在のテーマ内のアクションをクリックします。最後に、「複製」をクリックします。

ステップ2:現在のテーマに戻って、[アクション]をクリックし、[コードの編集]をクリックします。画面の左側にあるレイアウトの見出しの下のtheme.liquidを選択します。

ステップ3:このファイルのheadセクションにプリロードタグを追加します(プリロードするコンテンツタイプのコードを記入します)。 <head> openingを開くタグと</head>を閉じるタグの間の任意の場所に配置し、[保存]をクリックして変更を保存します。

必要に応じて、複製したテーマにプリロードタグを追加し、変更が正しいことを確認してから公開することができます。これを行うと、何か問題が発生した場合に、ウェブサイトのダウンタイムを回避できます。

解決策2 - TinyIMG を利用して自動的にリソースをプリロードする

TinyIMGは、ShopifyおよびShopify Plusショップ向けのインテリジェントな画像およびウェブサイト最適化ツールです。主に、アプリは自動的に画像を圧縮し(Shopify ウェブサイトの高速化に役立つ別の方法)、画像のaltタグとファイル名を生成することで画像のSEO構造を提供します。

それに加えて、TinyIMGにはプリロードおよびプリフェッチタグに必要なコードも含まれています。これはアプリ自体の無料のメリットです。つまり、アプリをインストールしてアクティブにすると、TinyIMGは、コードを入力することなく、ウェブサイトの重要なアセットをプリロードしてキャッシュするようブラウザに指示します。

最高のおみやげ

Shopifyショップ内の特定のアセットをプリロードおよびプリフェッチすると、サイトのパフォーマンスが向上します。これらのブラウザのヒントを使用して、必要なときにユーザーにロードする準備ができるように、ダウンロードとキャッシュの優先順位を付けるアセットをブラウザに伝えることができます。

これらの手法を実装するときは、必要なリソースのみをプリロードおよびプリフェッチするよう注意してください。 プリロードタグは現在のウェブページのアセットに推奨されますが、プリフェッチタグは今後のナビゲーションリクエストに使用する必要があります。

上記の手順に従って、Shopify所ppのtheme.liquidファイルにプリロードタグとプリフェッチタグを手動で追加できます。コードを編集する前に、必ずShopifyテーマのバックアップを作成してください。

上記を簡単に行うには、TinyIMGアプリをインストールすることです。これらのブラウザのヒントが自動的に提供され、ウェブサイトの速度を上げるのに役立ちます。

画像サイズの圧縮以外にShopify ウェブサイトを高速化する他の方法は、不要なShopifyアプリを削除し、誰かがあなたのオンラインストアにアクセスしたときに発生するHTTPリクエストの数を減らすことです。後者の方法を説明する記事はこちらから

最近の投稿