devdocs
devdocs copied to clipboard
Request for a topic update on including head scripts / styles
Topic Link
https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/css-topics/css-themes.html
Description
Please add an example of how to add css with preload in the head section. Currently we can add scripts or stylesheets with the classic way of
<script src="Vendor_Module::path_to.js" defer="true" />
<css src="Vendor_Module::path_to.css"/>
But there's no clear way to add preloaded css
So how would we be able to do something like this?
<head>
<meta charset="utf-8">
<title>JS and CSS preload example</title>
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>bouncing balls</h1>
<canvas></canvas>
<script src="main.js" defer></script>
</body>
Possible solutions
It should give a clear example of adding a css and a js file using rel="preload"
Additional information
Hi @ioweb-gr. Thank you for your report. To speed up processing of this issue, make sure that you provided sufficient information.
Add a comment to assign the issue: @magento I am working on this
- Join Magento Community Engineering Slack and ask your questions in #github channel.
Hi @dshevtsov do you think you could help with this issue?, or point to the right person to address it? Thanks!
@danidelcar I cannot help with this, unfortunately. My contributions to this topic were of a site maintenance nature, not technical. Maybe @Tazaf and @david-ziffity would be willing to contribute as the contributors who updated the examples in the past (from what I see in git history).
Thanks Dima!
In the layout xml file it should be possible link with attributes both rel and as