[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"quiz-fetchpriority-attribute-priority-hints":44,"search-suggestions":60,"quiz-article-fetchpriority-attribute-priority-hints":108,"path-membership-fetchpriority-attribute-priority-hints":295},[4,20,32],{"id":5,"slug":6,"name":7,"tagline":8,"description":9,"accentFrom":10,"accentTo":11,"icon":12,"defaultLocale":13,"locales":14,"features":16,"position":19},"019fe637-3d33-714b-b57f-23e163ffca0c","dev","Web Development","Read it. Run it. Prove it.","A post a day on modern web development — most with an editable playground and a quiz that explains every answer. Free, no account needed.","violet-500","cyan-400","◇","en",[13,15],"fa",{"courses":17,"paths":17,"articles":17,"exams":18,"flashcards":18,"packages":17,"community":17,"certificates":17,"teams":17,"commerce":17},true,false,0,{"id":21,"slug":22,"name":23,"tagline":24,"description":25,"accentFrom":26,"accentTo":10,"icon":27,"defaultLocale":13,"locales":28,"features":30,"position":31},"019fe637-3dc2-754c-8657-0f175bfee7c6","lang","Languages","Learn a language the way you learn a codebase.","Grammar explained the way good documentation explains an API — one idea at a time, each with a quiz.","amber-400","⌘",[13,15,29],"es",{"courses":18,"paths":18,"articles":17,"exams":18,"flashcards":17,"packages":18,"community":17,"certificates":17,"teams":18,"commerce":18},2,{"id":33,"slug":34,"name":35,"tagline":36,"description":37,"accentFrom":38,"accentTo":39,"icon":40,"defaultLocale":13,"locales":41,"features":42,"position":43},"7b3c16f2-931d-410e-802e-e1fa4edab7de","soft","Soft Skills","The half of the job nobody wrote documentation for.","Weekly, on the parts of working life that decide more than your code does — first weeks, meetings, interviews, promotions, and the people around you. Written from what actually happens, and recorded as a podcast you can listen to on the walk.","emerald-400","teal-300","◉",[13],{"courses":18,"paths":18,"articles":17,"exams":18,"flashcards":18,"packages":18,"community":17,"certificates":18,"teams":18,"commerce":18},3,{"id":45,"slug":46,"kind":47,"title":48,"description":49,"config":50,"verticalId":5,"vertical":55,"course":52,"_count":56,"access":57,"attempts":59,"questionCount":51},"01a143f6-5b5a-72ba-9758-7c6e7c3e41b8","fetchpriority-attribute-priority-hints","PRACTICE_QUIZ","Test yourself — fetchpriority","Check what actually changes when you set fetchpriority, which elements accept it, and where it stops being useful.",{"questionCount":51,"timeLimitSec":52,"shuffleQuestions":18,"shuffleOptions":17,"negativeMarking":19,"passScorePct":53,"maxAttempts":52,"revealAnswers":54,"allowFlagging":18,"allowBacktracking":17},7,null,70,"AFTER_SUBMIT",{"slug":6,"name":7},{"questions":51},{"allowed":17,"reason":58},"FREE",[],[61,65,69,73,77,81,85,89,93,97,101,104],{"slug":62,"name":63,"articles":64},"webdev","Webdev",149,{"slug":66,"name":67,"articles":68},"javascript","Javascript",122,{"slug":70,"name":71,"articles":72},"frontend","Frontend",87,{"slug":74,"name":75,"articles":76},"tutorial","Tutorial",57,{"slug":78,"name":79,"articles":80},"css","Css",44,{"slug":82,"name":83,"articles":84},"performance","Performance",25,{"slug":86,"name":87,"articles":88},"typescript","Typescript",20,{"slug":90,"name":91,"articles":92},"react","React",18,{"slug":94,"name":95,"articles":96},"browser","Browser",14,{"slug":98,"name":99,"articles":100},"node","Node",12,{"slug":102,"name":103,"articles":100},"programming","Programming",{"slug":105,"name":106,"articles":107},"html","Html",10,{"id":109,"slug":46,"title":110,"subtitle":52,"excerpt":111,"coverUrl":112,"locale":13,"readingMinutes":113,"publishedAt":114,"viewCount":115,"likeCount":19,"commentCount":19,"author":116,"vertical":121,"topic":122,"tags":123,"_count":128,"playground":130,"body":132,"bodyMd":282,"seo":283,"translationGroupId":285,"series":52,"podcastUrl":52,"verticalId":5,"thread":286,"assessments":288,"translations":291,"quiz":293},"01a143f6-5b0c-727f-aabc-b0dd80bb6f36","You're Letting the Browser Guess. `fetchpriority` Fixes That.","Your hero image is losing a bandwidth fight against a web font and a chat-widget script — fetchpriority tells the browser which request actually matters first.","\u002Fmedia\u002Fcovers\u002Ffetchpriority-attribute-priority-hints.png",5,"2026-10-21T06:10:33.381Z",62,{"id":117,"name":118,"username":119,"avatarUrl":52,"headline":120},"019fe637-3c25-7088-9034-39c9f15dc3c8","Parsa Jiravand","parsa","Frontend engineer · building bestpractic",{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":82,"name":83},[124,125,126,127],{"slug":62,"name":63,"color":52},{"slug":82,"name":83,"color":52},{"slug":66,"name":67,"color":52},{"slug":105,"name":106,"color":52},{"assessments":129},1,{"slug":46,"title":131},"fetchpriority — interactive playground",{"blocks":133,"version":129},[134,138,141,144,147,152,155,160,163,166,169,172,175,178,182,187,190,194,197,200,203,206,209,212,215,218,221,224,227,230,233,236,239,242,245,248,251,254,257,264,267,270,273,276],{"id":135,"html":136,"type":137},"b1","\u003Cp>Your Lighthouse report says 2.8 seconds to Largest Contentful Paint. The hero image is 40KB, served from a CDN, and the Network tab shows it downloading in 200ms flat once it starts.\u003C\u002Fp>","paragraph",{"id":139,"html":140,"type":137},"b2","\u003Cp>So why does it \u003Cem>start\u003C\u002Fem> 1.6 seconds after the page asked for it?\u003C\u002Fp>",{"id":142,"html":143,"type":137},"b3","\u003Cp>Scroll the waterfall and there they are, ahead of it: a web font, and a \u003Ccode><script>\u003C\u002Fcode> tag for a chat widget nobody's clicked yet. Nothing is technically broken. The browser just decided, on its own, that both of those matter more than the image your user is staring at.\u003C\u002Fp>",{"id":145,"html":146,"type":137},"b4","\u003Cp>The fix is one HTML attribute. Realizing the browser had an opinion about my image at all is what took the other three hours.\u003C\u002Fp>",{"id":148,"html":149,"text":150,"type":151,"level":31},"b5","The fixes that don't touch the queue","The fixes that don't touch the queue","heading",{"id":153,"html":154,"type":137},"b6","\u003Cp>The first instinct is to reach for \u003Ccode><link rel="preload">\u003C\u002Fcode>:\u003C\u002Fp>",{"id":156,"code":157,"type":158,"language":105,"highlight":159},"b7","\u003Clink rel=\"preload\" as=\"image\" href=\"\u002Fhero.jpg\">\n\u003Cimg src=\"\u002Fhero.jpg\" alt=\"Hero\">","code",[],{"id":161,"html":162,"type":137},"b8","\u003Cp>This genuinely helps — it tells the browser about the image before the parser would otherwise discover it, which is the right move if your hero image is buried in a \u003Ccode>background-image\u003C\u002Fcode> or loaded by JS. But preload changes \u003Cem>when the browser finds out\u003C\u002Fem> about a request. It says nothing about how that request should compete once it's sitting in the queue next to everything else.\u003C\u002Fp>",{"id":164,"html":165,"type":137},"b9","\u003Cp>Open your DevTools Network panel right now on any image-heavy page, right-click the column header, and turn on \u003Cstrong>Priority\u003C\u002Fstrong>. Find an above-the-fold image. If it says \u003Ccode>Low\u003C\u002Fcode> or \u003Ccode>Medium\u003C\u002Fcode>, you've found the bug before reading the next paragraph — and preloading it wouldn't have changed that column at all.\u003C\u002Fp>",{"id":167,"html":168,"type":137},"b10","\u003Cp>\u003Cstrong>Quick guess before I explain it:\u003C\u002Fstrong> why would a browser ever decide a visible hero image is \u003Cem>less\u003C\u002Fem> important than a font or a script it hasn't even rendered text with yet?\u003C\u002Fp>",{"id":170,"html":171,"text":171,"type":151,"level":31},"b11","The browser has a priority list, and your image is near the bottom of it",{"id":173,"html":174,"type":137},"b12","\u003Cp>Chromium, Firefox, and Safari all ship an internal resource-priority scheduler that ranks every request before it competes for a connection. The exact ranking is implementation-specific — Chromium's DevTools even exposes it as a column precisely because it isn't something you can read from the HTML — but the shape is consistent across engines: things that block rendering (CSS, \u003Ccode>@font-face\u003C\u002Fcode> sources once referenced by visible text, render-blocking scripts in \u003Ccode><head>\u003C\u002Fcode>) get bumped up. Images, by default, don't. The browser can't know your \u003Ccode><img>\u003C\u002Fcode> \u003Cem>is\u003C\u002Fem> the LCP element just by looking at the markup — it's guessing, and on real pages with real markup order, it guesses wrong often enough to matter.\u003C\u002Fp>",{"id":176,"html":177,"type":137},"b13","\u003Cp>\u003Ccode>fetchpriority\u003C\u002Fcode> exists so you stop leaving that guess to chance. It's not a new loading mechanism — it's a direct hint to the same scheduler that was already going to rank your request, on \u003Ccode><img>\u003C\u002Fcode>, \u003Ccode><link>\u003C\u002Fcode>, \u003Ccode><script>\u003C\u002Fcode>, and the \u003Ccode>priority\u003C\u002Fcode> option on \u003Ccode>fetch()\u003C\u002Fcode> itself:\u003C\u002Fp>",{"id":179,"code":180,"type":158,"language":105,"highlight":181},"b14","\u003Cimg src=\"\u002Fhero.jpg\" alt=\"Hero\" fetchpriority=\"high\">\n\n\u003Clink rel=\"preload\" as=\"image\" href=\"\u002Fhero.jpg\" fetchpriority=\"high\">",[],{"id":183,"code":184,"type":158,"language":185,"highlight":186},"b15","fetch(\"\u002Fapi\u002Fabove-the-fold-data\", { priority: \"high\" });","js",[],{"id":188,"html":189,"type":137},"b16","\u003Cp>And it cuts the other way too — you can tell the browser something matters \u003Cem>less\u003C\u002Fem> than its default guess, which is the half of this feature most people skip:\u003C\u002Fp>",{"id":191,"code":192,"type":158,"language":105,"highlight":193},"b17","\u003Cimg src=\"\u002Fcarousel-slide-4.jpg\" loading=\"lazy\" fetchpriority=\"low\">\n\u003Cscript src=\"\u002Fchat-widget.js\" defer fetchpriority=\"low\">\u003C\u002Fscript>",[],{"id":195,"html":196,"type":137},"b18","\u003Cp>Notice \u003Ccode>loading="lazy"\u003C\u002Fcode> and \u003Ccode>fetchpriority="low"\u003C\u002Fcode> sitting on the same \u003Ccode><img>\u003C\u002Fcode>, doing two different jobs: \u003Ccode>loading\u003C\u002Fcode> decides \u003Cem>when\u003C\u002Fem> the browser even starts caring about this image (near-viewport, not before); \u003Ccode>fetchpriority\u003C\u002Fcode> decides how it competes for bandwidth once it does start. People reach for one when they mean the other, then wonder why "lazy-loading everything" didn't fix their LCP — lazy-loading the wrong element doesn't touch priority, and deprioritizing the right one doesn't delay its start. They're levers on different axes.\u003C\u002Fp>",{"id":198,"html":199,"type":137},"b19","\u003Cp>Support isn't a gamble here, either: all three major engines ship \u003Ccode>fetchpriority\u003C\u002Fcode> now, and a browser that doesn't recognize it just ignores it, the way HTML always treats an attribute it doesn't know. There's no feature check to write and no fallback to design — it's additive from day one.\u003C\u002Fp>",{"id":201,"html":202,"text":202,"type":151,"level":31},"b20","What actually moves when you flip it",{"id":204,"html":205,"type":137},"b21","\u003Cp>Set \u003Ccode>fetchpriority="high"\u003C\u002Fcode> on the real LCP candidate and the effect isn't theoretical — it's a different value in that Priority column in DevTools, immediately, and a different position in the waterfall relative to whatever used to beat it there. The playground below models a simplified version of exactly this: two connections, three requests — a font, a script, and a hero image — and one dial on the image. Run it both ways and watch the image's finish time roughly halve, and the chat widget's finish time get pushed back to pay for it.\u003C\u002Fp>",{"id":207,"html":208,"type":137},"b22","\u003Cp>That tradeoff is the honest part people leave out of posts like this. Priority is zero-sum on a connection that can only do so much at once. Marking your hero image \u003Ccode>high\u003C\u002Fcode> doesn't manufacture bandwidth — it takes some back from whatever the browser was giving it to a script your user probably hasn't needed yet. That's usually the right trade. It's still a trade, and it's one you're now making on purpose instead of by accident.\u003C\u002Fp>",{"id":210,"html":211,"type":137},"b23","\u003C!-- playground:start -->",{"id":213,"html":214,"text":214,"type":151,"level":31},"b24","🎮 Try it yourself",{"id":216,"html":217,"type":137},"b25","\u003Cp>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fbestpractic.org\u002Fblog\u002Ffetchpriority-attribute-priority-hints\u002Fplayground\">▶️ Open the interactive playground →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":219,"html":220,"type":137},"b26","\u003Cp>\u003Cem>Runs right in your browser — poke at it and watch the concept react live.\u003C\u002Fem>\u003C\u002Fp>",{"id":222,"html":223,"type":137},"b27","\u003C!-- playground:end -->",{"id":225,"html":226,"text":226,"type":151,"level":31},"b28","The payoff",{"id":228,"html":229,"type":137},"b29","\u003Cp>The chat widget script was never the villain. It's just a thing that can wait, sitting in a queue that didn't know it could wait, next to an image that couldn't. \u003Ccode>fetchpriority\u003C\u002Fcode> doesn't add a request or remove one — it tells the browser the one thing it was never in a position to know on its own: which pixel your user is actually staring at.\u003C\u002Fp>",{"id":231,"html":232,"type":137},"b30","\u003Cp>One line. No library, no build step, no \u003Ccode>useEffect\u003C\u002Fcode> to clean up.\u003C\u002Fp>",{"id":234,"html":235,"type":137},"b31","\u003Cp>Go open your Network tab on something you shipped. Add the Priority column. If your LCP image says \u003Ccode>Low\u003C\u002Fcode>, you already know what's next to it — a font, a script, something that doesn't need to win. What's it racing against on your site? I'd genuinely like to know what you find.\u003C\u002Fp>",{"id":237,"html":238,"type":137},"b32","\u003C!-- quiz:start -->",{"id":240,"html":241,"text":241,"type":151,"level":31},"b33","🧠 Test yourself",{"id":243,"html":244,"type":137},"b34","\u003Cp>Think it clicked? \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fbestpractic.org\u002Fblog\u002Ffetchpriority-attribute-priority-hints\u002Fquiz\">Take the 7-question quiz →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":246,"html":247,"type":137},"b35","\u003Cp>\u003Cem>Instant feedback, a hint on every question, and an explanation for each answer — right or wrong.\u003C\u002Fem>\u003C\u002Fp>",{"id":249,"html":250,"type":137},"b36","\u003C!-- quiz:end -->",{"id":252,"html":253,"type":137},"b37","\u003C!-- related:start -->",{"id":255,"html":256,"text":256,"type":151,"level":31},"b38","📚 Read next",{"id":258,"type":259,"items":260,"ordered":18},"b39","list",[261,262,263],"\u003Ca href=\"https:\u002F\u002Fbestpractic.org\u002Fblog\u002Finert-attribute-disable-interaction\">The Modal Was Open. So Was Everything Behind It.\u003C\u002Fa>","\u003Ca href=\"https:\u002F\u002Fbestpractic.org\u002Fblog\u002Fdeclarative-shadow-dom-ssr-web-components\">Shadow DOM Needed JavaScript to Exist. Now It Doesn't.\u003C\u002Fa>","\u003Ca href=\"https:\u002F\u002Fbestpractic.org\u002Fblog\u002Fformdata-file-upload-json-stringify-trap\">JSON.stringify Is Quietly Deleting Your File Uploads\u003C\u002Fa>",{"id":265,"html":266,"type":137},"b40","\u003C!-- related:end -->",{"id":268,"type":269},"b41","divider",{"id":271,"html":272,"type":137},"b42","\u003Cp>🚀 \u003Cstrong>Want more like this?\u003C\u002Fstrong> Every guide, playground, and quiz lives on \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fbestpractic.org\u002F\">bestpractic.org\u003C\u002Fa>\u003C\u002Fstrong> — open it and \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fbestpractic.org\u002F\">sign up free\u003C\u002Fa>\u003C\u002Fstrong> so the next one finds you.\u003C\u002Fp>",{"id":274,"html":275,"type":137},"b43","\u003Cp>\u003Cem>Thanks for reading! Let's stay connected:\u003C\u002Fem>\u003C\u002Fp>",{"id":277,"type":259,"items":278,"ordered":18},"b44",[279,280,281],"⭐ \u003Cstrong>GitHub\u003C\u002Fstrong> — follow me and star the projects: \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fparsajiravand\">github.com\u002Fparsajiravand\u003C\u002Fa>","💬 \u003Cstrong>Discord\u003C\u002Fstrong> — join the frontend best-practices community: \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ\">discord.gg\u002Fd9KRhuAwQ\u003C\u002Fa>","📸 \u003Cstrong>Instagram\u003C\u002Fstrong> — frontend best practices, daily: \u003Ca href=\"https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F\">@bestpractice___\u003C\u002Fa>","Your Lighthouse report says 2.8 seconds to Largest Contentful Paint. The hero image is 40KB, served from a CDN, and the Network tab shows it downloading in 200ms flat once it starts.\n\nSo why does it *start* 1.6 seconds after the page asked for it?\n\nScroll the waterfall and there they are, ahead of it: a web font, and a `\u003Cscript>` tag for a chat widget nobody's clicked yet. Nothing is technically broken. The browser just decided, on its own, that both of those matter more than the image your user is staring at.\n\nThe fix is one HTML attribute. Realizing the browser had an opinion about my image at all is what took the other three hours.\n\n## The fixes that don't touch the queue\n\nThe first instinct is to reach for `\u003Clink rel=\"preload\">`:\n\n```html\n\u003Clink rel=\"preload\" as=\"image\" href=\"\u002Fhero.jpg\">\n\u003Cimg src=\"\u002Fhero.jpg\" alt=\"Hero\">\n```\n\nThis genuinely helps — it tells the browser about the image before the parser would otherwise discover it, which is the right move if your hero image is buried in a `background-image` or loaded by JS. But preload changes *when the browser finds out* about a request. It says nothing about how that request should compete once it's sitting in the queue next to everything else.\n\nOpen your DevTools Network panel right now on any image-heavy page, right-click the column header, and turn on **Priority**. Find an above-the-fold image. If it says `Low` or `Medium`, you've found the bug before reading the next paragraph — and preloading it wouldn't have changed that column at all.\n\n**Quick guess before I explain it:** why would a browser ever decide a visible hero image is *less* important than a font or a script it hasn't even rendered text with yet?\n\n## The browser has a priority list, and your image is near the bottom of it\n\nChromium, Firefox, and Safari all ship an internal resource-priority scheduler that ranks every request before it competes for a connection. The exact ranking is implementation-specific — Chromium's DevTools even exposes it as a column precisely because it isn't something you can read from the HTML — but the shape is consistent across engines: things that block rendering (CSS, `@font-face` sources once referenced by visible text, render-blocking scripts in `\u003Chead>`) get bumped up. Images, by default, don't. The browser can't know your `\u003Cimg>` *is* the LCP element just by looking at the markup — it's guessing, and on real pages with real markup order, it guesses wrong often enough to matter.\n\n`fetchpriority` exists so you stop leaving that guess to chance. It's not a new loading mechanism — it's a direct hint to the same scheduler that was already going to rank your request, on `\u003Cimg>`, `\u003Clink>`, `\u003Cscript>`, and the `priority` option on `fetch()` itself:\n\n```html\n\u003Cimg src=\"\u002Fhero.jpg\" alt=\"Hero\" fetchpriority=\"high\">\n\n\u003Clink rel=\"preload\" as=\"image\" href=\"\u002Fhero.jpg\" fetchpriority=\"high\">\n```\n\n```js\nfetch(\"\u002Fapi\u002Fabove-the-fold-data\", { priority: \"high\" });\n```\n\nAnd it cuts the other way too — you can tell the browser something matters *less* than its default guess, which is the half of this feature most people skip:\n\n```html\n\u003Cimg src=\"\u002Fcarousel-slide-4.jpg\" loading=\"lazy\" fetchpriority=\"low\">\n\u003Cscript src=\"\u002Fchat-widget.js\" defer fetchpriority=\"low\">\u003C\u002Fscript>\n```\n\nNotice `loading=\"lazy\"` and `fetchpriority=\"low\"` sitting on the same `\u003Cimg>`, doing two different jobs: `loading` decides *when* the browser even starts caring about this image (near-viewport, not before); `fetchpriority` decides how it competes for bandwidth once it does start. People reach for one when they mean the other, then wonder why \"lazy-loading everything\" didn't fix their LCP — lazy-loading the wrong element doesn't touch priority, and deprioritizing the right one doesn't delay its start. They're levers on different axes.\n\nSupport isn't a gamble here, either: all three major engines ship `fetchpriority` now, and a browser that doesn't recognize it just ignores it, the way HTML always treats an attribute it doesn't know. There's no feature check to write and no fallback to design — it's additive from day one.\n\n## What actually moves when you flip it\n\nSet `fetchpriority=\"high\"` on the real LCP candidate and the effect isn't theoretical — it's a different value in that Priority column in DevTools, immediately, and a different position in the waterfall relative to whatever used to beat it there. The playground below models a simplified version of exactly this: two connections, three requests — a font, a script, and a hero image — and one dial on the image. Run it both ways and watch the image's finish time roughly halve, and the chat widget's finish time get pushed back to pay for it.\n\nThat tradeoff is the honest part people leave out of posts like this. Priority is zero-sum on a connection that can only do so much at once. Marking your hero image `high` doesn't manufacture bandwidth — it takes some back from whatever the browser was giving it to a script your user probably hasn't needed yet. That's usually the right trade. It's still a trade, and it's one you're now making on purpose instead of by accident.\n\n\u003C!-- playground:start -->\n\n## 🎮 Try it yourself\n\n**[▶️ Open the interactive playground →](https:\u002F\u002Fbestpractic.org\u002Fblog\u002Ffetchpriority-attribute-priority-hints\u002Fplayground)**\n\n_Runs right in your browser — poke at it and watch the concept react live._\n\n\u003C!-- playground:end -->\n\n## The payoff\n\nThe chat widget script was never the villain. It's just a thing that can wait, sitting in a queue that didn't know it could wait, next to an image that couldn't. `fetchpriority` doesn't add a request or remove one — it tells the browser the one thing it was never in a position to know on its own: which pixel your user is actually staring at.\n\nOne line. No library, no build step, no `useEffect` to clean up.\n\nGo open your Network tab on something you shipped. Add the Priority column. If your LCP image says `Low`, you already know what's next to it — a font, a script, something that doesn't need to win. What's it racing against on your site? I'd genuinely like to know what you find.\n\n\u003C!-- quiz:start -->\n\n## 🧠 Test yourself\n\nThink it clicked? **[Take the 7-question quiz →](https:\u002F\u002Fbestpractic.org\u002Fblog\u002Ffetchpriority-attribute-priority-hints\u002Fquiz)**\n\n_Instant feedback, a hint on every question, and an explanation for each answer — right or wrong._\n\n\u003C!-- quiz:end -->\n\n\u003C!-- related:start -->\n\n## 📚 Read next\n\n- [The Modal Was Open. So Was Everything Behind It.](https:\u002F\u002Fbestpractic.org\u002Fblog\u002Finert-attribute-disable-interaction)\n- [Shadow DOM Needed JavaScript to Exist. Now It Doesn't.](https:\u002F\u002Fbestpractic.org\u002Fblog\u002Fdeclarative-shadow-dom-ssr-web-components)\n- [JSON.stringify Is Quietly Deleting Your File Uploads](https:\u002F\u002Fbestpractic.org\u002Fblog\u002Fformdata-file-upload-json-stringify-trap)\n\n\u003C!-- related:end -->\n\n---\n\n🚀 **Want more like this?** Every guide, playground, and quiz lives on **[bestpractic.org](https:\u002F\u002Fbestpractic.org\u002F)** — open it and **[sign up free](https:\u002F\u002Fbestpractic.org\u002F)** so the next one finds you.\n\n*Thanks for reading! Let's stay connected:*\n\n- ⭐ **GitHub** — follow me and star the projects: [github.com\u002Fparsajiravand](https:\u002F\u002Fgithub.com\u002Fparsajiravand)\n- 💬 **Discord** — join the frontend best-practices community: [discord.gg\u002Fd9KRhuAwQ](https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ)\n- 📸 **Instagram** — frontend best practices, daily: [@bestpractice___](https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F)",{"title":110,"canonical":284,"description":111},"https:\u002F\u002Fbestpractic.org\u002Fblog\u002Ffetchpriority-attribute-priority-hints","01a143f6-5b0c-727f-aabc-b405afac4668",{"id":287,"locked":18},"01a143f6-5b2c-718f-9bf9-7229e1a0a986",[289],{"id":45,"slug":46,"title":48,"_count":290},{"questions":51},[292],{"locale":13,"slug":46},{"id":45,"slug":46,"title":48,"_count":294,"questionCount":51},{"questions":51},[]]