Как заказать теги <script> против тегов <style> в HTML-разметке для лучших результатов

Я создаю свой сайт на http://royronalds.com, и я пытаюсь выяснить, какой порядок элементов в <head> имеет смысл. Чтобы взять то, что у меня есть, у меня есть:

  • <head>
  • <style> внешняя таблица стилей
  • <meta>
  • <title>
  • <link> to favicon
  • <script> для jQuery
  • <script> главный javascript для сайта
  • <script> Google Analytics, асинхронный script.
  • </head>

Есть ли причины, чтобы упорядочить их по-другому, чтобы время загрузки и другие проблемы происходили более плавно, и если да, то какой будет идеальный порядок?

ОТВЕТЫ

Ответ 1

Современные браузеры ждут с любым видом рендеринга до тех пор, пока не будет извлечен весь раздел <head> (включая связанные с ним файлы). Поэтому порядок не имеет значения для производительности. Для Javascript порядок файлов - это порядок выполнения. Для таблиц стилей порядок определяет приоритет (правило, которое было определено последним, имеет приоритет, если все остальные вещи равны).

Если вы хотите оптимизировать производительность клиента, настоятельно рекомендуется переместить ваш Javascript в самый конец элемента <body>, вместо того, чтобы помещать их в <head> вообще. Есть больше соображений, Список оптимизаций Yahoo стоит того, чтобы прочитать. Google также имеет хорошие советы.

Ответ 2

Одна вещь, которая может иметь большой эффект, заключается в перемещении тегов <script> в нижней части страницы, если они не являются существенными для содержимого.

Например, я бы переместил тег google analytics <script>, чтобы быть последней вещью перед тегом </body> на каждой странице. Теги Script - это "блокировка содержимого", поэтому браузер не будет продолжать показ страницы до тех пор, пока Script не будет загружен и не запущен. Ваши главные файлы javascript и JQuery, вероятно, не могут быть перемещены так же легко в зависимости от того, как вы их используете, но аналитика наверняка может быть внизу.

Ознакомьтесь с наилучшими методами YSlow для получения дополнительных методов оптимизации.

Ответ 3

Кстати, попробуйте отменить адрес электронной почты...

т

<SCRIPT TYPE="text/javascript">
document.write('<A HREF=' + '"mai' + 'lto:' + '[email protected]' + 'example' + '.fr' + '?' + 'sub' + 'ject=music'+'example'+'text">' + 'example' +'@' + 'example' +'.' + 'fr' + '</A><BR>')
</SCRIPT>

Это работает для меня...

Ответ 4

Также рассмотрим тот факт, что браузеры будут останавливать выполнение javascript при возникновении ошибки.

Из-за этого очень важно, чтобы ваш javascript работал во всех браузерах, иначе вы рискуете своим кодом Google Analytics, не выполняющим и не фиксирующим статистику...

Обычно я размещаю свою Google Analytics над своим собственным кодом, поэтому он запускается первым, и если в редком случае, когда мой код ломается или вызывает ошибки JS, я все еще могу получить информацию отслеживания.

мой заказ будет:

<head>
<meta> content encoding
<title>
<link> favicon
<style> external/third-party stylesheet
<style> site stylesheet
</head>
<body>
...
<script> google analytics
<script> jQuery
<script> jQuery plugins
<script> site javascript
</body>