В оптимизации скорости загрузки сайтов важно количество запросов к веб-серверу.
Если посмотреть на известный инструмент тестирования скорости загрузки сайта - tools.pingdom.com, то можно увидеть что они разделяют каждый запрос к серверу на следующие этапы:
- Dns - время которое нужно для преобразования DNS-имени сайта в IP-адрес
- Connect - время потраченное на установку tcp-сессии
- Send - время потраченное на отправку данных
- Wait - время потраченное на ожидание получения первого байта от сервера после отправки данных или установки соединения
- Receive - время потраченное на получение данных от сервера
В большинстве случаев время потраченное на этап Receive меньше, чем время потраченное на все остальные этапы. А значит быстрее будет передать 1 мегабайт данных в одном файле, чем 10 файлов по 100 килобайт. А если учесть, что часто хостинги не поддерживают более чем пять параллельных потоков, то 10 файлов будут создавать очередь, разница в скорости загрузки будет еще ощутимей.
Уменьшить количество создаваемых запросов можно за счет кучи всяких иконок и изображений которые используются как элементы дизайна, навигации, оформления в Вашем шаблоне.
Именно для этого были придуманы css спрайты, но не всегда получается в них "засунуть" все изображения. В таких случаях может пригодиться следующий трюк - хранение закодированных в base64 изображений в сss или html-коде. То есть изображения будут встроены в саму html страницу или css файл, они не создают дополнительные запросы к веб-серверу.
Base64 используется для предоставления каких-либо бинарных данных, например изображений, аудио или видео файлов в виде "абракадабры" из текста. Благодаря чему эти файлы можно хранить в текстовых файлах и передавать текстовыми сообщениями.
Конечно изображение в base64 формате занимает больше места, чем просто в своем "родном" формате - jpg, png и т.д. Но! Разница нивелируется за счет того, что при правильной оптимизации сайта html и css данные передаются в сжатом виде, это называется gzip-сжатие.
Пример: моя фотография в сайдбаре, которая над надписью "Владимир Демянович".
В виде файла она занимала 5,16 КБ. Когда я ее закодировал в Base64 она стала занимать 6,91 КБ, но в сжатом gzip-формате занимает 5,22 КБ. Мало того, я решил ужать сам jpg-файл, чтобы он занимал меньше места, для этого я загрузил его в соц. сеть Вконтакте, она прекрасно ужимает изображения, без видимой потери качества. В результате я получил файл размером 3,67 КБ, а в gzip сжатом base64 это получилось 3,71 КБ. Выгода от оптимизации на лицо - избавился от лишнего запроса и даже уменьшил объем.
Тоже самое можно повторить с другими не большими изображениями.
В интернете есть достаточно много разных Base64 конверторов, которые помогут вам что-либо конвертировать прямо в онлайне, без установки и скачивания чего-либо.
Я воспользовался вот этим: webcodertools.com/imagetobase64converter
Если раньше код, который отображал мою аватарку выглядел вот так:
<img src="/wp-content/themes/Technologic/images/photo.jpg" width="108" height="108" alt="">
То теперь он выглядит вот так:
<img alt="" src="data:image/jpeg;base64,тут-много-текста-абракадабры" width="108" height="108" alt="">
