В оптимизации скорости загрузки сайтов важно количество запросов к веб-серверу.
Если посмотреть на известный инструмент тестирования скорости загрузки сайта - tools.pingdom.com, то можно увидеть что они разделяют каждый запрос к серверу на следующие этапы:
- Dns - время которое нужно для преобразования DNS-имени сайта в IP-адрес
- Connect - время потраченное на установку tcp-сессии
- Send - время потраченное на отправку данных
- Wait - время потраченное на ожидание получения первого байта от сервера после отправки данных или установки соединения
- Receive - время потраченное на получение данных от сервера
В большинстве случаев время потраченное на этап Receive меньше, чем время потраченное на все остальные этапы. А значит быстрее будет передать 1 мегабайт данных в одном файле, чем 10 файлов по 100 килобайт. А если учесть, что часто хостинги не поддерживают более чем пять параллельных потоков, то 10 файлов будут создавать очередь, разница в скорости загрузки будет еще ощутимей.
Уменьшить количество создаваемых запросов можно за счет кучи всяких иконок и изображений которые используются как элементы дизайна, навигации, оформления в Вашем шаблоне.
Именно для этого были придуманы css спрайты, но не всегда получается в них "засунуть" все изображения. В таких случаях может пригодиться следующий трюк - хранение закодированных в base64 изображений в сss или html-коде. То есть изображения будут встроены в саму html страницу или css файл, они не создают дополнительные запросы к веб-серверу.
Читать далее »