Минификация CSS с помощью CSS Optimizer


Содержание материала:

Минификация CSS с помощью CSS Optimizer

Группа: Главные администраторы
Сообщений: 14349
Регистрация: 12.10.2007
Из: Twilight Zone
Пользователь №: 1

CSSO (CSS Optimizer) является минимизатором CSS, выполняющим как минимизацию без изменения структуры, так и структурную минимизацию с целью получить как можно меньший текст.

CSSO написан на Javascript, выполняется как в браузере, так и в командной строке (с помощью NodeJS).

Распространяется под лицензией MIT.

Минимизация без изменения структуры:

  • Удаление whitespace
  • Удаление концевых ‘;’
  • Удаление комментариев
  • Удаление неправильных @charset и @import
  • Удаление ошибочных элементов
  • Минимизация цвета
  • Минимизация 0
  • Минимизация margin и padding
  • Слияние многострочных строк в однострочные
  • Минимизация font-weight

Минимизация с изменением структуры:

  • Слияние блоков с одинаковыми селекторами
  • Удаление перекрываемых свойств
  • Частичное выделение свойств в отдельный блок
  • Частичное слияние блоков

Где найти

Ссылки:

  • Вебовый интерфейс для тестов и проб: anotherfelix.com/csso/web/csso.html
  • Репозиторий исходного кода: github.com/afelix/csso
  • Руководство по установке: github.com/afelix/csso/blob/master/README.md
  • Описание минимизации CSS: github.com/afelix/csso/blob/master/MANUAL.ru.md

Внимание: проект находится в статусе beta и может содержать недоработки и ошибки. Скорее всего, в дальнейшем изменятся адреса репозитория и хостинга для вебового интерфейса. Анонс призван познакомить общественность с новым CSS-минимизатором на ранней стадии, собрать отзывы, исправить пропущенные ошибки и сделать CSSO удобнее пользователю.

Зачем ещё один минимизатор

Большинство из современных популярных минимизаторов (YUICompressor и ему подобные) — это минимизация без разбора и анализа структуры. Грубо говоря, набором regexp’ов заменяют X на меньший Y.

Обработка с минимизацией структуры:

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

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

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

Сразу возникает вопрос — а зачем это нужно? Ответ прост: оптимизируя таблицы стилей снижается загружаемый объем кода, вес файла style.css. В итоге страница станет меньше весить, а это экономия трафика и увеличение скорости загрузки сайта.

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

Как оптимизировать CSS и уменьшить размер файла

Подойти к оптимизации можно различными способами. Самый безопасный — ручная чистка файла стилей. Хотя можно поспорить, ведь незнающий человек может такого натворить, что черт ногу сломит, да и максимального сжатия все равно не добиться.

