Минимизация CSS-файлов


Содержание

Минимизация HTML, CSS, JS-файлов на WordPress

Тема об улучшении скорости загрузки сайта поднималась неоднократно потому, что это очень важный аспект. Он оценивается как поисковиками, так и пользователями, о чем говорилось многократно. И чтобы добиться положительного результата придется немного потрудиться. В предыдущих статьях по данном материале речь шла о кэшировании WordPress, gzip сжатии и несколько полезных советов. Это все можно назвать «комплексным процессом». А сегодня поговорим еще об одном действие, которое также поможет оптимизировать скорость сайта.

Абсолютно любой сайт включает в себя дополнительные файлы такие как CSS, JavaScript, HTML. Все они изначально написаны с удобством для редактирования и понятным отображением. То есть отступы, комментарии, перенос строки и прочее. Но это важно только человеку. Так как браузер хорошо обрабатывает код и без всех этих пробелов. И даже было бы лучше убрать их и сократить весь код. Сейчас как раз этим и займемся.

Что такое минимизация?

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

Работает ли?

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

Установка

Для платформы WordPress было создано немало специальных расширений (плагинов), позволяющих сократить файлы JS, HTML, CSS без особых затруднений. В принципе, это суть всех плагинов — упрощать вашу работу по оптимизации. Из всех мной практикующих плагинов я остановился лишь на одном: WP Minify Fix. Не потому, что остальные не справляются со своими обязанностями, а из-за большого количества настроек, которые попросту не посчитал необходимыми, во всяком случае для меня.

Первым делом скачиваем и устанавливаем плагин WP Minify Fix. Затем переходим на вкладку «Настройки- WP Minify Fix». Здесь всего одна страница параметров.

Первые две строчки – вкл/выкл копирайт (ссылка в футоре на плагин)

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

И последние два поля ввода – исключение не желаемых файлов в сокращении.

Чуть не забыл: в плагинах для кэширования имеется свой встроенный инструмент минимизации файлов (в большинстве).

Объединение и минимизация CSS и Javascript файлов

Объединение и минимизация CSS-файлов

В макете сайта все дополнительные CSS-файлы добавляются с использованием метода Core_Page::instance()->css() и показываются с использованием метода showCss() , например:

Объединение и минимизация Javascript-файлов

В макете сайта все Javascript-файлы добавляются с использованием метода Core_Page::instance()->js($js, $mode = FALSE) и показываются с использованием метода showJs() , например:

При использовании объединения и минимизации Javascript-файлов асинхронная загрузка указывается для Core_Page::instance()->showJs(‘async’), например:

Для асинхронной загрузки указывается опция ‘async’ или TRUE, для загрузки в режиме defer указывается ‘defer’.

Обновление минимизированных файлов

Объединенные файлы размещаются в директории hostcmsfiles/css/ и hostcmsfiles/js/, файлы обновляются при редактировании макетов через центр администрирования. В случае, если вы правите CSS/JS вручную, то необходимо самостоятельно удалять сохраненные файлы в hostcmsfiles/css/ и hostcmsfiles/js/.

Библиотека Minify – работа с CSS и JavaScript

Здравствуйте, друзья! Два года назад я рассказывал о сжатии JavaScript, а в прошлый раз затронул тему оптимизации CSS. И вот настало время, когда можно объединить знания, накопленный опыт и двигаться дальше.

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

Сжимая CSS и JS различными онлайн инструментами мы несомненно получаем плюс к производительности сайта, даже можем объединить файлы для снижения http запросов, но все эти действия приводят к условно большим затратам труда… Пришло время раскрыть карты и предложить Вам более универсальное решение — пользоваться библиотекой Minify для минимизации, объединения файлов и их кэширования.

Наглядный пример, взятый со страницы проекта на Google Code, демонстрирующий результаты использования библиотека Minify, из которого видно насколько сократилось число http запросов к серверу и уменьшился размер отправленных данных:

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

Подключение и использование библиотеки Minify

