Оптимизация контента. Сжатие и объединение файлов css и js с помощью библиотеки Combres. Часть I.

Итак, сегодня поговорим об оптимизации пользовательского контента. 


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

• Сжатие пользовательского контента. Согласитесь, передать по сети 10 Кб намного быстрее чем 50Кб. Сжатые файлы обрабатывает браузер на стороне пользователя. Самый распространенный способ для сжатия контента -  Gzip.  Gzip поддерживает большинство браузеров, но не все (сразу вспоминается наш любимый ie 6). Подключить сжатие можно разными способами. Напишу об этом отдельно.  
• Объединение мелких файлов в один большой. Это относится как к файлам стилей, скриптов, так  и к картинкам. Браузер загружает файлы в несколько потоков, но если файлов много, то пока не загрузится первая часть и не освободятся новые потоки, следующие файлы загружены не будут. Плюс нужно учесть время на открытие и закрытие нового соединения и т.п. мелочи. Так вот для объединения css и js файлов написали библиотеку Combres, о которой я расскажу подробнее дальше. С картинками поступают следующим образом: маленькие картинки склеивают в большие и с помощью стилей css  отображают нужную часть картинки. Получаются так называемые  Css-спрайты
• Удаление лишних пробелов. Каждый такой пробел - это избыточный объем данных, передаваемый на сторону клиента. Пример кода удаляющий пробелы тоже как-нибудь приведу.
• Оптимизация картинок. Не секрет, что есть различные форматы картинок. Так вот, в зависимости от формата и настроек сжатия объем картинок можно сократить в несколько раз.
• Если есть возможность отдавать картинки и файлы скриптов с другого домена, то это будет дополнительным плюсом при загрузке контента.
• Здесь укажу такой общий пукт как оптимизация кода скриптов. Тяжеловесный код javascript будет тормозить открытие нашей страницы. Файлы стилей также нужно просмотреть на наличие лишних блоков, которые можно применить только к отдельным страницам и не загружать для всего сайта.

Дальше можно углубится в тему кеширования контента, но это уже тема отдельная.


Анализировать насколько ваш сайт хорош с точки зрения оптимизации контента можно с помощью Хрома. 


Откроем страницу Google и вызовем панель разработчика F12. В закладке Audit запустим процесс аудита.

Теперь посмотрим какие рекомендации есть для Гугла

Ага и Гуглу есть куда двигаться в оптимизации своей поисковой формы=)

Продолжение следует...