{"id":400947,"date":"2023-09-19T05:07:00","date_gmt":"2023-09-19T05:07:00","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=400947"},"modified":"2023-09-22T13:18:52","modified_gmt":"2023-09-22T13:18:52","slug":"fetch-priority-magento2","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/fetch-priority-magento2\/","title":{"rendered":"Optimisation with Fetch Priority in Magento 2"},"content":{"rendered":"\n<p>Fetch priority API helps in optimising the resource loading time. It can enable optimal loading and improve <a href=\"https:\/\/webkul.com\/blog\/improve-cls-and-lcp\/\">Core Web Vitals<\/a>. <\/p>\n\n\n\n<p>When web browser downloads the resource such as image, css and script, it assign the fetch priority (high or low) to them in order to load then in the most optimal order. <\/p>\n\n\n\n<p>This blog describe the Fetch Priority API and the\u00a0<code>fetchpriority<\/code>\u00a0HTML attribute. By specifying\u00a0<code>fetchpriority<\/code> attribute in resources it manages their priority.<\/p>\n\n\n\n<p>Fetch priority prioritise the resources of the page and helps in the <a href=\"https:\/\/webkul.com\/blog\/magento2-seo-checklist\/\">SEO performance<\/a>. It dictate which webpage resources should be downloaded first to render.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">When to use Fetch Priority<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Place resource tags such as&nbsp;<code>&lt;script&gt;<\/code>&nbsp;and&nbsp;<code>&lt;link&gt;<\/code>&nbsp;depending on the order you want to download them.&nbsp;<\/li>\n\n\n\n<li>Use async or defer to download scripts without blocking other resources.<\/li>\n\n\n\n<li>Use the preload resource hint to download necessary resources earlier<\/li>\n\n\n\n<li>Browser can use the available bandwidth for more critical by lazy loading the below-the-fold content.<\/li>\n<\/ul>\n\n\n\n<p>Javascript fetch fetch() api use to fetch the recources asynchronously. <\/p>\n\n\n\n<p><code>fetch()<\/code>\u00a0allows you to make network requests similar to XMLHttpRequest (XHR). <\/p>\n\n\n\n<p>fetch() method start the process in fetching the resources from the server. fetch() method returns the promise that resolves the Response object.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">fetch(&#039;.\/api\/some.json&#039;)\n    .then(\n    function(response) {\n        if (response.status !== 200) {\n        console.log(&#039;Looks like there was a problem. Status Code: &#039; +\n            response.status);\n        return;\n        }\n        \/\/ Examine the text in the response\n        response.json().then(function(data) {\n        console.log(data);\n        });\n    })\n    .catch(function(err) {\n    console.log(&#039;Fetch Error :-S&#039;, err);\n });<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Fetch Priority attributes<\/h3>\n\n\n\n<p>High: Browser will increase the priority of the resources with attribute high. <\/p>\n\n\n\n<p>Low: Browser will lower the priority of the resources with attribute low. <\/p>\n\n\n\n<p>Auto: This is the default value where you don&#8217;t have a preference and let the browser decide the appropriate priority.<\/p>\n\n\n\n<p><strong>Example of fetchpriority attribute:<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;!-- We don&#039;t want a high priority for this above-the-fold image --&gt;\n&lt;img src=&quot;\/images\/in_viewport_but_not_important.svg&quot; fetchpriority=&quot;low&quot; alt=&quot;I&#039;m an unimportant image!&quot;&gt;\n&lt;!-- We want to initiate an early fetch for a resource, but also deprioritize it --&gt;\n&lt;link rel=&quot;preload&quot; href=&quot;\/js\/script.js&quot; as=&quot;script&quot; fetchpriority=&quot;low&quot;&gt;&lt;script&gt;\nfetch(&#039;https:\/\/example.com\/&#039;, {priority: &#039;low&#039;})\n.then(data =&gt; {\n\/\/ Trigger a low priority fetch\n});\n&lt;\/script&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Lower the priority of above-the-fold images<\/h3>\n\n\n\n<p>On using fetchpriority=&#8221;low&#8221; attribute can lower the priority of above-the-fold images that are not important.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;ul class=&quot;carousel&quot;&gt;\n  &lt;img src=&quot;img\/carousel-1.jpg&quot; fetchpriority=&quot;high&quot;&gt;\n  &lt;img src=&quot;img\/carousel-2.jpg&quot; fetchpriority=&quot;low&quot;&gt;\n  &lt;img src=&quot;img\/carousel-3.jpg&quot; fetchpriority=&quot;low&quot;&gt;\n  &lt;img src=&quot;img\/carousel-4.jpg&quot; fetchpriority=&quot;low&quot;&gt;\n&lt;\/ul&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Increase the priority of the image<\/h3>\n\n\n\n<p>On specifying\u00a0<code>fetchpriority=\"high\"<\/code>\u00a0will boost the priority of the LCP or other critical images like (jpeg, <a href=\"https:\/\/webkul.com\/blog\/performance-optimization-webp\/\">Webp<\/a>, png) and improves the <a href=\"https:\/\/webkul.com\/blog\/magento-2-speed-optimization-techniques\/\">page speed<\/a>.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;img src=&quot;lcp-image.jpg&quot; fetchpriority=&quot;high&quot;&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Lower the priority of the resource<\/h3>\n\n\n\n<p>To stop preloaded resources from competing with other critical resources, you could provide a hint to reduce their priority. This can be done by:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;!-- Lower priority only for non-critical preloaded scripts --&gt;\n&lt;link rel=&quot;preload&quot; as=&quot;script&quot; href=&quot;critical-script.js&quot;&gt;\n&lt;link rel=&quot;preload&quot; href=&quot;\/js\/script.js&quot; as=&quot;script&quot; fetchpriority=&quot;low&quot;&gt;\n&lt;!-- Preload CSS without blocking other resources --&gt;\n&lt;link rel=&quot;preload&quot; as=&quot;style&quot; href=&quot;theme.css&quot; fetchpriority=&quot;low&quot; onload=&quot;this.rel=&#039;stylesheet&#039;&quot;&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Reprioritize scripts<\/h3>\n\n\n\n<p>Some scripts make the part of the pages interactive on using async attribute. But somehow effect or block other resources as well. <\/p>\n\n\n\n<p>Using fetchpriority attribute with async prioritise the  resources with mentioned priority.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;script src=&quot;async_but_important.js&quot; async fetchpriority=&quot;high&quot;&gt;&lt;\/script&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Lower the priority of non-critical data fetches <\/h3>\n\n\n\n<p>Browser executes the fetch with high priority. If you have multiple fetch you can prioritise the fetch with low, high and auto attributes.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">let authenticate = await fetch(&#039;\/user&#039;);\nlet suggestedContent = await fetch(&#039;\/content\/suggested&#039;, {priority: &#039;low&#039;});<\/pre>\n\n\n\n<p>Compatibility with browser<\/p>\n\n\n\n<p>Fetch priority is only available in Chromium-based browsers.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Use in Magento 2<\/h3>\n\n\n\n<p>Developer can use the fetch priority to load the js and other resources on priroty.<\/p>\n\n\n\n<p>Manage the priority of the images in carousel on low, high and auto.<\/p>\n\n\n\n<p>Use the fetch api for ajax to get the resource and even prioritise them.<\/p>\n\n\n\n<p>Use in js file<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">require(&#091;\n    &quot;jquery&quot;,\n    &#039;mage\/url&#039;\n], function($, url) {\n    var url = url.build(&#039;cms\/index\/index&#039;);\n    fetch(url, {\n        priority: &#039;low&#039;,\n        method: &#039;post&#039;,\n        headers: {\n            &quot;Content-type&quot;: &quot;application\/x-www-form-urlencoded; charset=UTF-8&quot;\n        },\n        body: &#039;foo=bar&amp;lorem=ipsum&#039;\n        })\n        .then(function (data) {\n        console.log(&#039;Request succeeded with JSON response&#039;, data);\n        })\n        .catch(function (error) {\n        console.log(&#039;Request failed&#039;, error);\n    });\n});<\/pre>\n\n\n\n<p>Priority column signifies the priority of resources.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"340\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/09\/sadasdasdasdasd-1200x340.png\" alt=\"sadasdasdasdasd\" class=\"wp-image-401128\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/09\/sadasdasdasdasd-1200x340.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/09\/sadasdasdasdasd-300x85.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/09\/sadasdasdasdasd-250x71.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/09\/sadasdasdasdasd-768x218.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/09\/sadasdasdasdasd.png 1288w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Fetch priority is a kind of <a href=\"https:\/\/store.webkul.com\/magento2-speed-optimization.html\">speed optimisation service<\/a> that manages the resources and improve the web vitals of the page.<\/p>\n\n\n\n<p>Hope this will be helpful. Thanks<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Fetch priority API helps in optimising the resource loading time. It can enable optimal loading and improve Core Web Vitals. When web browser downloads the resource such as image, css and script, it assign the fetch priority (high or low) to them in order to load then in the most optimal order. This blog describe <a href=\"https:\/\/webkul.com\/blog\/fetch-priority-magento2\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":277,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9121,1],"tags":[],"class_list":["post-400947","post","type-post","status-publish","format-standard","hentry","category-magento-2","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Optimisation with Fetch Priority in Magento 2 - Webkul Blog web vitals<\/title>\n<meta name=\"description\" content=\"The Fetch Priority API indicates the relative priority of resources to the browser. It can enable optimal loading and improve Core Web Vitals\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/fetch-priority-magento2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Optimisation with Fetch Priority in Magento 2 - Webkul Blog web vitals\" \/>\n<meta property=\"og:description\" content=\"The Fetch Priority API indicates the relative priority of resources to the browser. It can enable optimal loading and improve Core Web Vitals\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/fetch-priority-magento2\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-19T05:07:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-22T13:18:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/09\/sadasdasdasdasd-1200x340.png\" \/>\n<meta name=\"author\" content=\"Akash Rajput\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Akash Rajput\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/fetch-priority-magento2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/fetch-priority-magento2\/\"},\"author\":{\"name\":\"Akash Rajput\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/9831fa86f42528fdcf494b59ff6cf6e2\"},\"headline\":\"Optimisation with Fetch Priority in Magento 2\",\"datePublished\":\"2023-09-19T05:07:00+00:00\",\"dateModified\":\"2023-09-22T13:18:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/fetch-priority-magento2\/\"},\"wordCount\":496,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/fetch-priority-magento2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/09\/sadasdasdasdasd-1200x340.png\",\"articleSection\":[\"Magento 2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/fetch-priority-magento2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/fetch-priority-magento2\/\",\"url\":\"https:\/\/webkul.com\/blog\/fetch-priority-magento2\/\",\"name\":\"Optimisation with Fetch Priority in Magento 2 - Webkul Blog web vitals\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/fetch-priority-magento2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/fetch-priority-magento2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/09\/sadasdasdasdasd-1200x340.png\",\"datePublished\":\"2023-09-19T05:07:00+00:00\",\"dateModified\":\"2023-09-22T13:18:52+00:00\",\"description\":\"The Fetch Priority API indicates the relative priority of resources to the browser. It can enable optimal loading and improve Core Web Vitals\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/fetch-priority-magento2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/fetch-priority-magento2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/fetch-priority-magento2\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/09\/sadasdasdasdasd.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/09\/sadasdasdasdasd.png\",\"width\":1288,\"height\":365,\"caption\":\"sadasdasdasdasd\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/fetch-priority-magento2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Optimisation with Fetch Priority in Magento 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/9831fa86f42528fdcf494b59ff6cf6e2\",\"name\":\"Akash Rajput\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c7618982141d5bb19bbb0abea082fba6c06a2041a254b738d9132ec7f9c1bc20?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c7618982141d5bb19bbb0abea082fba6c06a2041a254b738d9132ec7f9c1bc20?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Akash Rajput\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/akash-rajput648\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Optimisation with Fetch Priority in Magento 2 - Webkul Blog web vitals","description":"The Fetch Priority API indicates the relative priority of resources to the browser. It can enable optimal loading and improve Core Web Vitals","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/fetch-priority-magento2\/","og_locale":"en_US","og_type":"article","og_title":"Optimisation with Fetch Priority in Magento 2 - Webkul Blog web vitals","og_description":"The Fetch Priority API indicates the relative priority of resources to the browser. It can enable optimal loading and improve Core Web Vitals","og_url":"https:\/\/webkul.com\/blog\/fetch-priority-magento2\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2023-09-19T05:07:00+00:00","article_modified_time":"2023-09-22T13:18:52+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/09\/sadasdasdasdasd-1200x340.png","type":"","width":"","height":""}],"author":"Akash Rajput","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Akash Rajput","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/fetch-priority-magento2\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/fetch-priority-magento2\/"},"author":{"name":"Akash Rajput","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/9831fa86f42528fdcf494b59ff6cf6e2"},"headline":"Optimisation with Fetch Priority in Magento 2","datePublished":"2023-09-19T05:07:00+00:00","dateModified":"2023-09-22T13:18:52+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/fetch-priority-magento2\/"},"wordCount":496,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/fetch-priority-magento2\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/09\/sadasdasdasdasd-1200x340.png","articleSection":["Magento 2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/fetch-priority-magento2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/fetch-priority-magento2\/","url":"https:\/\/webkul.com\/blog\/fetch-priority-magento2\/","name":"Optimisation with Fetch Priority in Magento 2 - Webkul Blog web vitals","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/fetch-priority-magento2\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/fetch-priority-magento2\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/09\/sadasdasdasdasd-1200x340.png","datePublished":"2023-09-19T05:07:00+00:00","dateModified":"2023-09-22T13:18:52+00:00","description":"The Fetch Priority API indicates the relative priority of resources to the browser. It can enable optimal loading and improve Core Web Vitals","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/fetch-priority-magento2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/fetch-priority-magento2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/fetch-priority-magento2\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/09\/sadasdasdasdasd.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/09\/sadasdasdasdasd.png","width":1288,"height":365,"caption":"sadasdasdasdasd"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/fetch-priority-magento2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Optimisation with Fetch Priority in Magento 2"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/9831fa86f42528fdcf494b59ff6cf6e2","name":"Akash Rajput","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c7618982141d5bb19bbb0abea082fba6c06a2041a254b738d9132ec7f9c1bc20?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c7618982141d5bb19bbb0abea082fba6c06a2041a254b738d9132ec7f9c1bc20?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Akash Rajput"},"url":"https:\/\/webkul.com\/blog\/author\/akash-rajput648\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/400947","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/277"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=400947"}],"version-history":[{"count":67,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/400947\/revisions"}],"predecessor-version":[{"id":402002,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/400947\/revisions\/402002"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=400947"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=400947"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=400947"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}