Быстродействие фронтенда: CSS и JS

Быстродействие является одним из ключевых аспектов работы любого сайта, будь то сайт-визитка или интернет-магазин. С этим утверждением, как мне кажется, спорить глупо. Медленная загрузка страниц заставляет людей нервничать и раздражаться, и эти два чувства несомненно приведут к тому, что пользователь просто закроет окно браузера и проклянет сайт, попутно обвиняя в криворукости его создателей. Одно дело, когда пользователь сидит на dial-up и ждет загрузки страницы 5 сек, и совсем другое, когда при скорости 10 Мбит/с он ждет те же томящие 5 сек. Для разработчика это означает, что пора оптимизировать клиентскую часть сайта или, как его еще называют, фронтенд.

В нескольких статьях я постараюсь кратко поделиться известными мне приемами по повышению быстродействия фронтенда. Начнем с CSS и Javascript.

Сначала стили, потом скрипты

То что ссылки на стили необходимо размещать в head, а Javascript код перед body знают практически все. Однако есть еще одно простое правило, которому очень легко следовать : стили размещаем вверху, скрипты внизу.

Дело в том, что CSS блокирует отрисовку страницы и с ним нужно разобраться как можно раньше. При этом JS блокирует загрузки других ресурсов и его размещение внизу позволит быть уверенным в том, что он не помешает им.

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

Минификация и сжатие

Очень действенные приемы, позволяющие уменьшить размер ваших CSS и JS, да и других текстовых ресурсов.

Минификация убирает лишние пробельные символы и комментарии, а также заменяет имена локальных переменных (в случае JS) на более короткие. Современные инструменты разработки такие как Ruby on Rails, JSF, SASS обладают встроенными возможностями для проведения данной операции. При этом существует ряд online инструментов для минификации CSS и JS, среди которых можно выделить YUI Compressor .

Сжатие (gzip) более эффективный прием, которой позволяет уменьшать размер исходных ресурсов в несколько раз на основании определенного алгоритма. Однако для его включения необходимо поиграться с .htaccess файлом. Хороший пример можно найти в HTML5 Boilerplate .

Меньше запросов

И последний очевидный прием для повышения быстродействия - делайте меньше запросов. Каждая ссылка на стиль или скрипт является лишним HTTP запросом. Такой запрос может привести к поиску DNS, обработке ошибок, редиректам и т.п. К тому же браузеры могут параллельно загружать всего несколько ресурсов с одного домена.

Хорошим примером может служить фреймворк Ruby on Rails, которой собирает все CSS в один файл, а все JS в другой, тем самым уменьшая количество запросов к ним.

Выводы

  1. Для повышения скорости загрузки страниц ссылки на стили размещайте вверху. Скрипты размещайте внизу для того, чтобы избежать блокировки загружаемых ресурсов.
  2. Уменьшайте размер ваших CSS и JS файлов, используя минификацию и сжатие.
  3. Каждый запрос к ресурсам является дорогой операцией и должен быть оправдан. Уменьшайте количество CSS и JS файлов, объединяя их между собой.