How to validly place tags in the head?

L

Leonid Fedotov2015-07-09 22:37:06

HTML

Leonid Fedotov, 2015-07-09 22:37:06

Actually, 1 Javascript file, 1 CSS file and a bunch of meta information like meta and link are connected to the page. In what order should I specify them so that the page loads as quickly as possible and generally loads as it should? Now I specify asynchronous scripts and styles first, and only then meta-information, i.e.:

<!DOCTYPE html>
<html>
<head lang="ru">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Name</title>
  <link rel="stylesheet" href="//example.com/styles.css" charset="utf-8"/>
  <script type="text/javascript" src="//example.com/script.js" async></script>
  <link rel="shortcut icon" href="//example.com/favicon.ico" sizes="16x16 32x32 48x48" type="image/vnd.microsoft.icon">
  <link rel="icon" href="//example.com/favicon.icns" sizes="16x16 24x24 32x32 48x48 64x64 96x96 128x128 256x256">
  <link rel=icon href="//example.com/favicon.svg" sizes="any" type="image/svg+xml">
  <meta name="robots" content="index,follow">
  <meta name="generator" content="Generator"/>
  <meta name="author" content="John Doe">
  <link rel="shortlink" href="https://example.com"/>
  <meta name="MobileOptimized" content="320">
  <!-- И еще 11КБ метаинформации -->
</head>
<body>
</body>
</html>

Is it legal to do so at all? because on all other web resources, first the meta, and only then the scripts and styles.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

E

Evgeny Petrov, 2015-07-09
@iLeonidze

1. The lang attribute must be specified in elements with textual information. If the entire page contains content in the same language, it must be specified in html . Specifying in head and not specifying in body is at least strange.
2. The situation when the server does not return the encoding in the Content-Type is incredibly rare. However, if it does happen, and the document does not contain a signature (for example, the UTF-8 without BOM saving mode is selected ), then the encoding instruction follows the very first meta tag in the head so that the browser does not parse the text containing non- ASCII characters a second time.
More about encoding sniffing
3. It is better to indicate the encoding as follows (the type of document inside the document does not make any sense):
4. Styles first, then scripts. Here you are absolutely correct. If you can specify asynchronous loading to the script, specify it. If this is not possible, it is recommended to load synchronously into head only those scripts that may be required by other scripts, and put the rest at the end of body .
5. If there are styles that are not required for the initial display of the page (for example, only for loading content), you can dynamically load them (for example, after DOM is completed ) using scripts. As an option - using scripts at the end of body , not focusing on the eventDOMContentLoaded .
Optimization tips from Google Developers
6. The remaining meta and link tags can be divided into those used to form the page (for example, meta name="viewport" ), which are best placed at the beginning of head after encoding, and secondary tags, which can be placed at the end of head . which is what you did.
7. The title of the document can be placed after all primary meta tags.
8. By default , meta name="robots" is all ( index,follow ). If you do not intend to ban something, there is no point in writing it.