このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

script”要素~“fetchpriority”属性HTML Living Standardで定義

記事Feb. 19th, 2023
外部スクリプトの読み込み時の優先度を指定する属性
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

fetchpriority”属性について

fetchpriority”属性は外部スクリプトの読み込み時にそのリソースの取得の優先度を示します。

fetchpriority”属性を指定することで文書の読み込み時に取得を優先すべき外部スクリプトを明示的に示すことができます。重要度の高い外部スクリプトを優先的に読み込ませることで多数の外部スクリプトの読み込みが必要なウェブページで体感的な表示速度を向上することができます。

fetchpriority”属性を指定しない場合の既定値は“auto”です。

script”要素の内容がデータブロックの場合は“fetchpriority”属性を指定してはいけません。

指定できる値

属性値 説明
high 同じ種類の外部リソースと比較して取得の優先度が高いことを示す
low 同じ種類の外部リソースと比較して取得の優先度が低いことを示す
auto 同じ種類の外部リソースと比較時の優先度を自動的に判断すべきであることを示す

値が無効な場合は“auto”とみなされます。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="icon" href="image/favicon.ico">
<meta name="robots" content="index,follow">
<meta name="keywords" content="バナナ,栄養素,産地">
<meta name="description" content="黄色くて栄養満点な果物であるバナナについて解説します。">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<script src="important-script.js" fetchpriority="high"></script>
<script src="unimportant-script.js" fetchpriority="low"></script>
<title>黄色いフルーツバナナ - 果物を食べる</title>
</head>
<body>
...
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク