24 онлайн-сервиса для сжатия и оптимизации CSS кода

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

Инструменты для сжатия CSS улучшают время загрузки, удалив комментарии из кода, включающих каждую команду в одной строке, удаление "белого пространства" -  пробелов и переносов строк.

Имейте в виду, если вы действительно хотите, увеличить производительность веб-сайта, после стадии разработки, вы должны пойти еще дальше и использовать GZIP сжатие и кэширование ваших файлов. Но об этом мы поговорим в следующей статье!

Попробуйте воспользоваться одним из этих онлайн сервисов по оптимизации CSS файлов (некоторые из них также предлагают и JavaScript сжатие), и посмотреть, как они могут ускорить время отклика веб-сайт и сохранить пропускную способность.

Онлайн сервисы для оптимизации CSS

 1. cssdrive.com CSS Compressor — работает в 2 режимах: обычный и продвинутый. Вы можете выбрать один из трех уровней сжатия. Режим "Normal" должен хорошо работать в большинстве случаев, создавая оптимальный баланс между ними.

2. http://www.cleancss.com – CSS форматирование и оптимизатор на основе csstidy доступна на английском, немецком и французском языках.

3. CSS Compressor  - можно выбрать 4 уровня сжатия.

4. CSS Optimizer  - Оптимизация CSS указав URL адрес css-файла, загрузив файл с локального компьютера или непосредственно введя CSS код в форму. 

5. codebeautifier.com  - CSS Compressor  на основе CSSTidy

6. askapache.com  - данный сервис использует часть порта JavaScript из YUI Compressor, и часть W3 CSS Validator. Вы можете загрузить CSS файл, указать URL CSS-файла, или просто вставить CSS код в форму.

7. iceyboard.no-ip.org CSS Compressor - Вы можете загрузить файл, указать URL CSS-файла или вставить CSS код. Хорошие варианты сжатия.

8. ebiene.de – сервис для сжатия JavaScript и CSS файлов. Вы можете выбрать между базовым сжатием и сильным.

9. pagecolumn.com – Сжатие CSS, возможность поиска и удаления неиспользуемых классов и ID в CSS (опционально).

10. Pingates.com -  Вы можете указать URL CSS файла или вставить CSS код.

11. Lotterypost.com CSS компрессор - нужно просто вставить CSS код и нажать кнопку «Сжать».

12. Peterbe.com - XHTML, HTML и CSS компрессор. Без каких-либо вариантов.

13. Refresh-sf.com — Сервис для JavaScript / CSS сжатия. Использует YUI Compressor.  Просто вставьте код в текстовое поле или выберите файл для загрузки. Затем выберите тип сжатия, JS или CSS.

14. Sevenforty.com  CSS Compressor - основанный на Java YUI Compressor. Просто загрузите CSS файл, который вы хотите уменьшить и вы получите сжатый CSS файл в ZIP архиве.

15. phpinsider.com – использует метод Monte Ohrt, нет вариантов сжатия, просто вставьте код CSS и забирайте результат.

16. Devtrench.com -CSS Compressor  на основе CSSTidy

17. Cssportal.com -  CSS Compressor  на основе CSSTidy

18. Mabblog.com –  Укажите URL CSS файла или вставить код CSS, нет  вариантов сжатия.

19. Creativyst.com – CSS и JavaScript компрессор.

20. Generateit.net –  CSS Compressor  на основе CSSTidy

21. Arrantius.com CSS Compressor - написанный на JavaScript, поэтому нет передачи вашего CSS  неизвестному серверу. Он вынимает комментарии и пробелы в CSS файле, не более того.

22. Artiss.co.uk -  только загрузка файлов, возможность удалять комментарии или нет.

23. Homepage-Performance.de –  варианты: удалить пробелы, последняя точка с запятой, замена цветов и т.д. Вы можете только вставлять CSS код в поле ввода.

24. Isnoop.net – варианты: удалить пробелы, отступы  и новую линию перед открывающей фигурной скобкой.

Заключение:

Попробуйте поэкспериментировать с некоторыми из этих сервисов. Многие из них показывают процент сжатия и размер файла на выходе.

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

Источник статьи: http://www.visual-blast.com
 

• Комментарии (15)
• Сайт
• Facebook