{"id":110704,"date":"2023-08-30T11:09:17","date_gmt":"2023-08-30T15:09:17","guid":{"rendered":"https:\/\/feastdesignco.com\/?p=110704"},"modified":"2023-09-06T12:02:09","modified_gmt":"2023-09-06T16:02:09","slug":"fetchpriority","status":"publish","type":"post","link":"https:\/\/feastdesignco.com\/fetchpriority\/","title":{"rendered":"fetchPriority"},"content":{"rendered":"\n

The fetchPriority attribute allows sites to load quicker by telling the browser how the site thinks content (scripts and images) should load.<\/p>\n\n\n\n

This is a pagespeed update we're able to roll out to all sites automatically thanks to our optimized setup. Simply update to version 9.7.4+ of the Feast Plugin and enable it:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

These automatic updates that let you focus on creating content is the most valued feature of the Feast Plugin because without it, an update like this would require hiring a developer or manually installing a theme update.<\/p>\n\n\n[feast_advanced_jump_to]\n\n\n

WordPress fetchpriority<\/h2>\n\n\n\n

In WordPress 6.3, fetchPriority=\"high\" is automatically added to the first image in the post. <\/p>\n\n\n\n

This is generally a safe assumption and matches our recommendations for post layouts<\/a> so it's not something we'll remove. In fact, we would have don this alongside the skip-lazy feature we added previously to improve site performance<\/a>.<\/p>\n\n\n\n

However, all themes are done different so WordPress is unable to (safely) prioritize or deprioritize other images the site loads. That's where Feast comes in.<\/p>\n\n\n\n

Optimizing Feast<\/h2>\n\n\n\n

Sites using the Modern Menu<\/a>, Modern Sidebar<\/a> and Modern Footer<\/a> are built to be fairly consistent and static, allowing us to make judgement calls and decisions about how we can better support our users over time as new features like this come out.<\/p>\n\n\n\n

Since 80% of pageviews are mobile, we're going to focus on mobile-first optimization.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

We can see that the logo loads above the fold and should also be fetched with a high priority.<\/p>\n\n\n\n

However, all other content in the Modern Prev + Next<\/a>, sidebar and footer loads offscreen and can be set to low priority.<\/p>\n\n\n\n

What was done<\/h2>\n\n\n\n

In order to improve Core Web Vitals, we want to load content above-the-fold (the screenshot above) as quickly as possible, so we'll set a high fetch priority for those items. We can also be explicit in telling the browser which items are not above-the-fold and should therefore be deferred until the more important things are taken care of.<\/p>\n\n\n\n

We're currently testing this but we expect that all sites will be optimized by assigning a fetchPriority of: <\/p>\n\n\n\n