ใ“ใฎใƒšใƒผใ‚ธใฏใ‚ณใƒŸใƒฅใƒ‹ใƒ†ใ‚ฃใƒผใฎๅฐฝๅŠ›ใง่‹ฑ่ชžใ‹ใ‚‰็ฟป่จณใ•ใ‚Œใพใ—ใŸใ€‚MDN Web Docs ใ‚ณใƒŸใƒฅใƒ‹ใƒ†ใ‚ฃใƒผใซใคใ„ใฆใ‚‚ใฃใจ็Ÿฅใ‚Šใ€ไปฒ้–“ใซใชใ‚‹ใซใฏใ“ใกใ‚‰ใ‹ใ‚‰ใ€‚

View in English Always switch to English

HTMLImageElement: fetchPriority ใƒ—ใƒญใƒ‘ใƒ†ใ‚ฃ

Baseline 2024
Newly available

Since โจOctober 2024โฉ, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

fetchPriority ใฏ HTMLImageElement ใ‚คใƒณใ‚ฟใƒผใƒ•ใ‚งใ‚คใ‚นใฎใƒ—ใƒญใƒ‘ใƒ†ใ‚ฃใงใ€ใƒ–ใƒฉใ‚ฆใ‚ถใƒผใŒไป–ใฎ็”ปๅƒใจๆฏ”่ผƒใ—ใฆใ€็”ปๅƒใฎๅ–ๅพ—ใ‚’ใฉใฎใ‚ˆใ†ใซๅ„ชๅ…ˆใ•ใ›ใ‚‹ในใใ‹ใจใ„ใ†ใƒ’ใƒณใƒˆใ‚’่กจใ—ใพใ™ใ€‚ ใ“ใ‚Œใฏ <img> ่ฆ็ด ใฎ fetchpriority ๅฑžๆ€งใ‚’ๅๆ˜ ใ—ใพใ™ใ€‚

ใ“ใฎใƒ—ใƒญใƒ‘ใƒ†ใ‚ฃใซใ‚ˆใ‚Šใ€้–‹็™บ่€…ใฏใ€่ชญใฟ่พผใฟใƒ—ใƒญใ‚ปใ‚นใฎๅˆๆœŸๆฎต้šŽใง็‰นๅฎšใฎ็”ปๅƒใ‚’่ชญใฟ่พผใ‚€ใ“ใจใŒใ€ใƒ–ใƒฉใ‚ฆใ‚ถใƒผใŒๅ†…้ƒจๅ„ชๅ…ˆๅบฆใ‚’ๅ‰ฒใ‚Šๅฝ“ใฆใ‚‹้š›ใซๅˆ็†็š„ใซๆŽจ่ซ–ใงใใ‚‹็ฏ„ๅ›ฒใ‚ˆใ‚Šใ‚‚ใ€ใƒฆใƒผใ‚ถใƒผใ‚จใ‚ฏใ‚นใƒšใƒชใ‚จใƒณใ‚นใซๅคšใ‹ใ‚Œๅฐ‘ใชใ‹ใ‚Œๅฝฑ้Ÿฟใ‚’ไธŽใˆใ‚‹ใ“ใจใ‚’็คบใ™ใ“ใจใŒใงใใพใ™ใ€‚ ใ“ใ‚Œใซใ‚ˆใ‚Šใ€ใƒ–ใƒฉใ‚ฆใ‚ถใƒผใฏๅ„ชๅ…ˆๅบฆใ‚’ๅข—ๆธ›ใ™ใ‚‹ใ“ใจใŒใงใใ€ๅ ดๅˆใซใ‚ˆใฃใฆใฏใ€้€šๅธธใ‚ˆใ‚Šใ‚‚ๆ—ฉใใพใŸใฏ้…ใ็”ปๅƒใ‚’่ชญใฟ่พผใ‚€ใ“ใจใŒใงใใพใ™ใ€‚ ้Žๅ‰ฐใพใŸใฏไธ้ฉๅˆ‡ใซๅ„ชๅ…ˆๅบฆใ‚’่จญๅฎšใ™ใ‚‹ใจใƒ‘ใƒ•ใ‚ฉใƒผใƒžใƒณใ‚นใŒไฝŽไธ‹ใ™ใ‚‹ๅฏ่ƒฝๆ€งใŒใ‚ใ‚‹ใŸใ‚ใ€ใ“ใฎใƒ—ใƒญใƒ‘ใƒ†ใ‚ฃใฏๆ…Ž้‡ใซไฝฟ็”จใ™ในใใงใ™ใ€‚

