Оптимизация кода страницы: скрипты и стили

Теги <script> и <style> – элементы разметки сайта, которые в 80% случаев мешают продвижению сайтов. По стандартам верстки HTML5, JavaScript и CSS3 их заменяют на менее громоздкие конструкции.
Оглавление

• Примеры неправильного использования тега <script>
• Примеры правильного использования тега <script>
• Примеры неправильного использования тега <style>
• Примеры правильного использования тега <style>
• Как проверить код страницы
• Выводы

В коде устаревших сайтов скрипты (сценарии работы) и стили оформляются в парные теги <script> и <style>. С появлением HTML5, CSS3 и JavaScript тег <script> начали добавлять только в контейнер , а в них подключают соответствующие файлы.

А вместо тега <style> по стандартам верстки к 2016 году добавляют тег <link>, тоже в контейнер <head>. А уже в линке прописывают адрес файла со стилями.

К оглавлению

Примеры неправильного использования тега <script>

С точки зрения SEO, неправильно размещать внутри тега <script> код на языке Javascript:

Технический такой код работает, но фактически увеличивает вес страницы, а значит, скорость загрузки
К оглавлению

Примеры правильного использования тега <script>

Первый правильный случай – подключить файл со сценариями через парный тег <script>. Для оптимизации кода сценарий выносят в отдельный файл, который подключается по ссылке в теге в контейнере <head>:
<script src="адрес файла со сценариями.js" type="text/javascript"></script>
Второй правильный случай – подключение кода счетчика, например, Яндекс.Метрики или Гугл Аналитики:

Оптимизаторы рекомендуют подключать 3-7 файлов сценариев к странице, но на практике встречаются документы с 10-15 подключенными файлами.
К оглавлению

Примеры неправильного использования тега <style>

После изобретения стандарта CSS любой случай использования тега <style> неправильный. Подробно об этом в статье об устаревших тегах.
Однако до сих пор старые сайты демонстрируют стили, прописанные в контейнере <head>:

Совсем кромешный случай – использовать этот тег в теге <body>, особенно ближе к футеру:

К оглавлению

Примеры правильного использования стилей

Вместо тега <style> со времен создания CSS принято использовать следующую конструкцию:
<link href="адрес файла в формате css" rel="stylesheet" type="text/css"></link>
Эту строку вставляют в тег <head>. Можно добавлять ссылки на неограниченное количество файлов, но специалисты рекомендуют не превышать 3-5. На практике не встречалась с сайтами, которые следовали бы этой рекомендации.
К оглавлению

Как проверить код страницы

Первый способ проверки – ручной. Нажимайте ctrl+u, открывается код страницы. Далее ctrl+f. Открывается поле для поиска по странице. В этом поле вводим слова названия тегов:
<script>, <style>. Пробуйте вводить без знаков < и >.
Второй способ – через валидаторы HTML и анализаторы скорости загрузки. О них в следующих статьях.
К оглавлению

Выводы

Скрипты и стили по стандартам верстки прописывают не напрямую в коде страницы, а в отдельных файлах в формате js и css соответственно. Эти файлы подключают через теги <script> и <link>, которые размещаются в теге <head>.
Рекомендуется подключать до 5 файлов стилей и до 7 файлов сценариев к каждой странице. Большее количество скажется на времени загрузки страницы.
Недопустимо прописывать код сценария в теге <script>, за исключением кода счетчика посещаемости.
Тег <style> устарел. Все, что он может сделать, давно перекочевало в стандарт CSS. От <style> можно и нужно избавляться.
Найти устаревшие теги можно вручную по коду страницы или через валидаторы HTML и анализаторы срока загрузки страницы.