Перехожу к основному вопросу — как пользоваться скриптом Minify. Для начала необходимо скачать архив с последней версией на этой странице. Затем сохранить папку /min/ , находящуюся в архиве, на сервер в корневую директорию сайта.

Теперь практически все готово. Осталось заменить стандартные вызовы файлов css и js на минимизированные скриптом. Приведу пример, на нем проще понять. В файле header.php нахожу строку с указанием файла стилей:

и заменяю ее на:

Параметр f отвечает за относительный путь к файлу, который необходимо минимизировать. Если необходимо задействовать несколько файлов, то их следует разделять запятой:

В качестве помощника Вы можете использовать Minify URI Builder на своем сайте, после распаковки архива он будет расположен по адресу: ../min/builder/ . Для того чтобы включить Builder необходимо в папке /min/ найти файл config.php и найти в нем строку:

Обратите внимание, по-умолчанию он отключен! Для задействования необходимо заменить значение false на true . Для доступа Вам потребуется пароль, задается он в этом же файле, в строке:

Смените пароль на свой, если намерены активировать Minify URI Builder. Логин для входа — admin.

Подключать сжатие с таким помощником еще проще — достаточно указать путь к файлу в текстовом поле, при необходимости добавить еще несколько кнопкой Add file+

Затем после нажатия Update получите ссылки, которыми следует заменить исходные:

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

Плагин Better WordPress Minify и его особенности

Для тех кто не особо хорошо разбирается в HTML рекомендуется установить плагин для ВордПресс BWP Minify, использующий данную библиотеку. После активации он объединяет и сжимает JS, CSS файлы для ускорения загрузки страницы.

Раньше у меня был установлен плагин WP-Minify, однако он давно не обновлялся и более не поддерживается автором, пришлось удалить.

Better WordPress Minify работает аналогично, перехватывая на странице JS/CSS файлы, минимизирует их, а затем подключает объединенные скрипты и стили в заголовке WordPress. Основные особенности:

  • простая интеграция библиотеки Minify на блог;
  • минимизация JavaScript, CSS и HTML;
  • встроенные средства отладки для поиска неисправностей;
  • возможность подключения дополнительных JS и CSS файлов, требующих сжатия;
  • возможность исключения определенных JS и CSS файлов, не требующих сжатия;
  • оптимизированные файлы могут быть размещены там, где вы хотите;
  • поддержка сжатия внешних файлов с помощью кэширования;
  • заголовки Expire для JS и CSS файлов;
  • обнаружение и устранение повторяющихся файлов.

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

Неважно какой Вы выберите метод, будь то прямое подключение библиотеки Minify на сайт или установка плагина BWP-Minify — в любом случае подобная оптимизация положительно скажется на быстродействии сайта, ускорении загрузки страниц. Желаю успехов, до скорой встречи на Блоге Свободного Вебмастера!

Илон Маск рекомендует:  Что такое код enumprops

Как ускорить сайт, минимизируя HTML, CSS и JavaScript

Скорость загрузки сайта является важным показателем как для поисковой системы, так и для пользователя. Доля мобильного интернета растет вместе с количеством мобильных устройств, и люди предъявляют к сайтам все больше требований – в том числе касающихся быстрой загрузки контента. А запуск нового алгоритма ранжирования Google для мобильного поиска – Speed Update – обязует уделять больше внимания скорости загрузки мобильных сайтов.

Рассмотрим два способа ускорить сайт – ручной и с помощью программ-минимизаторов.

Что такое минимизация кода

В инструменте Google для проверки скорости загрузки PageSpeed в результате проверки страницы сайта можно встретить следующие рекомендации:

«minify HTML» — сократить код HTML;
«minify CSS» — сократить код CSS;
«minify JavaScript» — сократить код JavaScript.

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

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

Ручная минимизация кода

Рассмотрим для примера простую HTML-страницу:

Андрей Тарицын

Клиентская оптимизация в ASP.NET MVC 3. Сжатие JS- и CSS-файлов

В своей предыдущей статье «Облегчаем работу с JS- и CSS-кодом в Visual Studio» я уже говорил о том, что практически в любом современном веб-приложении среднего размера содержатся десятки JavaScript- и CSS-файлов. В прошлый раз я рассказал, как облегчить работу с кодом, который расположен в этих файлах. Рассмотрим эту проблему под другим углом: большой объем кода внутри этих файлов, к которому мы еще добавили регионы, теги reference и другие документирующие комментарии, приводит к увеличению времени загрузки веб-страниц и увеличивает объем трафика, который проходит от сервера к браузеру пользователя. Если время ожидания загрузки веб-страницы будет слишком долгим, то пользователь сайта начнет себя чувствовать некомфортно и может покинуть сайт. Кроме того, проблемы могут возникнуть и у владельца сайта, если исходящий с сайта трафик превысит заранее оговоренный с хостинговой компанией объем.

В данной серии статей я хочу рассказать о клиентской оптимизации веб-приложений, написанных на ASP.NET MVC 3. Клиентская оптимизация – это комплекс мер по увеличению скорости загрузки клиентской части веб-страницы (HTML, CSS, JavaScript и графика). Понятие клиентская оптимизация известно давно, но впервые о ней серьезно заговорили в конце 2007 года после публикации статьи «13 простых правил для ускорения вашего веб-сайта» («Thirteen Simple Rules for Speeding Up Your Web Site»), написанной командой Exceptional Performance (Исключительная производительность) компании Yahoo!. За прошедшие четыре года 13 простых правил превратились в 35 практических рекомендаций, с которыми можно ознакомиться в статье «Best Practices for Speeding Up Your Web Site».

В данной статье мы рассмотрим и применим на практике только одну рекомендацию команды Exceptional Performance – минимизацию JS- и CSS-кода.

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

С помощью минимизации (также используется синоним — минификация) можно существенно уменьшить размеры JS- и CSS-файлов и тем самым сократить время загрузки веб-страницы.

В процессе минимизации производятся следующие действия:

  1. Из кода удаляются все комментарии (за исключением CSS-хаков)
  2. Из кода удаляются лишние пробелы, символы табуляции и переноса строки
  3. Длинные программные инструкции (или стилевые правила) заменяются на более короткие эквиваленты


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

При минимизации JS-файлов можно добиться уменьшения размера до 30-50%. CSS-файлы сжимаются хуже – 40-75%. Во многом данный показатель зависит от количества комментариев к коде.

Утилиты, осуществляющие минимизацию

Существует несколько широко известных утилит для минимизации JS-кода: JSMin, Google Closure Compiler, Packer и UglifyJS. Из утилит для минимизации CSS-кода вспоминается только CSSTidy. Также существуют универсальные утилиты, которые сжимают и JS-код, и CSS-код: YUI Compressor и Microsoft Ajax Minifier.

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

Лучше производить минимизацию ресурсов в IDE, в данном случае в Visual Studio. Минимизация производится в процессе сборки (компиляции) проекта или при сохранении измененного файла. Такой подход позволяет протестировать минимизированный код до публикации на производственном сервере (например, работоспособность минимизированного JS-кода можно проверить с помощью юнит-тестов).

Microsoft Ajax Minifier

В своих проектах я обычно использую Microsoft Ajax Minifier (далее Ajax Minifier). Изначально данный продукт разрабатывался для минимизации JS-кода библиотеки Microsoft ASP.NET AJAX и поэтому не получил такого широкого распространения как YUI Compressor и Google Closure Compiler. Но, на мой взгляд, Ajax Minifier – это очень мощное средство минимизации, которое ни в чем не уступает своим конкурентам.

На нескольких официальных сайтах компании Microsoft в разделах, посвященных Ajax Minifier, до сих пор стоят ссылки на старую версию продукта (версию 4.0). При использовании данной версии для минимизации CSS-кода иногда возникают ошибки из-за того, что Ajax Minifier, не знает как обрабатывать некоторые новые или специфичные для конкретных браузеров синтаксические конструкции (например, псевдо-класс ::-moz-focus-inner ). В текущей версии (4.40) подобные ошибки уже не возникают. Самую последнюю версию Ajax Minifier можно скачать по адресу — http://ajaxmin.codeplex.com.

