FROM CACHE - jp_header
解決済

CDNの正しい記載方法について

hidechi
Shopify Partner
2 0 0

theme.liquidの<head></head>の閉じタグ間際に外部のscript CDNを記載しているのですが、

VS Code上で以下のエラーメッセージが出てしまいます。

Shopifyではどのように記載するのは正しいのでしょうか?

 

■CDNのコード 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

 

■エラーメッセージ

 

Avoid parser blocking scripts by adding `defer` or `async` on this tag

 

試しにjQueryのCDNタグに「defer」を追記してみたのですが、

今度はブラウザの検証ツール上で「jQuery is not defined」というエラーメッセージが出てしまいます...

 

■CDNのコード

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" defer></script>

■エラーメッセージ

Uncaught ReferenceError: jQuery is not defined

Shopify構築が初心者のため、かなり基本的なことかもしれないのですが、

皆さまのお知恵をいただけると助かります。

よろしくお願いいたします。

 

1 件の受理された解決策

Jizo_Inagaki
Shopify Partner
1006 380 697

成功

ShopifyやCDN特有のものではないと思いますので、HTMLやJSに関して学ばれることをお勧めします。

加えてasyncやdefer、それらとjQueryの関係(ライブラリと実行コードが書かれたファイルの読み込み順序)に関しましても検索すれば色々と出てくるかなと思います。

 

参考:

https://developer.mozilla.org/ja/docs/Web/HTML/Element/script#defer

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

元の投稿で解決策を見る

2件の返信2

Jizo_Inagaki
Shopify Partner
1006 380 697

成功

ShopifyやCDN特有のものではないと思いますので、HTMLやJSに関して学ばれることをお勧めします。

加えてasyncやdefer、それらとjQueryの関係(ライブラリと実行コードが書かれたファイルの読み込み順序)に関しましても検索すれば色々と出てくるかなと思います。

 

参考:

https://developer.mozilla.org/ja/docs/Web/HTML/Element/script#defer

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
hidechi
Shopify Partner
2 0 0

ご回答いただき、ありがとうございます!

なるほど、Shopifyの仕様などに関係なかったのですね...

参考URLの共有までご丁寧にありがとうございます。こちら、調査してみます!