Сервис встаивания изображений в тело css файлов для ускорения загрузки веб страниц

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

Но есть способ намного проще, который подходит для обсолютно всех сайтов и который дает существеный прирост скорости загрузки страницы. Все дело в одной особенности протокола http, да иммено того по которому загрузаются все www страинцы. В его описании есть один интересный момент который многое обьясняет. По этому протоколу браузер не должен загрузать более 3 обьектов одновременно с одного домена. Не все браузеры строго ограничиваются на числе 3. Но у всех есть это ограничение, а это значит что если при загрузке страницы нужно загрузить сам код HTML, javascript файлы, css файлы, файлы картинок которые участвуют в оформлении страниц то все это делается последовательно по 3 файла за раз. Ограничение скорости передачи чаще всего не происходит, браузер не загружает все файлы сразу, а ждет пока первая тройка файлов загрузиться и после этого переходит к следующим. Это хорошо заметно когда загружаешь новый сайт, на котором еще не бывал, тогда не используется кэш браузера и все файлы участвующие в формирований веб страницы загружаются с сервера. При такой загрузке очень хорошо видно, особенно если использовать средства отладки типа FireBug сколько времени тратится на загрузку множества файлов.

Выход из такой ситуации предлагается следующий: уменьшить по возможности количество файлов. Содержание двух css файлов например можно записать в один и тогда не будет происходить ситуации когда первый файл загружается а второй еще не начал загружаться потомучто действует ограничение протокола http на количество одновременных загрузок. Иногда в сети можно найти предложение переместить некоторые файлы в отдельный поддемен, тогда файлов которые загружаются одновременно будет больше потомучто ограничение работает для каждого домена.

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

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

Пример :

background-image: url(‘data:image/gif;base64,[Тело_изображениея_в_кодировке_base64]’);

Это дает нам возможность внедрять картинки в сам css файл, уменьшая при этом количество файлов используемых при загрузке страницы в разы. Конечно не нужно не нужно переусердтсвовать с этим эффектом потомучто слишком большие картинки могут сделать css файл сликом обьемным и затруднить работу браузера. Нодля мелких файлов это решение может быть весьма полезным.