What are best practices to order elements in <head>?
can use anything in any order? does placing of is important before
-
Adding a few performance suggestions to Brian's answer, highest priority should logically be things that will need to be downloaded, so the browser can start downloading them asap, and things that will affect how the page is presented. So I'd suggest:
- Metas affecting appearance, such as charset (required early by the spec too), viewport, apple-mobile-web-app-capable
- Title near the top so the browser can render it asap and user has a sense something is happening
- Favicon and touch icons
- CSS (at least CSS for above-the-fold; other CSS can be loaded in the footer if you want to get fancy). This step typically blocks everything else from proceeding, which is why I put the previous items above it, as they provide some feedback during the CSS delay.
- Critical scripts (such as user-agent sniffing that may affect layout) which can't be loaded in the footer
- Everything else (e.g. necessary metadata in the form of links and meta tags)
You might also consider inlining whatever CSS and JS is loaded in head, especially if its small and the external script/sheet is unlikely to be cached according to your typical visitor's profile. And if you do inline it, you'll ideally want to compress it.
Last thing: The user has to wait around for head - and any blocking resources it loads - so it's best to put as much as possible in the body or footer.
加载中...
- 热议问题