Оптимизация CSS и javascript на сайте

Несомненным трендом конца того и началом этого года является ускорение работы сайта. Если раньше ускорение работы сайта рекомендовалось специалистами по usability, мол, медленно работающий сайт отпугивает пользователя, то сейчас об ускорении работы сайта начали говорить seo оптимизаторы. Есть мнение, что скорость работы сайта уже учитывается поисковыми системами с целью оценки качественности и авторитетности сайта. Возникает вопрос, как мы можем простыми средствами сократить время загрузки сайта?

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

Как и при любой оптимизации перед любыми изменениями необходимо измерить (замерить) первоначальные значения. Посмотреть количество запросов к серверу и количество загружаемого кода можно через онлайн сервисы, например pingdom.com или воспользоваться расширением для Chrome и Firefox под названием Yslow.

После проведения контрольных замеров можно начать объединять файлы, соединяя JS файлы в один JS файл, а CSS файлы в один CSS файл. При этом придется вносить изменения в коды разных сниппетов, которые самостоятельно подгружают файлы javascript и файлы стилей в шаблоны. Когда все файлы будут объединены необходимо проверить их работоспособность. Осуществить проверку JS файлов проще всего используя консоль в Chrome (F12 - Консоль), которая сразу сообщит о возникновении ошибок при обработке скриптов.

Как только мы убедились, что файлы не потеряли работоспособность, можно приступить к сокращению их размера. Лично мне нравится для минимизации javascript нравится онлайн сервис http://javascript-minifier.com/, а для минимизации CSS мною используется http://cssminifier.com/. После того, как весь код минимизирован и вставлен обратно в файлы, заливаем файлы на хостинг, снова проверяем их работоспособность, после чего проводим повторные измерения (замеры) количества запросов к серверу и количества загружаемого кода. Надеюсь, улучшения будут очевидны и вас порадуют.