ๅ–ๅพ—ๅ„ชๅ…ˆๅบฆใ‚’ไฝฟ็”จใ™ใ‚‹ใ“ใจใงไบ‹ๅ‰่ชญใฟ่พผใฟใ‚’่ฃœๅฎŒใ™ใ‚‹ใ“ใจใŒใงใใ€ๆ—ขๅฎšใฎๅ„ชๅ…ˆๅบฆใŒ้ซ˜ใ„ๅฝฑ้Ÿฟใฎๅฐ‘ใชใ„ใƒชใ‚ฝใƒผใ‚นใ‚ˆใ‚Šใ‚‚ๅ„ชๅ…ˆๅบฆใ‚’้ซ˜ใ่จญๅฎšใ™ใ‚‹ใ“ใจใŒใงใใพใ™ใ€‚ไพ‹ใˆใฐใ€้–‹็™บ่€…ใŒ็‰นๅฎšใฎ็”ปๅƒใŒใ‚ฆใ‚งใƒ–ใ‚ตใ‚คใƒˆใฎ Largest contentful paint (LCP) ใซๅคงใใๅฝฑ้Ÿฟใ—ใฆใ„ใ‚‹ใ“ใจใ‚’ๆŠŠๆกใ—ใฆใ„ใ‚‹ๅ ดๅˆใ€ใใฎ็”ปๅƒใซ <link rel="preload"> ใ‚’่ฟฝๅŠ ใ—ใ€ใ•ใ‚‰ใซ fetchpriority ใƒ—ใƒญใƒ‘ใƒ†ใ‚ฃใ‚’ไฝฟ็”จใ—ใฆๅ„ชๅ…ˆๅบฆใ‚’้ซ˜ใ่จญๅฎšใ™ใ‚‹ใ“ใจใŒใงใใพใ™ใ€‚

ๅ–ๅพ—ๆ“ไฝœใฎๅ†…้ƒจๅ„ชๅ…ˆๅบฆใจใ€ๅ„ชๅ…ˆๅบฆใซๅฏพใ™ใ‚‹ fetchPriority ใฎๅฝฑ้Ÿฟใฏใ€ใ„ใšใ‚Œใ‚‚ๅฎŒๅ…จใซใƒ–ใƒฉใ‚ฆใ‚ถใƒผใซไพๅญ˜ใ—ใฆใ„ใ‚‹ใ“ใจใซๆณจๆ„ใ—ใฆใใ ใ•ใ„ใ€‚

ๅ€ค

ๅ„ชๅ…ˆๅบฆใƒ’ใƒณใƒˆใ‚’่กจใ™ๆ–‡ๅญ—ๅˆ—ใงใ™ใ€‚ ไฝฟ็”จๅฏ่ƒฝใชๅ€คใฏไปฅไธ‹ใฎ้€šใ‚Šใงใ™ใ€‚

high

ไป–ใฎ็”ปๅƒใจๆฏ”่ผƒใ—ใฆ้ซ˜ใ„ๅ„ชๅ…ˆๅบฆใง็”ปๅƒใ‚’ๅ–ๅพ—ใ—ใพใ™ใ€‚

low

ไป–ใฎ็”ปๅƒใจๆฏ”่ผƒใ—ใฆไฝŽใ„ๅ„ชๅ…ˆๅบฆใง็”ปๅƒใ‚’ๅ–ๅพ—ใ—ใพใ™ใ€‚

auto

ๅ–ๅพ—ใฎๅ„ชๅ…ˆๅบฆใซใคใ„ใฆใ€ใƒฆใƒผใ‚ถใƒผใŒ่จญๅฎšใ—ใพใ›ใ‚“ใ€‚ ใ“ใ‚ŒใŒๆ—ขๅฎšๅ€คใงใ™ใ€‚ ๅ€คใŒ่จญๅฎšใ•ใ‚Œใฆใ„ใชใ„ใ‹ใ€็„กๅŠนใชๅ€คใŒ่จญๅฎšใ•ใ‚Œใฆใ„ใ‚‹ใจใใซไฝฟ็”จใ•ใ‚Œใพใ™ใ€‚

ไพ‹

js
const img = new Image();
img.fetchPriority = "high";
img.src = "img/logo.png";

ไป•ๆง˜ๆ›ธ

Specification
HTML
# dom-img-fetchpriority

ใƒ–ใƒฉใ‚ฆใ‚ถใƒผใฎไบ’ๆ›ๆ€ง

้–ข้€ฃๆƒ…ๅ ฑ