Его можно использовать тремя разными способами: как утилиту командной строки ( AjaxMin.exe ), .NET-библиотеку ( AjaxMin.dll ) или задачу MSBuild (обеспечивает интеграцию с Visual Studio). Соответственно мы будем использовать третий способ – задачу MSBuild. При использовании задачи MSBuild минимизация файлов производится во время сборки (компиляции) проекта.

Чтобы добавить задачу MSBuild в проект ASP.NET-приложения нужно выполнить следующие действия:

  1. В Solution Explorer щелкните правой кнопкой мыши по проекту и в контекстном меню выберите пункт Unload Project. После чего пиктограмма проекта станет серой.
  2. Снова щелкните по проекту правой кнопкой мыши и выберите в контекстном меню пункт Edit .csproj. В окне XML-редактора откроется код проекта.

Рис. 1. Контекстное меню выгруженного проекта

Немного поясню, что делает данный код. Элемент Import подключает задачи, которые были установлены вместе с Ajax Minifier. В элементе Target указано, что данная задача будет запущена после успешной компиляции проекта.
Внутри элементов ItemGroup задаются группы файлов, которые мы хотим минимизировать. Элементы JS и CSS – это произвольные названия групп файлов, которые можно переименовать на свое усмотрение (например, Scripts и StyleSheets ). В атрибутах Include указан шаблон пути к обрабатываемым файлам: **\*.js и **\*.css . В атрибутах Exclude заданы шаблоны путей, которые нужно исключить из обработки: минимизированные файлы ( **\*.min.js и **\*.min.css ), файлы в определенных директориях ( **\ckeditor\*.js , **\ckeditor\**\*.js , **\ckeditor\*.css и **\ckeditor\**\*.css ) и конкретные файлы ( **\MicrosoftAjax.js ).
С помощью атрибутов JsSourceFiles и CssSourceFiles элемента AjaxMin связываются группы файлов, которые были объявлены внутри тегов ItemGroup , с конкретными обработчиками. В атрибутах JsSourceExtensionPattern и CssSourceExtensionPattern указаны расширения исходных файлов, а атрибутах JsTargetExtension и CssTargetExtension – расширения файлов, которые появятся на выходе. В остальных атрибутах элемента AjaxMin указываются настройки алгоритмов сжатия, о которых я расскажу чуть позже.

  • Щелкните по проекту правой кнопкой мыши и в контекстном меню выберите пункт Reload Project. После чего проект загрузиться в Visual Studio и его пиктограмма перестанет быть серой.
  • После проделанных выше действий можно запустить сборку проекта. Если сборка прошла успешно, то чтобы увидеть минимизированные файлы в меню проекта отметьте кнопку Show All Files.

    Рис. 2. Кнопка Show All Files в меню проекта

    Теперь минимизированные файлы станут видны в Solution Explorer:

    Рис. 3. Минимизированные файлы

    Эти файлы не включены в проект. Если вы публикуете свои проекты с помощью средств развертывания Visual Studio, то вам следует включить данные файлы в проект, иначе они не будут скопированы при развертывании. Но из-за включения файлов в проект могут возникнуть проблемы с системой контроля версий: перед сборкой придется брать все файлы на Check Out, чтобы Ajax Minifier смог их перезаписать.

    Рассмотрим более подробно атрибуты элемента AjaxMin , отвечающие за настройку алгоритма минимизации JS-файлов:

    1. JsCollapseToLiteral = » (true|false) » . Разрешает преобразование конструкций вида: new Object() в <> и new Array() в [] .
    2. JsCombineDuplicateLiterals = » (true|false) » . Разрешает замену повторяющихся литералов на локальные переменные. Приведу пример:

    В процессе минимизации заменяется на:

    Теперь рассмотрим атрибуты, отвечающие за настройку алгоритма минимизации CSS-файлов:

    1. CssCommentMode = » (None|All|Hacks) » . Указывает, как обрабатывать комментарии в CSS-коде. По умолчанию используется опция None , которая разрешает удаление всех комментариев за исключением «важных» (комментарии вида: /*! какой-нибудь текст */ ). Опция All разрешает удаление всех комментариев. Опция Hacks оставляет в коде комментарии, которые используются в качестве CSS-хаков, и «важные» комментарии.
    2. CssSeverity = » (число) » . Задает уровень серьезности ошибок, выдаваемых в процессе минимизации. По умолчанию уровень задан равным нулю (выводятся только синтаксические ошибки). Если нужно получить более подробную информацию (возможные ошибки, предупреждения и советы), то следует поднять значение уровня серьезности.
    3. CssTermSemicolons = » (true|false) » . Если установлено значение true , то после каждого стилевого правила ставится точка с запятой. По умолчанию установлено значение false .
    4. CssColorNames = » (Strict|Hex|Major) » . По умолчанию используется опция Strict , которая разрешает заменять RGB-коды цветов на «строгие» названия цветов (одобренные W3C), если эти названия короче RGB-кодов. При установленной опции Hex , все названия цветов заменяются на RGB-коды. Опция Major разрешает использование названий цветов, которые поддерживаются всеми основными браузерами (рекомендации W3C игнорируются).
    5. CssExpandOutput = » (true|false) » . Если выбрано значение true , то в коде будут сохранены переносы строк. В противном случае, код минимизируется в одну строку (значение по умолчанию).
    6. CssIndentSpaces = » (число) » . Если значение атрибута CssExpandOutput установлено в true , то это свойство задает количество пробелов для добавления отступов во вложенных конструкциях (по умолчанию равно 4 ).

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

    Minifier

    Для Visual Studio также существует альтернатива утилите Ajax Minifier – это расширение Minifier. Данное расширение можно загрузить с сайта Visual Studio Gallery. Minifier использует для минимизации файлов сторонние утилиты: JavaScript-код сжимается с помощью Google Closure Compiler, а CSS-код — YUI Compressor.

    Для того, чтобы минимизировать JS-файл с помощью Minifier, нужно сначала выделить данный файл в Solution Explorer, а затем в окне Properties задать свойству Custom Tool значение равное GoogleClosureCompiler и нажать на клавиатуре Enter , после чего будет сгенерирована минимизированная версия файла.

    Рис. 4a. Настройка сжатия JS-файла с помощью Minifier

    Минимизация CSS-файлов производится аналогичным способом, только свойству Custom Tool нужно задать значение равное YUICompressor .

    Рис. 4б. Настройка сжатия CSS-файла с помощью Minifier

    Minifier производит минимизацию файла сразу после его сохранения. Поэтому при сохранении файла будет чувствоваться некоторая задержка (особенно при сохранении JS-файлов, т.к. минимизация производится с помощью веб-сервиса Closure Compiler). Преимущество данного подхода заключается в том, что минимизированные файлы сразу включаются в проект, благодаря чему решаются проблемы, возникающие при работе с системами контроля версий и развертывании. Недостатками данного VS-расширения являются: отсутствие сообщений об ошибках и возможности настроить алгоритм сжатия файла.

    Заключение

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

    Но это достаточно рутинная работа. Кроме того, для отладочной и производственной версий сайта нам требуются разные версии файлов (исходные файлы нужны в отладочной версии, а минимизированные в производственной).
    Перечисленные выше проблемы помогут решить менеджеры ресурсов (asset managers). Кроме того, многие менеджеры ресурсов предоставляют очень важную для клиентской оптимизации функциональность — объединение JS- и CSS-файлов. В следующей статье я расскажу о менеджерах ресурсов для ASP.NET MVC и подробно рассмотрю возможности одного из них.

    Ссылки

    UPD: Добавил UglifyJS в список утилит минимизации JS-кода.

    Сжимаем и минимизируем CSS при помощи Code Beautifier

    И снова обратимся к webo.in для оптимизации блога, теперь он предлагает:

    CSS-файлы можно уменьшить в размере.
    Рекомендуется воспользоваться инструментом для сжатия CSS-файлов (основанном на проекте CSS Tidy). После этого можно отдавать CSS-файлы в виде архивов с сервера (общий выигрыш до 85%).

    Сжатие мы настроили, пришло время минимизировать CSS и рассказать про инструмент для минимизации CSS-файлов (основанном на проекте CSS Tidy) — Code Beautifier.

    Что делает данный инструмент?

    Он заменяет определённые части кода на более короткие записи, например:

    а также уменьшает количество отступов, переводов строк, объединяет блоки и удаляет комментарии. Короче, CSS превращаеться в кашу. и тем самым минимизирует размер файла.

    Но, вы скажете: «а как же редактировать эту кашу»? Ответ прост, вам надо хранить резервную и читабельную версию файла, а в продакшн запускать минимизированную!

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

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

    Есть и подобные инструментарии, но с ними больше возни. Так как вам придётся также переименовывать все классы и прочие структуры в (x)HTML файлах.

    А также изменять пути хранения подключаемых файлов. Хотя можно настроить mod_rewrite конечно для этого дела, но это уже извращение на мой взгляд. Лучше тогда уж повесить все картинки на другой сервер, например с nginx на борту.

    Более подробнее о сжатии CSS с результатами тестирования CSS: все о сжатии

    Объединение и минимизация CSS и Javascript файлов

    Объединение и минимизация CSS-файлов

    В макете сайта все дополнительные CSS-файлы добавляются с использованием метода Core_Page::instance()->css() и показываются с использованием метода showCss() , например:

    Объединение и минимизация Javascript-файлов

    В макете сайта все Javascript-файлы добавляются с использованием метода Core_Page::instance()->js($js, $mode = FALSE) и показываются с использованием метода showJs() , например:

    При использовании объединения и минимизации Javascript-файлов асинхронная загрузка указывается для Core_Page::instance()->showJs(‘async’), например:

    Для асинхронной загрузки указывается опция ‘async’ или TRUE, для загрузки в режиме defer указывается ‘defer’.

    Обновление минимизированных файлов

    Объединенные файлы размещаются в директории hostcmsfiles/css/ и hostcmsfiles/js/, файлы обновляются при редактировании макетов через центр администрирования. В случае, если вы правите CSS/JS вручную, то необходимо самостоятельно удалять сохраненные файлы в hostcmsfiles/css/ и hostcmsfiles/js/.

    Библиотека Minify – работа с CSS и JavaScript

    Здравствуйте, друзья! Два года назад я рассказывал о сжатии JavaScript, а в прошлый раз затронул тему оптимизации CSS. И вот настало время, когда можно объединить знания, накопленный опыт и двигаться дальше.


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

    Сжимая CSS и JS различными онлайн инструментами мы несомненно получаем плюс к производительности сайта, даже можем объединить файлы для снижения http запросов, но все эти действия приводят к условно большим затратам труда… Пришло время раскрыть карты и предложить Вам более универсальное решение — пользоваться библиотекой Minify для минимизации, объединения файлов и их кэширования.

    Наглядный пример, взятый со страницы проекта на Google Code, демонстрирующий результаты использования библиотека Minify, из которого видно насколько сократилось число http запросов к серверу и уменьшился размер отправленных данных:

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

    Подключение и использование библиотеки Minify

    Перехожу к основному вопросу — как пользоваться скриптом Minify. Для начала необходимо скачать архив с последней версией на этой странице. Затем сохранить папку /min/ , находящуюся в архиве, на сервер в корневую директорию сайта.

    Теперь практически все готово. Осталось заменить стандартные вызовы файлов css и js на минимизированные скриптом. Приведу пример, на нем проще понять. В файле header.php нахожу строку с указанием файла стилей:

    и заменяю ее на:

    Параметр f отвечает за относительный путь к файлу, который необходимо минимизировать. Если необходимо задействовать несколько файлов, то их следует разделять запятой:

    В качестве помощника Вы можете использовать Minify URI Builder на своем сайте, после распаковки архива он будет расположен по адресу: ../min/builder/ . Для того чтобы включить Builder необходимо в папке /min/ найти файл config.php и найти в нем строку:

    Обратите внимание, по-умолчанию он отключен! Для задействования необходимо заменить значение false на true . Для доступа Вам потребуется пароль, задается он в этом же файле, в строке:

    Смените пароль на свой, если намерены активировать Minify URI Builder. Логин для входа — admin.

    Подключать сжатие с таким помощником еще проще — достаточно указать путь к файлу в текстовом поле, при необходимости добавить еще несколько кнопкой Add file+

    Затем после нажатия Update получите ссылки, которыми следует заменить исходные:

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

    Плагин Better WordPress Minify и его особенности

    Для тех кто не особо хорошо разбирается в HTML рекомендуется установить плагин для ВордПресс BWP Minify, использующий данную библиотеку. После активации он объединяет и сжимает JS, CSS файлы для ускорения загрузки страницы.

    Раньше у меня был установлен плагин WP-Minify, однако он давно не обновлялся и более не поддерживается автором, пришлось удалить.

    Better WordPress Minify работает аналогично, перехватывая на странице JS/CSS файлы, минимизирует их, а затем подключает объединенные скрипты и стили в заголовке WordPress. Основные особенности:

    • простая интеграция библиотеки Minify на блог;
    • минимизация JavaScript, CSS и HTML;
    • встроенные средства отладки для поиска неисправностей;
    • возможность подключения дополнительных JS и CSS файлов, требующих сжатия;
    • возможность исключения определенных JS и CSS файлов, не требующих сжатия;
    • оптимизированные файлы могут быть размещены там, где вы хотите;
    • поддержка сжатия внешних файлов с помощью кэширования;
    • заголовки Expire для JS и CSS файлов;
    • обнаружение и устранение повторяющихся файлов.

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

    Неважно какой Вы выберите метод, будь то прямое подключение библиотеки Minify на сайт или установка плагина BWP-Minify — в любом случае подобная оптимизация положительно скажется на быстродействии сайта, ускорении загрузки страниц. Желаю успехов, до скорой встречи на Блоге Свободного Вебмастера!

    Оптимизация 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-кодом, в котором присутствуют ошибки.

    Автоматическая минимизация CSS и JavaScript файлов

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

    Каким способом это можно сделать?

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

    Для минимизации CSS и JavaScript файлов существует огромное множество инструментов. Но одним из наилучших на мой взгляд, является YUI Compressor от компании Yahoo.

    YUI Compressor позволяет сократить размер CSS и JavaScript файлов на 40-60%. YUI Compressor написан на языке Java и для своего запуска требует виртуальную машину Java (версии >= 1.4).

    При работе с Visual Studio будет немного неудобно использование данного инструмента, поэтому был создан порт данного минимайзера для платформы .NET – YUI Compressor for .NET.

    Основные возможности YUI Compressor for .NET:

    • YUI Css сжатие.
    • YUI JavaScript сжатие.
    • Интеграция с Visual Studio post-build событиями. По этому адресу можно найти более подробную инструкцию.
    • MSBuild таски, могут быть использованы в решении Web Deployment Project.
    • MSBuild таски, также могут собирать все сжатые файлы в один (aka. файла объединения).
    • Возможность обработки, различных типов кодировки (например Unicode) и ThreadCulture.
    • Может обрабатывать групповые задачи (например *. JS).

    Для быстрого подключения YUI Compressor к проекту добстаточно добавить в проект файл MSBuild.xml и прописать путь к нему в post-build event.

    Пример простейшей задачи минимизации файлов в MSBuild файле:

    Илон Маск рекомендует:  Что такое код xmlrpc_parse_method_descriptions
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL