\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CIntroSlider />\r\n \u003CWidgetFeatured />\r\n \u003CLazyWidgetBenefits />\r\n \u003CLazyWidgetProducts />\r\n \u003CLazyWidgetBannersSlider />\r\n \u003CLazyWidgetBanners />\r\n \u003CLazyWidgetTestimonials />\r\n \u003CLazyFooter />\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n\r\nAnd here you can see the Network queue. Footer's mjs and css are loaded as 7th most important assets. This is not what I'm expecting because content like images inside intro slider are more important than footer.\r\n\r\n```\r\ncss2?family=Inter:wght@400;500;600&display=swap\r\nentry-9827921d.mjs\r\nentry.c17fe9a0.css\r\ndefault-84799b20.mjs\r\ndefault.84b15a94.css\r\nAlert-84c7b89b.mjs\r\nFooter-ff7172cf.mjs\r\nFooter.b99df422.css\r\nVNuxtLink-a1e036df.mjs\r\nVButton-89f5f43e.mjs\r\nContainerFluid-62a50c2c.mjs\r\n```\r\n\n\n### Describe the bug\n\nNo way to disable default preload behaviour. Or is there a way to disable preload behaviour and mark component as with high priority which will preload its mjs and css?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2900,2901],{"name":2866,"color":2867},{"name":2869,"color":2870},13874,"allow changing priority hints for modules and their CSS","2024-12-26T06:08:32Z","https://github.com/nuxt/nuxt/issues/13874",0.7253208,{"description":2908,"labels":2909,"number":2913,"owner":2872,"repository":2872,"state":2873,"title":2914,"updated_at":2915,"url":2916,"score":2917},"### Environment\n\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v18.3.0`\r\n- Nuxt Version: `3.1.1`\r\n- Nitro Version: `2.1.0`\r\n- Package Manager: `npm@8.11.0`\r\n- Builder: `webpack`\r\n- User Config: `ssr`, `builder`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-bye8qn?file=pages%2Findex.vue,nuxt.config.ts\r\n\r\n1. run `npm run generate`\r\n2. serve the dist directory `python -m http.server`\r\n3. visit the page http://0.0.0.0:8000\r\n4. open dev tools > disable javascript\r\n5. reload the page\r\n6. the styles are not applied (we would expect a red background with a blue text color)\r\n\r\n\n\n### Describe the bug\n\nBy prerendering of a website using the webpack-builder the prefetched Styles are not applied on page load. \r\nSo on page load it could take a few hundered milliseconds (depending on Network, Device and amount of styles) before the styles are loaded correctly. This behavior leads to a really bad UX by visiting a website because the content on the page is jumping a lot after style load. \r\n\r\nAfter digging for the reason I compared the output with an older nuxt version (3rc8). So I figured out, the styles are loaded as:\r\n* 3rc8 `\u003Clink rel=\"prefetch stylesheet\" href=\"/_nuxt/css/6cb3bde.css\">`\r\n* now `\u003Clink rel=\"prefetch\" as=\"style\" href=\"/_nuxt/css/6cb3bde.css\">`\r\n\r\nbut the new way only prefetches the style, but does not apply it. (See Reproduction by disabling js)\r\nSo, because the styles are getting loaded (and applied) anyway, it seems some js is taking care of loading and appling it.\r\n\r\n\n\n### Additional context\n\n#### Countercheck\r\n\r\n* replace `rel=\"prefetch\" as=\"style\"` with `rel=\"prefetch stylesheet\"` in the index.html\r\n* reload the page (the style is applied almost immediately)\n\n### Logs\n\n_No response_",[2910],{"name":2911,"color":2912},"pending triage","E99695",18558,"prefetched styles not loading (webpack-builder)","2024-06-30T11:09:38Z","https://github.com/nuxt/nuxt/issues/18558",0.7319188,{"description":2919,"labels":2920,"number":2923,"owner":2872,"repository":2872,"state":2873,"title":2924,"updated_at":2925,"url":2926,"score":2927},"For CSS minification, I am not sure if users would want full control over which tool to use, maybe could be an option as `'cssnano' | 'esbuild' | 'lightningcss'` where we built a thin layer of adapter?\r\n\r\n_Originally posted by @antfu in https://github.com/nuxt/nuxt/issues/23861#issuecomment-1776418823_\r\n ",[2921,2922],{"name":2866,"color":2867},{"name":2869,"color":2870},23922,"configurable css minifier","2024-06-30T11:07:10Z","https://github.com/nuxt/nuxt/issues/23922",0.7326082,{"labels":2929,"number":2934,"owner":2872,"repository":2872,"state":2935,"title":2936,"updated_at":2937,"url":2938,"score":2939},[2930,2931],{"name":2866,"color":2867},{"name":2932,"color":2933},"2.x","d4c5f9",8113,"closed","Preload resources set crossorigin separately between css and js.","2024-06-14T16:04:13Z","https://github.com/nuxt/nuxt/issues/8113",0.6925838,{"description":2941,"labels":2942,"number":2953,"owner":2872,"repository":2872,"state":2935,"title":2954,"updated_at":2955,"url":2956,"score":2957},"We now have styles inlined in the page (https://github.com/nuxt/framework/pull/7160), and we've switched the global CSS file to a non-blocking prefetch. However, the vite preloader does still add these styles to the page, and we can probably avoid this (or have an option to avoid this).\n\n**Note**: this may be unfeasible as `entry.css` may include _more_ CSS than is inlined in the page, and be necessary for subsequent navigation. See https://github.com/nuxt/nuxt.js/issues/14943 for example.",[2943,2944,2947,2950],{"name":2866,"color":2867},{"name":2945,"color":2946},"3.x","29bc7f",{"name":2948,"color":2949},"vite","3574D1",{"name":2951,"color":2952},"performance","E84B77",14953,"prevent loading global style entry css file","2023-01-19T17:43:00Z","https://github.com/nuxt/nuxt/issues/14953",0.70455384,{"description":2959,"labels":2960,"number":2962,"owner":2872,"repository":2872,"state":2935,"title":2963,"updated_at":2964,"url":2965,"score":2966},"Is there a way to make the CSS for all pages (`\u003Cstyle>` blocks within them) preload? Is this already what happens? It gives the impression the CSS is being applied as the page loads. Is the current solution to display an overlay `\u003Cdiv>` as a full-page loader?\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1340\">#c1340\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2961],{"name":2932,"color":2933},1505,"Automatic preloading of CSS","2023-01-18T15:41:52Z","https://github.com/nuxt/nuxt/issues/1505",0.7062302,{"description":2968,"labels":2969,"number":2973,"owner":2872,"repository":2872,"state":2935,"title":2974,"updated_at":2975,"url":2976,"score":2977},"### Environment\r\n\r\n------------------------------\r\n- Operating System: `Windows_NT`\r\n- Node Version: `v21.6.1`\r\n- Nuxt Version: `0.0.0`\r\n- Nitro Version: `-`\r\n- Package Manager: `npm@9.6.4`\r\n- Builder: `webpack`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-9d4aie?file=pages%2Findex.vue\r\n\r\n### Describe the bug\r\n\r\nWhen building for production and inspecting page source, I get most of the CSS inlined with \u003Cstyle> tags properly, but not all of it.\r\n\r\nI always end up having some components producing a \u003Clink> CSS like this one: `\u003Clink rel=\"stylesheet\" href=\"[/_nuxt/homepage.vy-tb-hO.css](http://localhost:3000/_nuxt/homepage.vy-tb-hO.css)\">` which is a blocking resource and lighthouse complains about it. \r\n\r\nYou can run a lighthouse report and see \"Avoid render-blocking resources\" - this is a huge pain in my main production app costing us almost 2.5 seconds.\r\n\r\nWhy is this happening? I saw the docs stating that all CSS is automatically inlined :)\r\nThank you so much for any help!\r\n\r\n### Additional context\r\n\r\nYou can see the issue here very clearly: view-source:https://www.locaverse.at/essen-bestellen\r\nAll component's CSS is style=\"scoped\"\r\n\r\n### Logs\r\n\r\n_No response_",[2970,2971,2972],{"name":2945,"color":2946},{"name":2911,"color":2912},{"name":2890,"color":2891},26056,"CSS is inlined and added as a blocking resource after production build","2024-03-21T21:20:40Z","https://github.com/nuxt/nuxt/issues/26056",0.70859164,{"description":2979,"labels":2980,"number":2983,"owner":2872,"repository":2872,"state":2935,"title":2984,"updated_at":2985,"url":2986,"score":2987},"### What problem does this feature solve?\n\nLimited, not too nuanced CSS insertion options. Currently, you either inline or extract everything.\nI'm aware some of the following could be made into 1 or more plugins. I'm not familiar with internals to understand what's able to be implemented in the context of Nuxt.\n\n#### Avoiding requests for small size CSS\nWhen `extractCSS` is set to `true`, CSS files above certain threshold would be `\u003Clink>`ed as usual and the ones below it would be inlined. @manniL explains very well in his [PR](https://github.com/webpack-contrib/mini-css-extract-plugin/pull/268#issuecomment-419638536) the problem with `\u003Clink>`ing the smaller files.\n> I'll have a CSS file per component with a few (say ~5-25) lines of CSS in it, which are even smaller than the HTTP headers of the request to retrieve the file.\n\nReading about critical CSS, 14kb seems to be the sweet spot, although the number could be configurable. From this [article](https://gomakethings.com/inlining-critical-css-for-better-web-performance/)\n> The magic number you should care about is 14kb. That鈥檚 (give or take) how much data a server sends per round trip when the browser makes a request for a web page. You want your above-the-fold content鈥攔equired styles, scripts, markup, everything鈥攖o weight 14kb or less so that the browser can start rendering it as soon as that first packet of data is received.\n\nFrom [Filament Group](https://www.filamentgroup.com/lab/performance-rwd.html)\n> It鈥檚 helpful to consider some basic information about how our code is transferred during page load. Every request to the remote server takes time, and each response from the server carries a limited quantity of data. In order to aim for the fastest page loading time, we want to try to fit the code required for rendering the top portion of a given page in the first response from the server, which happens to carry around 14kb of compressed code (it鈥檚 often less, but 14鈥檚 a solid goal to shoot for).\n\n> Basically, we want fit the HTML, CSS, and JavaScript that鈥檚 necessary for Start Render in that first 14kb round trip.\n\nI have a CSS file that weighs 20-30kb in disk and is served by Nuxt as a 5.8kb file. I take it that `14kb of compressed code` suggests I should look at 5.8kb when comparing to the threshold. I don't know if figuring out the size of the file after compression but before serving is possible.\n\n#### Allow inlined CSS to be cached\nBorrowing from Filament Group's [loadCSS](https://github.com/filamentgroup/loadCSS)'s approach, after all the relevant assets are downloaded, fetch the CSS files below the threshold, i.e. the ones that were inlined. Then, set something in the client side (e.g. a cookie) that will let the server know inlined CSS is no longer required. From this point on, whatever CSS was inlined would now be `\u003Clink>`ed, since the browser has downloaded it.\n\n#### Apply some _voodoo_ to inlined CSS\nPass the inlined CSS through PurgeCSS, just like extracted files. I guess this is less PurgeCSS and more of a Webpack thing.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This feature request is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c7800\">#c7800\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2981,2982],{"name":2866,"color":2867},{"name":2932,"color":2933},3937,"Suggestions for CSS handling in the future.","2023-01-22T15:50:41Z","https://github.com/nuxt/nuxt/issues/3937",0.72129554,["Reactive",2989],{},["Set"],["ShallowReactive",2992],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fQvf3M5wE3Ls4nfVgcgtMZGUIN3Pr259HmGGvfzfaN-0":-1},"/nuxt/nuxt/14792"]