Anthropic Claudeその他⭐ リポ 0品質スコア 50/100

preload

Name: preload
Author: patternsdev

フォントやヒーロー画像、重要なスクリプトなど、クリティカルなリソースの読み込みを優先するためのプリロード手法を習得できます。これらのリソースがローディングウォーターフォールの後半で遅れて検出される場合に活用してください。

description の原文を見る

Teaches resource preloading to prioritize critical assets. Use when critical resources like fonts, hero images, or key scripts are discovered late in the loading waterfall.

SKILL.md 本文

Preload

Preload（<link rel="preload">）は、重要なリソース（後から発見される可能性がある）をより早い段階でリクエストできるようにするブラウザ最適化です。キーリソースのロード順序を手動で管理する方法に精通していれば、ロード性能とCore Web Vitalsのメトリクスに良い影響を与えることができます。ただし、preloadは万能な解決策ではなく、いくつかのトレードオフを認識する必要があります。

使用する場合

重要なリソース（フォント、スクリプト、画像）がロードプロセスの後期に発見される場合に使用してください
これはTime To Interactive（TTI）とLargest Contentful Paint（LCP）の改善に役立ちます

使用しない場合

非重要なリソースの場合 — 多くのアセットをpreloadすると、初期レンダリングに実際に必要なリソースが遅延します
ブラウザのpreloadスキャナーによってリソースが既に早期に発見されている場合（例：<head>内のインライン<script>タグ）
過度な使用がブラウザに未使用のpreloadされたリソースに関する警告を引き起こし、帯域幅が無駄になっていることを示す場合

手順

現在のページで必要なリソースには<link rel="preload">を使用してください
多くのリソースをpreloadしてFirst Contentful Paintを遅延させないよう注意してください
as属性を使用してリソースタイプ（script、style、font、image）を指定してください
フォントおよびその他のCORSで取得されるリソースの場合、preloadのcrossoriginを設定して、最終的なリクエストモードと一致させてください
初期レンダリングの約1秒以内に表示される必要があるリソースのみをpreloadしてください

詳細

<link rel="preload" href="emoji-picker.js" as="script">
...
</head>
<body>
  ...
  <script src="stickers.js" defer></script>
  <script src="video-sharing.js" defer></script>
  <script src="emoji-picker.js" defer></script>

Time To InteractiveやFirst Input Delayなどのメトリクスを最適化する場合、preloadはインタラクティビティに必要なJavaScriptバンドル（またはチャンク）をロードするのに役立ちます。preloadを使用する場合は、First Contentful PaintやLargest Contentful Paintに必要なリソース（ヒーロー画像やフォントなど）を遅延させることでインタラクティビティを改善したくないため、細心の注意が必要です。

ファーストパーティJavaScriptのロードを最適化しようとしている場合、ドキュメント<head>内ではなく<body>内で<script defer>を使用することで、これらのリソースの早期発見を支援することも検討できます。

シングルページアプリケーションでのPreload

prefetchingは近い将来リクエストされる可能性のあるリソースをキャッシュするのに優れた方法ですが、preloadは即座に使用する必要があるリソースをロードできます。初期レンダリングで使用される特定のフォント、またはユーザーがすぐに見る特定の画像かもしれません。

EmojiPickerコンポーネントが初期レンダリングで即座に表示される必要があるとしましょう。メインバンドルに含めるべきではありませんが、_並行してロードされるべき_です。_prefetch_と同様に、マジックコメントを追加して、このモジュールがpreloadされるべきであることをWebpackに知らせることができます。

const EmojiPicker = import(/* webpackPreload: true */ "./EmojiPicker");

Webpack 4.6.0+では、importに/* webpackPreload: true */を追加することでリソースのpreloadが可能になります。古いバージョンのwebpackでpreloadを機能させるには、webpack configにpreload-webpack-pluginを追加する必要があります。

アプリケーションをビルドすると、EmojiPickerがpreloadされることがわかります。

 Asset                             Size       Chunks                          Chunk Names
    emoji-picker.bundle.js         1.49 KiB   emoji-picker [emitted]          emoji-picker
    vendors~emoji-picker.bundle.js 171 KiB    vendors~emoji-picker [emitted]  vendors~emoji-picker
    main.bundle.js                 1.34 MiB   main  [emitted]                 main

Entrypoint main = main.bundle.js
(preload: vendors~emoji-picker.bundle.js emoji-picker.bundle.js)

実際の出力は、ドキュメントのhead内のrel="preload"を持つlinkタグとして表示されます。

<link rel="preload" href="emoji-picker.bundle.js" as="script" />
<link rel="preload" href="vendors~emoji-picker.bundle.js" as="script" />

preloadされたEmojiPickerは、初期バンドルと並行してロードできます。ブラウザがprefetch対象のリソースを実際にprefetchするのに十分なインターネット接続と帯域幅があると判断するかどうかについてまだ発言権を持っていた_prefetch_とは異なり、preloadedリソースは何が起こるかに関わらずpreloadされます。