Какие мероприятия можно провести при оптимизации CSS:

  • Удалить неиспользуемые селекторы.
  • Удалить неиспользуемые закомментированные строки.
  • Сократить объем комментариев в файле стилей. Всегда удобно, когда элементы сгруппированы по общему признаку и имеют невидимые для глаз обычных пользователей комментарии. Но зачастую, чтобы добиться высокой степени сжимаемости CSS, приходиться от них избавляться. Чтобы при дальнейшей работе проще ориентироваться в коде, Вы можете по-прежнему их использовать, но оставляйте краткие описания.
  • Удалить пустые строки и пробелы. Но слишком не стоит увлекаться, код должен оставаться читаемым, чтобы без труда вносить правки.
  • Объединить элементы с одинаковыми свойствами.
  • Оптимизировать шрифты. Лучше использовать один шрифт. В каждом отдельно взятом блоке страницы использовать разный шрифт — дурной тон web-дизайна и, как видите, перегружает файл стилей.
  • Оптимизировать цвета. Это сделать достаточно просто, но сложно объяснить на словах, поэтому приведу наглядные примеры:
  • Оптимизировать отступы. Опять же на примерах:

    Конечно можно найти и другие пути оптимизации, но на этом я пожалуй остановлюсь и продолжу свой рассказ про онлайн инструменты оптимизации CSS.

    Оптимизация CSS с помощью онлайн сервисов

    Ко всем онлайн сервисам необходимо относиться с особой осторожностью и внимательностью, чтобы не наломать дров. И в обязательном порядке — делать резервную копию, впрочем данная рекомендация относится ко всем файлам, которые редактируются.

    Существует достаточное количество онлайн инструментов (CleanCSS, Online CSS Optimizer и т.д.), способных выполнить оптимизацию CSS. Они мало чем отличаются друг от друга, зачастую используют одни и те же алгоритмы и библиотеки сжатия, например YUICompressor или CSSTidy.

    Подробнее остановлюсь на том, которым чаще всего пользуюсь. Это CSS оптимизатор на портале для вебмастеров CY-PR.com.

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

    • максимальное (код не читаем, наименьший размер);
    • высокое (сносная читаемость, маленький размер);
    • стандартное (баланс между читаемостью и размером);
    • низкое (читаемый код);
    • выбрать самому (ввести параметры ниже).

    Для безопасной оптимизации рекомендуется использовать стандартное сжатие. Ради интереса воспользуйтесь другими быстрыми настройками, но помните о резервной копии. После того как параметры сжатия CSS заданы можно приступать к непосредственной работе скрипта, нажатием кнопки Оптимизировать CSS.

    Результаты выводятся ниже с указанием исходного и оптимизированного размера кода, а также коэффициент сжатия в процентном соотношении:

    И последнее дополнение: старайтесь объединять CSS файлы. Некоторые плагины используют свои стили, хранящиеся в отдельных файлах, было бы неплохо их объединить в один. В следующий раз в рамках данной рубрики я расскажу как можно автоматически получать на выходе сжатый CSS. До скорой встречи!

    Минификация (сжатие) JS- и CSS-файлов на PHP

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

    Для чего вообще делается сжатие файлов? Для того, чтобы уменьшить их вес, тем самым ускорить работу вашего сайта.

    Приведу простой пример. У вас есть не сжатая библиотека jQuery, которая весит 120 килобайт. А в сжатом виде эта же библиотека будет весить 60 килобайт. Получаем экономию в 60 КБ, что вполне неплохо. А если таких файлов 15-20?

    Вообще сжатие файлов можно производить и вручную через какой-нибудь онлайн-сервис, а можно поступить куда умнее и воспользоваться готовым PHP-скриптом, с помощью которого легко можно решить поставленные задачи.

    Минификация (сжатие) CSS-файлов на PHP

    Основная идея минификации стилей будет заключаться в следующем: мы объединяем все файлы в один и удаляем в нем все переводы строк, символы табуляции, двойные пробелы и комментарии.

    PHP-скрипт будет выглядеть следующим образом:

    В нем вы прописываете адреса до всех ваших файлов стилей и отправляете итоговый файл на сайт по FTP или другим удобным для вас способом.

    После чего на сайте вы удаляете указанные в скрипте стили и подключаете новый стиль по такому принципу:

    Где «/style.php» – это ссылка до ранее созданного PHP-файла.

    Сохраняете все изменения и смотрите, не поехал ли дизайн на вашем сайте, если поехал – то проверьте, корректные ли адреса вы прописали в скрипте.

    Теперь, если вы обратитесь к вашему скрипту через браузер, то увидите, что ваши стили максимально оптимизированы.

    Минификация (сжатие) JS-файлов на PHP

    Оптимизация скриптов выполняется примерно по тому же принципу: объединяем все файлы в один и удаляем в нем переводы строк, двойной пробел и знак табуляции, а также комментарии кода.

    Итоговый скрипт будет выглядеть следующим образом:

    Не забывайте в нем прописать ссылки до ваших скриптов.

    И по аналогии с CSS-файлами – подключение следующее:

    Где «/script.php» – ссылка до ранее созданного PHP-скрипта.

    На что здесь стоит обратить внимание?

    1. Проставляйте корректные ссылки до ваших файлов.
    2. На вашем хостинге должна быть поддержка PHP.

    В остальном вроде проблем быть не должно, но если все-таки они появились – пишите об этом в комментариях, постараюсь вам помочь.

    Как упороться по оптимизации скорости загрузки страниц

    При оптимизации скорости загрузки сайта я анализирую результаты автоматического тестирования в сервисах Google Lighthouse, Google PageSpeed Insights и Webpagetest.org и только потом готовлю рекомендации. Эти же инструменты мы будем рассматривать в статье.

    Небольшое объявление. В ноябре 2020 года ребята из Google обновили инструмент Google PageSpeed Insights: теперь проверка страницы выполняется средствами инструмента Lighthouse. Таким образом, результаты проверки Google PSI теперь являются данными из Google Lighthouse.

    Важно помнить, что сайт состоит не только из главной страницы, но и многих других. Оптимизация всего ресурса начинается с исследования каждой типовой страницы. Например, на этом сайте я использую два шаблона: главная и статья. При анализе скорости загрузки нужно анализировать каждую такую шаблонную страницу. Нельзя забывать про «маловажные», которые не приносят трафика — поисковая система оценивает как показатели отдельных страниц, так и всего сайта в целом.

    Статья поделена на несколько блоков для удобной группировки задач по оптимизации. Также постарался распределить их по сложности исполнения (хаха, нет).

    Топ-пост этого месяца:  Платный опрос — отзывы о заработке на официальном сайте опросника PlatnijOpros с выводом денег

    Содержание:

    Оптимизация изображений

    Высота и ширина

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

    В качестве примера рассмотрим довольно подробную статью от Serpstat про оптимизацию изображений. В статье используются картинки такого вида (скриншот из сервиса webspeedtest.cloudinary.com):

    Браузер должен загрузить изображение огромного размера (2,7 мегабайта), а также с большей высотой и шириной, с которой оно будет использоваться на самой странице сайта:

    Просмотреть такое соотношение можно проще и без использования дополнительных сервисов. В браузерных инструментах для разработчиков можно навести на адрес изображения:

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

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

    Этот процесс можно автоматизировать средствами CMS или плагинов для них. Например, в MODx Revolution в этом помогает дополнение phpThumbOf. Из основных функций: изменение высоты или ширины изображения, обрезание картинки до нужных размеров и применение фильтров (например, чёрно-белый). Это всё делается на лету и пользователю чаще необходимо просто настроить шаблон.

    Помимо оптимизации используемой высоты и ширины, нужно обязательно делать сжатие качества изображения для уменьшения их объёма.

    Объём, или же размер изображения

    Мной заботливо украдена таблица из справочника Google для разработчиков, где наглядно показана корреляция объёма изображения от его размера (ширины и высоты):

    Размер Пиксели Размер файла
    100 x 100 10 000 39 КБ
    200 x 200 40 000 156 КБ
    300 x 300 90 000 351 КБ
    500 x 500 250 000 977 КБ
    800 x 800 640 000 2500 КБ

    Чем больше высота и ширина изображения, тем больше оно будет весить (логично), но масштабы увеличения этого объёма губительны для скорости загрузки.

    То есть следует понимать, что для максимальной оптимизации изображения, необходимо:

    1. Уменьшить ширину и высоту
    2. Сжать качество

    Для сжатия качества я чаще всего использую сервис compressor.io, однако у него есть существенный недостаток — работает только с одним изображением. Для оптимизации нескольких картинок нужно искать другие сервисы. Тут на помощь можно звать сервис Google PageSpeed Insights, который после анализа любой страницы предлагает скачать архив с уже оптимизированными и сжатыми ресурсами:

    Lazy Load

    Одна из рекомендаций в моём арсенале — реализация Lazy Load.

    При возможности, для части изображений страниц рекомендуется использовать отложенную загрузку (Lazy Load), которая позволит первоначально загрузить только те изображения, которые видны пользователю при открытии страницы. Все последующие изображения будут догружаться по мере скроллинга.

    Тут буду краток — круто, если это будет реализовано на большом контентном проекте. Однако после внедрения на одном из самых крупных сайтов в моей практике, скорость загрузки не изменилась.

    5 ноября Google добавил рекомендации для Lazy Load, а вот тут собрана подробная инструкция по настройке изображений и видео (материал на английском языке).

    BASE64 и CSS-спрайты

    Для небольших вспомогательных изображений-элементов дизайна рекомендуется рассмотреть кодирование картинок в BASE64 или использование CSS-спрайтов. Это позволит убрать дополнительный запрос к серверу, а изображение будет корректно отображаться на странице (во всех современных браузерах). Таким образом можно «разгрузить» сервер лишними обращениями, что тоже ускорит время загрузки. Как показывает практика, изображения лидируют по количеству обращений к серверу, однако вместе с использованием base64 можно изменить этот стандарт. Ниже показан скриншот из сервиса webpagetest.org. С перекодированием изображений в base64 мне удалось на одном своём сайте сократить количество реквестов до 14, и это очень мало.

    Следует отметить, что использование base64 подходит только для совсем маленьких элементов — иконки или кнопки. Допускается использование для небольших не сложных изображений, например, однотонных или с добавлением текста. Для больших картинок использованный в html-разметке код будет занимать больше объема, чем объём самого изображения в формате, к примеру, jpeg. Подробнее про влияние большого нерационального количества Base64 в коде сайта можно почитать в этой статье на английском языке.

    Подробнее о цели этой доработки можно прочитать в блоке «Оптимизация количества серверных реквестов».

    Оптимизация CSS

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

    Для оптимизации CSS следует придерживаться нескольких техник:

    Загрузка только нужных CSS

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

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

    Используемый мной файл стал на 72% процента «легче» после того как инструмент удалил 78% правил CSS.

    Малые CSS лучше включить сразу в HTML-код

    Лучше отказаться от загрузки небольших CSS файлов. Если отдельный документ CSS содержит 10-20 строк кода, содержимое этого файла рекомендуется встроить сразу в html код с помощью тега . Это позволит сократить время обработки правил CSS, минуя стадию загрузки отдельного файла (опять же, оптимизация серверных реквестов).

    Использование только файлов CSS и тега

    Не рекомендуется встраивать стили оформления в теги документа. Следует использовать файлы или теги в связке с атрибутами class. Пример некорректного использования:

    Встраивание стиля элемента в сам тег является устаревшей техникой написания кода. Валидатор кода W3 будет сигнализировать об ошибках, а браузер вновь перестраивать макет страницы.

    Минификация файлов CSS

    Рекомендуется для всех файлов CSS провести минификацию. Это позволит удалить ненужные символы и пустые строки / пробелы в файлах, что повлечёт за собой сокращение объёма каждого файла. Для CSS Google рекомендует использовать CSSNano или ccso.

    Можно встретить примеры плагинов для разных CMS, которые делают минификацию файлов CSS, например, бесплатные AutoOptimize для WordPress, MinifyX для MODx Revolution или отдельные плагины для Битрикс.

    Если же доработка по минификации разовая, можно обратиться к выгрузке оптимизированных данных из отчёта Google PageSpeed Insights как это было показано в пункте про оптимизацию изображений.

    Оптимизация JS

    Аналогично файлам CSS, браузер может задерживать время отображения контента страниц сайта из-за загрузки и обработки файлов JS. Большинство рекомендаций повторяются, однако есть дополнения.

    Для оптимизации скриптов на сайте необходимо следовать рекомендациям:

    Загрузка только используемых файлов JS

    Загружать только те скрипты, которые используются на странице. Браузеру не следует загружать лишние скрипты, которые не влияют на работу элементов просматриваемой страницы.

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

    Нужно обязательно следить за тем, чтобы у каждой страницы был свой отдельный набор скриптов.

    Встраивание JS скриптов в HTML-код

    Небольшие скрипты сайта рекомендуется не загружать отдельным серверным запросом, а встроить в код страниц с помощью тега

    Минификация JS, CSS и картинок

    Мне нужно минифицировать JS, CSS и картинки. Сервер на Apache.

    Посоветуйте пожалуйста как сделать максимально автоматизированно, а не сжимать по файлу и раскидывать по папкам.

    Можно ли возложить минификацию на сервер установив PageSpeed Module и настроив .htaccess (или другой модуль) или это создаст слишком большую нагрузку?

    Если вручную, то какие есть инструменты для пакетной обработки?

    В общем у кого есть опыт поделитесь пожалуйста.

    2 ответа 2

    Процесс минификации можно проводить не постоянно при каждом новом запросе(динамически), а статически, т.е сразу перед выкладыванием в продакшн.


    Для этого существует множество автоматизированных решений.
    Одно из таких — Grunt.

    Грант использует систему «заданий» и плагинов, что делает его в этом плане достаточно гибким.

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

    Вкратце, что можно сделать — это прописать в htaccess управление разными модулями апача для максимальной оптимизации сайта. Вот наткнулся недавно на хороший пример кеширования: Правильное кэширование средствами htaccess

    Там уже кешируются текстовые форматы и включен Gzip

    Если хотите что-то еще, нужно дополнительно минифицировать (обфусцировать) js/css файлы. Но это чаще делается от того, чтобы Ваш фронт-енд не скопировали и в легкую не начали пользовать на другом проекте.

    Также необходимо объединять все файлы ксс воедино, а лучше инлайново встраивать (копировать из style.css) в хедер, в тег — выглядит по-дурацки и устаревшим, но гуглу нравится. То же самое можно проделать с js и подключать его перед закрывающим . Но это все общие рекомендации и в частных случаях могут делать только хуже.

    Также для больших сайтов с куче фотографий и бесконечной прокруткой необходимо использовать lazyload для картинок. Сами картинки также должны быть предварительно оптимизированы. Недостаток непопадания картинок в индекс лечится добавлением в отдельный sitemap именно для картинок.

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

    Будущее действительно за автоматизированными и общепринятыми решениями типа grunt.

    Оптимизация CSS и HTML-кода сайта

    Оптимизировать код HTML и каскадные таблицы стилей (CSS) нужно для того, чтобы ускорить процесс загрузки сайта и контента, размещенного на нем. Экономия времени и трафика, в целом, спустя долгий срок после оптимизации, получится существенной, даже если внешне изменение скорости будет не очень заметно.

    Оптимизация HTML-кода

    Для того чтобы HTML-код способствовал быстрой загрузке сайта, он должен соответствовать нескольким условиям:

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

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

    Уменьшение объема кода и оптимизация CSS

    Сделать код сайта проще можно, уменьшив его объем. Для этого нужно выполнить несколько операций.

    Прежде всего, следует избегать флеш-технологий, JavaScript, фреймов, текста, представленного картинкой. Все элементы, какие возможно, следует оформить в отдельных, внешних файлах (например, CSS и JS, как уже отмечалось выше). Помогут для оптимизации кода специальные плагины. К примеру, можно установить плагин Autoptimize, который автоматически оптимизирует код HTML, CSS, JS (если поставить соответствующие галочки). Необходимо настроить грамотную и удобную навигацию по сайту, которая будет понятна пользователям и корректно распознаваема поисковиками. Это увеличит скорость, качество загрузки и индексации сайта.

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

    Некоторые способы улучшить структуру CSS в ручном режиме:

    • Удалить лишние пробелы и разрывы строк, которые перегружают файл CSS и затрудняют работу роботов;
    • Прописывать обобщающие свойства вместо несколько раз повторяющихся похожих команд;
    • Использовать лаконичные, понятные описания в комментариях;
    • Необычные шрифты прописывать при помощи стилей, а не изображений;
    • Для картинок создавать alt и title (разные для каждого изображения), чтобы их содержание распознавалось ботами поисковых систем;
    • Применять к заголовкам инструменты H1 – и далее, чтобы они корректно распознавались при индексации;
    • Прописывать в keywords только те ключевые слова, которые используются на странице, минимизировать их количество;
    • Использовать разнообразные и краткие мета-теги.

    CSS и HTML оптимизаторы

    Удобно и быстро осуществить оптимизацию непосредственно в браузере можно при помощи специальных сервисов, например:

    • CleanCSS.com;
    • CSS Optimizer;
    • CSS Compressor;
    • CY-PR.com;
    • плагин Autoptimize.

    Специалисты в SЕО и IT советуют пользоваться CleanCSS.com, так как он позволяет выбрать степень сжатия от низкой до высочайшей или подобрать индивидуальные настройки. После высокого и высочайшего уровней оптимизации код сайта принимает практически нечитаемый вид, и вносить в него изменения будет практически невозможно. Поэтому для начала следует воспользоваться стандартной оптимизацией. Можно выбрать режимы сжатия конкретного контента или оптимизацию отдельных параметров: сжатие шрифтов, изображений, удаление пробелов.

    Также программа позволит сохранить результат в файле, в том числе в виде текста с отчетом о произведенных изменениях, подсветкой синтаксиса.

    На ресурсе CY-PR.com также есть похожий инструмент для оптимизации, который облегчает структуру CSS на 25-30%, но здесь нет возможности сформировать файл с кодом после выполнения операции.

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

    После оптимизации следует проверить работоспособность сайта, корректное отображение дизайна, скорость загрузки. Нормальной считается ситуация, когда страницы и пользовательские опции сайта загружаются не более 3-5 секунд.

    Для того чтобы проверить степень оптимизации и понять, насколько эффективно теперь прописан HTML-код, можно воспользоваться такими сервисами, как:

    • optimization.com;
    • Портал seo-чеклист;
    • плагин Firebug.

    Эти инструменты помогут проверить, все ли сделано для уменьшения объема HTML-кода и улучшения его структуры. На ресурсе SEO-чеклист можно проверять по списку, что уже было сделано для оптимизации, а что – еще нет, и устанавливать пометку на совершенных делах.

    Валидация

    Проверить код сайта на наличие ошибок можно при помощи сервисов проверки валидации – валидаторов. Эффективная проверка кода осуществляется с помощью validator.w3c.org

    Если система при первой проверке выдаст более полутысячи ошибок, не стоит расстраиваться. После исправления определенного недочета, можно запускать проверку снова и ошибок станет намного меньше, так как один недостаток влечет за собой другие и при его исправлении они исчезнут.

    Сайт с исправленным и оптимизированным кодом имеет больше шансов на высокие позиции в выдаче, чем ресурс с перегруженным HTML-кодом, в котором присутствуют ошибки.

    Minifying CSS With CSS Optimizer

    The following is an extract from our book, CSS Master, written by Tiffany Brown. Copies are sold in stores worldwide, or you can buy it in ebook form here.

    Developer tools help you find and fix rendering issues, but what about efficiency: are our file sizes as small as they can be? For that, we need minification tools.

    Minification in the context of CSS simply means removing excess characters. Consider, for example, this block of code:

    That’s 98 bytes long, including line breaks and spaces. Let’s look at a minified example:

    Now our CSS is only 80 bytes long and 18% reduction. Fewer bytes, of course, means faster download times and data transfer savings for you and your users.

    In this section, we’ll look at CSS Optimizer, or CSSO, a minification tool that runs on Node.js. To install CSSO, you’ll first have to install Node.js and NPM. NPM is installed as part of the Node.js installation process, so you’ ll only need to install one package.

    Using CSSO does require you to be comfortable using the command-line interface. Linux and OS X users can use the Terminal application (Applications > Terminal.app for OS X). If you’re using Windows, utilize the command prompt. Go to the Start or Windows menu and type cmd in the search box.

    Installing CSSO

    Once you have set up Node.js and NPM, you can install CSSO. At a command line prompt, type:

    npm install -g csso
    The -g flag installs CSSO globally so that we can use it from the command line. OS X and Linux users may need to use sudo ( sudo npm install -g csso ). You’ll know it’s installed when NPM prints its installation path to the command line window, and the command line prompt reappears, as depicted in Figure 3.25.

    Figure 3.25. Installing CSSO using Windows’ command prompt

    Now we’re ready to minify our CSS.

    Minification with CSSO

    To minify CSS files, run the csso command, passing the name of a file as an argument:

    csso style.css
    This will perform basic compression. CSSO strips unneeded whitespace, removes superfluous semicolons, and deletes comments from your CSS input file.

    Once complete, CSSO will print the optimized CSS to standard output, meaning the current terminal or command prompt window. In most cases, however, we’ll want to save that output to a file. To do that, pass the second argument to csso the name of the minified file. For example, if we wanted to save the minified version of style.css as style.min.css, we’d use the following:

    csso style.css style.min.css
    By default, CSSO will rearrange parts of your CSS. It will, for example, merge declaration blocks with duplicated selectors and remove some overridden properties. Consider the following CSS:

    body <
    margin: 20px 30px;
    padding: 100px;
    margin-left: 0px;
    >

    h1 <
    font: 200 36px / 1.5 sans-serif;
    >

    h1 <
    color: #ff6600;
    >
    In this snippet, margin-left overrides the earlier margin declaration. We’ve also repeated h1 as a selector for consecutive declaration blocks. After optimization and minification, we end up with this:

    CSSO removed extraneous spaces, line breaks, and semicolons, and shortened #ff6600 to #f60 . CSSO also merged the margin and margin-left properties into one declaration ( margin: 20px 30px 20px 0 ) and combined our separate h1 selector blocks into one.

    Now, if you’re skeptical of how CSSO will rewrite your CSS, you can disable its restructuring features. Just use the —restructure-off or -off flags. For example, running csso style.css style.min.css -off gives us the following:

    Now our CSS is minified, but not optimized. Disabling restructuring will keep your CSS files from being as small as they could be. Avoid disabling restructuring unless you run into problems.

    Preprocessors, introduced in Chapter 9, offer minification as part of their toolset; however, using CSSO can shave additional bytes from your file sizes.

    Минимизация CSS с использованием js optimizer

    У нас есть веб-приложение на основе Backbone и Require JS. Мы используем оптимизатор Require Js для оптимизации кода.

    Он хорошо работает для js файлов. Я мог видеть некоторые шаги минимизации css в документации Require JS, но это не работает

    Есть ли способ сделать это? У меня есть 10 css файлов.

    Я использую инструмент построения grunt , а затем есть множество задач, которые вы можете загрузить, включая grunt-contrib, который имеет как требуемые задачи, так и mincss. Используйте это, чтобы загрузить grunt-contrib в ваш файл grunt.

    CSS оптимизация — делаем загрузку сайтов более быстрой

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

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

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

    И вот тут на помощь приходят простые и удобные в использовании он-лайн сервисы – CSS-оптимизаторы.

    Путем поиска в Гугле нашлось несколько подобных инструментов, готовых помочь разрешить поставленную задачу (все сервисы буржуйские):

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

    Многие пользователи широкополосного Интернета не увидят в этом смысла, поскольку большинство сайтов у них открывается быстро. Но представьте себе: если каждый сайт станет загружаться хотя бы на 10% быстрее, то сколько времени Вы сохраните за неделю, месяц? А за год? При этом стоит учитывать и факт экономии трафика. Она тоже может стать впечатляющей. Ведь (перефразирую известную пословицу) килобайт мегабайт бережет ;).

    Что тестировалось

    Для тестирования результатов оптимизации я использовал файлы CSS следующий сайтов:

    Дабы ничего не усложнять, настройки оптимизаторов я оставлял по умолчанию. Будем считать, что они оптимальны и предназначены для среднего юзера.

    Результаты тестирования

    Сервис / После оптимизации / Уменьшение, % / Комментарии

    Первым тестился Хабрахабр с его 40.69 килобайтовым CSS.

    • CSS Optimizer / 23.25 KB / 42.86% / Уменьшилась высота строк, потеряли жирность некоторые заголовки, уменьшился шрифт некоторых ссылок. В принципе, даже эти недочеты не мешают удобству просмотра страницы, поскольку изменения касаются второстепенных элементов.
    • Clean CSS / 29.13 KB / 30.1% / Никаких изменений не произошло.
    • CSS Compressor / 21.69 KB / 46.7% / Также никаких изменений.

    Следующими идут «Новости 2.0». Размер CSS – 18.15 KB.

    • CSS Optimizer / 10.46 KB / 42.34% / Практически никаких изменений не произошло, кроме незначительного увеличения шрифта в двух строках. В целом на юзабилити это никак не отразилось.
    • Clean CSS / 11.40 KB / 38.7% / Все осталось на месте.
    • CSS Compressor / 8.94 KB / 50.74% / Увеличились отступы, потеряли центровку некоторые элементы, испортились стили для некоторых типов ссылок.

    Теперь тестим iXBT.com. Размер CSS – 15.47 KB.

    • CSS Optimizer / 11.60 KB / 25.06% / Правая колонка уплывает вниз, что однозначно сказывается на юзабилити.
    • Clean CSS / 11.74 KB / 24.4% / Совсем незначительное изменение отступов в некоторых местах.
    • CSS Compressor / 7.32 KB / 51.75% / Полнейшее искажение внешнего вида страницы. Ее просто не узнать.

    Последним в тест попадает CSS моего блога. Его размер – 12.02 KB.

    • CSS Optimizer / 7.60 KB / 36.75% / Исчезает белый фон, изменяются отступы некоторых элементов и высота строк.
    • Clean CSS / 9.65 KB / 24.5% / Все на своих местах.
    • CSS Compressor / 4.74 kB / 60.54% / Полностью теряется форматирование страницы. «Ни в какие ворота не лезет».

    Делаем выводы

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

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

    Пользоваться остальными двумя вариантами – CSS Optimizer и CSS Compressor – стоит только в конкретном случае, «примерив» на сайте корректность работы оптимизированного стилевого файла.

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

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

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

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

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

    Сразу возникает вопрос — а зачем это нужно? Ответ прост: оптимизируя таблицы стилей снижается загружаемый объем кода, вес файла style.css. В итоге страница станет меньше весить, а это экономия трафика и увеличение скорости загрузки сайта.

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

    Как оптимизировать CSS и уменьшить размер файла

    Подойти к оптимизации можно различными способами. Самый безопасный — ручная чистка файла стилей. Хотя можно поспорить, ведь незнающий человек может такого натворить, что черт ногу сломит, да и максимального сжатия все равно не добиться.

    Какие мероприятия можно провести при оптимизации CSS:

    • Удалить неиспользуемые селекторы.
    • Удалить неиспользуемые закомментированные строки.
    • Сократить объем комментариев в файле стилей. Всегда удобно, когда элементы сгруппированы по общему признаку и имеют невидимые для глаз обычных пользователей комментарии. Но зачастую, чтобы добиться высокой степени сжимаемости CSS, приходиться от них избавляться. Чтобы при дальнейшей работе проще ориентироваться в коде, Вы можете по-прежнему их использовать, но оставляйте краткие описания.
    • Удалить пустые строки и пробелы. Но слишком не стоит увлекаться, код должен оставаться читаемым, чтобы без труда вносить правки.
    • Объединить элементы с одинаковыми свойствами.
    • Оптимизировать шрифты. Лучше использовать один шрифт. В каждом отдельно взятом блоке страницы использовать разный шрифт — дурной тон web-дизайна и, как видите, перегружает файл стилей.
    • Оптимизировать цвета. Это сделать достаточно просто, но сложно объяснить на словах, поэтому приведу наглядные примеры:
  • Оптимизировать отступы. Опять же на примерах:

    Конечно можно найти и другие пути оптимизации, но на этом я пожалуй остановлюсь и продолжу свой рассказ про онлайн инструменты оптимизации CSS.

    Оптимизация CSS с помощью онлайн сервисов

    Ко всем онлайн сервисам необходимо относиться с особой осторожностью и внимательностью, чтобы не наломать дров. И в обязательном порядке — делать резервную копию, впрочем данная рекомендация относится ко всем файлам, которые редактируются.

    Существует достаточное количество онлайн инструментов (CleanCSS, Online CSS Optimizer и т.д.), способных выполнить оптимизацию CSS. Они мало чем отличаются друг от друга, зачастую используют одни и те же алгоритмы и библиотеки сжатия, например YUICompressor или CSSTidy.

    Подробнее остановлюсь на том, которым чаще всего пользуюсь. Это CSS оптимизатор на портале для вебмастеров CY-PR.com.

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

    • максимальное (код не читаем, наименьший размер);
    • высокое (сносная читаемость, маленький размер);
    • стандартное (баланс между читаемостью и размером);
    • низкое (читаемый код);
    • выбрать самому (ввести параметры ниже).

    Для безопасной оптимизации рекомендуется использовать стандартное сжатие. Ради интереса воспользуйтесь другими быстрыми настройками, но помните о резервной копии. После того как параметры сжатия CSS заданы можно приступать к непосредственной работе скрипта, нажатием кнопки Оптимизировать CSS.

    Результаты выводятся ниже с указанием исходного и оптимизированного размера кода, а также коэффициент сжатия в процентном соотношении:

    И последнее дополнение: старайтесь объединять CSS файлы. Некоторые плагины используют свои стили, хранящиеся в отдельных файлах, было бы неплохо их объединить в один. В следующий раз в рамках данной рубрики я расскажу как можно автоматически получать на выходе сжатый CSS. До скорой встречи!

    Топ-пост этого месяца:  Набираем высоту PHP функции работы с массивами и не только
  • Добавить комментарий