В интернете легко можно найти много статей на тему клиентской оптимизации, и ещё больше сайтов, разработчики которых уделили мало внимания этой теме. Хотя это отличный способ ускорить загрузку страниц своего сайта.
Из основных рекомендаций выделим следующие:
Для анализа откроем на CMS Bitrix. Я взял 10 сайтов с 1-й страницы и с помощью Firebug оценил их оптимизированность (главные страницы) по следующим параметрам:
Запросы:
Из 10 сайтов только 3 имели число css-файлов меньше 5-ти
Из 10 сайтов только 3 имели число js-файлов меньше 5-ти
Остальные имели количество css-файлов от 7 до 19-ти, количество js-файлов от 6 до 55-ти (!) и большинство этих файлов подключались в <head> страницы, то есть блокировали отображение страницы до завершения загрузки.
Сжатие
Только 4 сайта применяют gzip-сжатие при отдаче html, css, js.
Итак, вроде бы основы, однако, разработчики часто при них забывают.
Казалось бы, причём здесь Bitrix? Но у него есть одна особенность - страницы часто формируются из компонентов, каждый из них подключает файл style.css. Это удобно - включил компонент, стили подключились, отключил - они не грузятся. Обычный сайт содержит несколько компонентов на странице - каждый добавляет свои стили. Однако состав этих компонентов меняется редко, и в этом случае файлы целесообразно объединять. Именно этим пренебрегли 7 из 10 сайтов и подключали много css-файлов размерами 500-600 байт, а это не позволяет эффективно использовать соединение с сервером
Подведём итоги. Для ускорения сайта "лёгким" путём достаточно сделать следующее:
Из основных рекомендаций выделим следующие:
- Уменьшение количества запросов (особенно тех которые указаны в head страницы)
- Использование gzip
Для анализа откроем на CMS Bitrix. Я взял 10 сайтов с 1-й страницы и с помощью Firebug оценил их оптимизированность (главные страницы) по следующим параметрам:
- Общее число запросов, число запросов css-файлов, число запросов js-файлов.
- Использование сжатия там, где это возможно.
Запросы:
Из 10 сайтов только 3 имели число css-файлов меньше 5-ти
Из 10 сайтов только 3 имели число js-файлов меньше 5-ти
Остальные имели количество css-файлов от 7 до 19-ти, количество js-файлов от 6 до 55-ти (!) и большинство этих файлов подключались в <head> страницы, то есть блокировали отображение страницы до завершения загрузки.
Сжатие
Только 4 сайта применяют gzip-сжатие при отдаче html, css, js.
Итак, вроде бы основы, однако, разработчики часто при них забывают.
Казалось бы, причём здесь Bitrix? Но у него есть одна особенность - страницы часто формируются из компонентов, каждый из них подключает файл style.css. Это удобно - включил компонент, стили подключились, отключил - они не грузятся. Обычный сайт содержит несколько компонентов на странице - каждый добавляет свои стили. Однако состав этих компонентов меняется редко, и в этом случае файлы целесообразно объединять. Именно этим пренебрегли 7 из 10 сайтов и подключали много css-файлов размерами 500-600 байт, а это не позволяет эффективно использовать соединение с сервером
Подведём итоги. Для ускорения сайта "лёгким" путём достаточно сделать следующее:
- Если состав компонентов на странице постоянный, их стили нужно объединить в 1 файл. Для главной можно сделать следующее - все стили компонентов, которые есть на главной и других страницах, переносим в главный файл стилей template_styles.css. Стили компонентов, которые включены только на главной, объединяем в 1 файл. Итого на главной странице будут подключены всего 2 css-файла.
- Обязательно договориться с хостерами о включении gzip-сжатия. Nginx обычно собирается с модулями, реализующими это и включить сжатие - дело быстрое и беспроблемное.
Группы на сайте создаются не только сотрудниками «1С-Битрикс», но и партнерами компании. Поэтому мнения участников групп могут не совпадать с позицией компании «1С-Битрикс».