EmojiPickerが初期レンダリング後のロード完了を待つ必要がない代わりに、リソースは即座に利用可能になります！アセットをより賢い順序でロードするため、ユーザーのデバイスとインターネット接続に応じて初期ロード時間が大幅に増加する可能性があります。初期レンダリング後約1秒以内に表示される必要があるリソースのみをpreloadしてください。

Preload + `async`ハック

ブラウザにスクリプトを高優先度でダウンロードさせたいが、スクリプトを待つためにパーサーをブロックしたくない場合は、以下のpreload + asyncハックを活用できます。この場合、preloadによって他のリソースのダウンロードが遅延する可能性がありますが、これは開発者が決定する必要があるトレードオフです：

<link rel="preload" href="emoji-picker.js" as="script">
<script src="emoji-picker.js" async>

フォントのpreloadは`crossorigin`を使用する必要があります

フォントは、同じオリジンで自己ホストされている場合でも、CORSリソースとしてフェッチされます。これは、preloadリクエストと最終的な@font-faceリクエストが同じフェッチモードを使用する必要があることを意味します。そうしないと、preloadを再利用できません。

フォントをcrossoriginなしでpreloadする場合、ブラウザは通常、no-cors preloadリクエストを行い、CSSがフォントを発見したときに後で別のcorsリクエストを行います。これにより、同じファイルの二重フェッチが発生し、帯域幅が無駄になります。

避ける：

<link rel="preload" href="/fonts/inter-roman.woff2" as="font" type="font/woff2">

推奨：

<link
  rel="preload"
  href="/fonts/inter-roman.woff2"
  as="font"
  type="font/woff2"
  crossorigin
>

そして、@font-faceが同じリソースと一致することを確認してください：

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-roman.woff2") format("woff2");
  font-display: swap;
}

この同じルールはより広く適用されます：最終的なコンシューマーがCORSセマンティクスでリソースをフェッチする場合、preloadもそのモードと一致する必要があります。

Chrome 95+でのPreload

Chrome 95+でのpreloadのqueue-jumping動作に対する修正のおかげで、この機能はより広く安全に使用できるようになりました。ChromeのPat Meenanによるpreloadの新しい推奨事項は以下の通りです：

HTTPヘッダーに入れると、他のすべてより前にジャンプします
一般に、preloadはパーサーが到達した順序でロードされます（Medium以上の場合）。HTMLの最初にpreloadを配置する際は注意してください。
フォントのpreloadは、headの終わり付近またはbodyの最初付近に配置するのが最適です
インポートpreloadは、インポートが必要なスクリプトタグの後に行うべきです（実際のスクリプトが最初にロード/解析されるように）
画像のpreloadは低優先度を持ち、非同期スクリプトおよび他の低/最低優先度タグに相対して順序付けられるべきです

まとめ

preloadは控えめに使用し、本番環境での影響を測定してください。画像のpreloadがその画像より前の方にドキュメントにある場合、これはブラウザがそれを発見するのに役立ちます（および他のリソースに相対して順序付けます）。不正に使用されると、preloadingは画像がFirst Contentful Paint（例：CSS、フォント）を遅延させる可能性があります—これはあなたが望むことの反対です。また、このような優先度変更の取り組みが有効であるためには、サーバーがリクエストを正しく優先順位付けすることにも依存することに注意してください。

<link rel="preload">は、実行せずにスクリプトをフェッチする必要がある場合にも役立つ場合があります。

様々なweb.dev記事でPreloadを使用する方法について説明しています：

出典

patterns.dev/vanilla/preload

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者: patternsdev
リポジトリ: patternsdev/skills
ライセンス: MIT
最終更新: 不明

GitHubで原本を見る →フィードバックを送る

Source: https://github.com/patternsdev/skills / ライセンス: MIT

preload

SKILL.md 本文

Preload

目次

使用する場合

使用しない場合

手順

詳細

シングルページアプリケーションでのPreload

Preload + `async`ハック

フォントのpreloadは`crossorigin`を使用する必要があります

Chrome 95+でのPreload

まとめ

出典

詳細情報

関連スキル

superfluid

civ-finish-quotes

nookplot

web3-polymarket

ethskills

xxyy-trade

SKILL.md 本文

Preload

目次

使用する場合

使用しない場合

手順

詳細

シングルページアプリケーションでのPreload

Preload + asyncハック

フォントのpreloadはcrossoriginを使用する必要があります

Chrome 95+でのPreload

まとめ

出典

詳細情報

関連スキル

superfluid

civ-finish-quotes

nookplot

web3-polymarket

ethskills

xxyy-trade

Preload + `async`ハック

フォントのpreloadは`crossorigin`を使用する必要があります