Главная » Создание сайта, раскрутка сайта

Оптимизация порядка загрузки стилей и скриптов

оптимизация загрузки стилей и скриптов

В каком порядке нужно загружать стили и скрипты на сайте?

Процесс загрузки стилей CSS и скриптов JavaScript стоит особняком в процессе получения и визуализации страницы сайта. Стили и скрипты, в основном, загружают с файла, который может быть расположен как на самом сервере, так и на других ресурсах. Так же, небольшие по размеру стили и скрипты можно непосредственно встроить в код страницы. Кроме загрузки их кода, этот самый код еще нужно выполнить. Вот тут и необходимо знать некоторые моменты.

Что раньше: стили или скрипты?

Для того чтобы ответить на вопрос «Что нужно загружать раньше: стили или скрипты?», необходимо знать некоторые моменты загрузки стилей и скриптов:

  1. Процесс загрузки стилей и скриптов может проходить одновременно.
  2. Многие браузеры приостанавливают загрузку следующих элементов, пока не закончится процесс выполнения скрипта.

Данные два пункта в сумме говорят о том, что первым делом нужно загружать стили, и только потом загружать скрипты. Почему так, а не иначе, можно объяснить на примере:

оптимизация процесса загрузки стилей и скриптов

На рисунке Вы видите процесс загрузки 3 стилей и двух скриптов JavaScript. Исходя из первого пункта, одновременная загрузка stylesheet1.css и scriptfile1.js — вполне адекватное явление. Исходя из второго пункта, после загрузки scriptfile1.js браузер ожидает выполнения кода данного скрипта. Пока код не будет выполнен, браузер ничего не загружает. Как только scriptfile1.js будет выполнен, начнется загрузка файла scriptfile2.js. После окончания загрузки scriptfile2.js, браузер вновь будет ожидать конца его выполнения. После чего параллельно загрузит оставшиеся стили.

Приведенный выше пример — пример не слишком удачной последовательности вызова стилей и скриптов. Приведенные выше скрипты и стили необходимо загружать в следующей последовательности:

оптимизация процесса загрузки скриптов и стилей

Как видите, в данном случае все стили и один скрипт загружаются в одно и то же время. Процесс загрузки следующего скрипта начинается сразу же после выполнения первого скрипта. Таким образом мы сэкономили 100 миллисекунд(на деле же выигрыш может быть либо больше, либо меньше), так как 100 миллисекунд тут указаны только для эффектности примера.

Где лучше размещать скрипты?

Основная мысль предыдущего пункта в том, что скрипты нужно загружать после стилей. Но если подумать более глобально, то данное правило должно звучать так: «Загрузка скриптов должна происходит после отображения основного содержимого страницы». Ведь во время выполнения скриптов приостанавливается не только загрузка стилей, но и выполнение кода HTML. Поэтому, самое лучшее место для обитания скриптов — футер(footer). Тем самым Вы отложите синтаксический анализ сайта, что так же хорошо повлияет на карму сайта. Кроме этого, желательно JavaScript сжать, а так же использовать gzip сжатие всех передаваемых данных Вашего сайта, чтобы максимум увеличить скорость его работы.

Добавить комментарий

Ваш комментарий появится после модерации.