Сжатие css-файлов — хитрые советы

Сжатие CSS для уменьшения времени загрузки

Сжатие css-файлов - хитрые советы

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

Возможности оптимизации CSS

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

В этой статье мы приведем несколько приемов, которые можно использовать для сжатия CSS и JS.

  1. Избегайте чрезмерного использования встроенных стилей CSS (размещенных в HTML), если это не относится к началу страницы. То же самое касается тегов стилей (отдельных CSS-свойств, отклоняющихся от установленных стандартов);
  2. Объединяйте нескольких файлов CSS в PHP-скрипте. Таким образом, клиент должен вызвать только файл PHP вместо отправки HTTP-запроса для каждого файла стилей;
  3. Сжатие CSS подразумевает использование сокращенных форм свойств, если это возможно:

body { margin: 20px 10px 5px 10px }

вместо полной формы:

body { margin-top: 20px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px }

  1. Избегайте ненужного использования кода. Если определенные теги размещаются только в одном теге (например, в списке), то элемент не должен упоминаться дважды;
  2. Используйте для установки цвета значения HEX, а не RGB;
  3. Универсальный селектор «*» следует использовать только в исключительных случаях. Установки стиля, заданные через универсальный селектор, применяются ко всем элементам, поэтому браузеру нужно сначала обеспечить выполнение соответствующих указаний для всех элементов;
  4. Минимизируйте файлы CSS, удаляя ненужные пробелы, пустые строки и комментарии. Пробелы не нужны, например, после двоеточия или точки с запятой. Окончательная точка с запятой после последнего символа списка также может быть опущена;
  5. Так как минимизация CSS является сложным процессом, обязательно нужно создавать резервную копию файла. Так вы сможете исправить ошибки.

Сжатие CSS: онлайн и оффлайн инструменты

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

К таким приложениям относятся:

CSS Minifier

Скопируйте код CSS в поле «Input CSS» и нажмите на кнопку «Minify«, чтобы начать процесс. В поле «Minified Output» вы увидите результат, который можно скопировать вручную или скачать. CSS Minifier сокращает код, удаляя разрывы строк и пробелы, последнюю в списке точку с запятой. Инструмент может легко преобразовывать код RGB в сжатый вариант HEX.

CSS Compressor

Этот сервис для сжатия CSS онлайн немного отличается от предыдущего, поскольку поддерживает больше возможностей для сжатия кода. Вставьте CSS-код в поле «CSS Source Code Input«. Затем выберите степень сжатия.

В разделе «Show advanced options» можно установить флажок для параметров минимизации. Например, сжатие цветов цвета, удаление последнюю точку с запятой и т.д. Нажмите «Compress«, чтобы начать процесс сжатия CSS.

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

Free CSS Toolbox

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

На вкладке меню «CSS Formatting Options» выберите параметры CSS, которые нужно оптимизировать и запустите сжатие, нажав «Re-format now«.

Free CSS Toolbox без проблем удаляет пробелы и конечные точки с запятой, минимизирует коды цветов. Эта программа работает во всех операционных системах, начиная с Windows от XP и выше.

Уменьшение времени загрузки благодаря оптимизации CSS

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

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

Эту задачу нужно выполнять самостоятельно.

Перевод статьи «CSS compression for consistent loading times» был подготовлен дружной командой проекта Сайтостроение от А до Я.

Источник: http://www.internet-technologies.ru/articles/szhatie-css-dlya-umensheniya-vremeni-zagruzki.html

Как получить быстрый сайт — оптимизация (сжатие) изображений и скриптов, а так же уменьшение числа Http запросов

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

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

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

Но давайте для начала я напомню то, о чем мы говорили в первых статьях по созданию быстрого сайта:

Чистим фоновую графику для снижения числа http запросов

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

Вообще, изображения на сайте могут выводиться двумя способами: с помощью Html тега IMG (тут и тут читайте подробнее), а так же с помощью CSS свойств «background» или «background-image», которое может выглядеть, например, так:

background:url(https://ktonanovenkogo.ru/wp-content/themes/Organic/images/spriteme3.png) no-repeat;

При загрузке страниц происходит и подгрузка картинок, заданных как через IMG, так и фоновых изображений, описанных свойствами «background» в CSS файле. Посмотреть все подгружаемые в браузер пользователя графические файлы можно в нашем средстве для получения быстрого сайта — Page Speed на вкладке «Resources»:

В колонке «Type» для графики, вставленной через IMG, будет прописано «image», а для фоновых картинок, вставленных через CSS — «cssimage». Поэтому при помощи Page Speed вам будет достаточно просто их различить, к тому же, подведя курсор мыши к строчке с интересующим вас изображением, вы увидите его превьюшку:

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

Во-первых, объектов было слишком много (около 70), что совсем не здорово, ибо для передачи каждого из них формируется отдельный http запрос.

70 http запросов тратилось только на загрузку графики — это недопустимо много, т.к. сильно снижает быстроту сайта.

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

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

При первоначальной настройке темы под свои нужды, я не очень корректно убрал эти изображения из оформления, забыв удалить соответствующие им CSS свойства («background») из файла стилевого оформления темы (style.css), который обычно расположен по следующему пути:

/wp-content/themes/Organic/style.css

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

К слову сказать, таким образом мне удалось сэкономить до 20 http запросов при загрузке любой страницы моего блога, удалив, соответственно, из style.

css около 20 записей о подгрузке фоновых изображений (ненужных или малозначительных).

Читайте также:  «метод утёнка» для решения сложных задач - хитрые советы

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

Далее вы производите поиск по нему с помощью средств того редактора, в котором вы его открыли. Искать следует по названию того графического файла, который вы желаете удалить. Находите строчку со свойством «background», из-за которой подгружается это фоновое изображение и удаляете ее. Проверяете через Page Speed корректность проведенных вами действий.

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

Сжатие и оптимизация изображений на быстром сайте

Самый простой вариант сжать все изображения на своем сайте — подключить сервис OptiPic.io.

Почему это так?

  1. Подключается к сайту буквально за 2 минуты.
  2. Полный автопилот — OptiPic найдет и оптимизирует все изображения на сайте в автоматическом режиме.
  3. Сервис периодически будет мониторить добавление на сайт новых изображений. Они автоматом будут добавляться в очередь на сжатие.
  4. Это безопасно — перед сжатием изображений автоматически создаются копии каждого .
  5. Есть возможность автоматически уменьшить ширины или высоту изображений (resize).
  6. Поддержка любых php-сайтов (любые CMS, фреймворки или даже самописные движки).

Плюс у OptiPic есть партнерская программа, по которой можно получать до 40% от привлеченных клиентов.

А вообще, можно сделать две вещи — оптимизировать размер каждого отдельного изображения через Page Speed, а так же объединить некоторые фоновые картинки из файла стилевого оформления в так называемые CSS спрайты.

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

Мне очень нравится онлайн сервис PunyPNG, который просто великолепно сжимает графику формата PNG (я уже писал тут, когда лучше использовать формат PNG, когда JPG, а когда и GIF):

Очень неплох был и Яховский Smush.it:

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

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

Источник: https://KtoNaNovenkogo.ru/vokrug-da-okolo/programs/skorost-zagruzki-sajta-optimizaciya-szhatie-izobrazhenij-skriptov-page-speed-html-zaprosov-css-sprajty.html

Статическое Gzip сжатие – снижаем нагрузку на сервер

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

А что это? Для любого нового юзера, который открывает странички Вашего детища, будет вторично проводиться Gzip сжатие файлов Js, Css, Html. Это занимает некоторое время, уменьшая этим быстродействие загрузки веб-ресурса.

Также использование этого сжатия расходует лишние ресурсы процессоров сервера хостинга.

Более правильным вариантом является статическое Gzip сжимание файлов Js, Css, Html, осуществляющееся предварительно, а юзеры получают уже готовые архивы, без снижения скорости загрузки сайта и без лишней нагрузки на процессор сервера.

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

Было бы значительно проще заблаговременно реализовать Gzip сжатие всех файлов Js и Css, а web серверу задать требуемую последовательность действий. Учитывая различное восприятие конкретными web-обозревателями файлов с окончанием .

Gzip можно использовать весьма хитрый метод изменения названия архивов Gzip в файлы стилей с дополнением CSS и script’ов с расширением .js. В .Htaccess нужно добавить строчки, которые объяснять серверу, как данные файлы подавать разным браузерам. Вообще-то, подобная весьма запутанная схема является довольно эффективной.

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

Итак, надо скачать на ПК все внешние Js и Css, которые участвуют в загрузке страничек веб-ресурса и сделать копии с расширением .Gzip. Для этого можно использовать практически любой архиватор.

Возьмем для образца эталонный файл стилей блога Css файл style. По окончании его архивации в Gzip будет файл style.Css.Gz. Однако большинство браузеров не хотят работать со стилевым файлом, который имеет расширение Gz, то нужно у архива удалить окончание gz. В итоге получится Css файл style, однако он будет являться уже архивом Gzip.

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

Только назвать его нужно по-другому.

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

Источник: http://seoblognik.ru/sozdanie-saieta/staticheskoe-gzip-sjatie-snijaem-nagruzku-na-server.html

Как сжать файл css

Здравствуйте, друзья! Сегодня продолжим рассмотрение темы по ускорению загрузки сайта в Интернете. Данная тематика является актуальной и на сегодняшний день. На скорость загрузки сайта влияют различные факторы, одним из которых является большой размер файла style.css.

Сервис webwait.ru

Как сжать файл css. О необходимости  этого можно узнать, посетив сервис webwait.ru. После его открытия, вводим свой домен и нажимаем — начать. Если сервис рекомендует для увеличения скорости загрузки сайта, уменьшить  style.css, то приступает к ее реализации.

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

Сервис по уменьшению размера файла styleneat.com

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

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

Далее необходимо его сохранить под тем же именем, что и основной шаблон таблицы стилей —  style.css. Для этого, файл который размещен на рабочем столе компьютера открываем при помощи программы Notepad++. После этого, удаляем его содержимое и вставляем  элементы, предложенные программой  styleneat.com.

Сохраняем измененный style.css на рабочем столе компьютера. Затем закачиваем его  программой Filezilla на блог.

Программа Free CSS Toolbox

Нужный файл уменьшен. Также, если при помощи сервиса  styleneat.com не удалось это сделать, или файл отображается на сайте не корректно, то можно также воспользоваться программой Free CSS Toolbox.

Данная программа совершенна бесплатная, скачиваем ее на компьютер. После открытия программы, копируем и вставляем содержание файла style в открывшееся окошко. Далее в интерфейсе программы открываем вкладку Tools и нажимаем на Compress CSS.  Через непродолжительное время  отображается содержание нового уменьшенного файла.

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

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

С уважением, Михаил Сойкин.

Спасибо, что поделились статьей в социальных сетях!

Запись опубликована в рубрике Полезные программы. Добавьте в закладки постоянную ссылку.

Источник: http://rtgh.ru/kak-szhat-fayl-css/

Способ сжатия CSS-файла

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

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

Суть процесса сжатия

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

Читайте также:  Дерек сиверс (cd baby) о локальной и глобальной фокусировке внимания - хитрые советы

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

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

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

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

CSS компрессор

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

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

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

В настройки входят параметры сжатия с тремя значениями:

  • Light – в ходе обработки сервис реагирует только на пробелы, точки с запятой и табуляцию. Переносы строк в этом режиме игнорируются.
  • Normal – удаляются лишние переходы на новую строку таким образом, чтобы каждое правило начиналось с новой строки. Также сжатию подвергается кодировка цветов.
  • Super compact – сносит абсолютно все пробелы и переходы на новые строки.

Следующий момент, который можно контролировать с помощью настроек – комментарии:

  • Don't strip any comments – кто знает английский – догадался, комментарии пропускаются и не удаляются.
  • Strip ALL comments – удаление полностью всех комментариев.
  • Strip comments at least X chars long – устанавливается лимит комментария по количеству символов, остальное – удаляется.

В результате обработки кода в компрессоре можно сокращать объем CSS файла на целых 25%.

Существует противоположный по действию сервис — CSS Uncompressor, который разжимает сокращенные файлы. При использовании этого сервиса стоит знать о том, что он сносит корректную форму записи data:url.

Источник: https://vaden-pro.ru/blog/css/szhatie-css

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

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

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

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

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

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

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

  • Удалить неиспользуемые селекторы.
  • Удалить неиспользуемые закомментированные строки.
  • Сократить объем комментариев в файле стилей. Всегда удобно, когда элементы сгруппированы по общему признаку и имеют невидимые для глаз обычных пользователей комментарии. Но зачастую, чтобы добиться высокой степени сжимаемости CSS, приходиться от них избавляться. Чтобы при дальнейшей работе проще ориентироваться в коде, Вы можете по-прежнему их использовать, но оставляйте краткие описания. Например, вместо
    1 /* Здесь начинается описание стилей подвала */

    /* Здесь начинается описание стилей подвала */использовать лаконичное и всем понятное/* Footer */

  • Удалить пустые строки и пробелы. Но слишком не стоит увлекаться, код должен оставаться читаемым, чтобы без труда вносить правки.
  • Объединить элементы с одинаковыми свойствами.
  • Оптимизировать шрифты. Лучше использовать один шрифт. В каждом отдельно взятом блоке страницы использовать разный шрифт — дурной тон web-дизайна и, как видите, перегружает файл стилей.
  • Оптимизировать цвета. Это сделать достаточно просто, но сложно объяснить на словах, поэтому приведу наглядные примеры:
    1
    2
    #ffffff заменить на #fff
    #112233 заменить на #123

    #ffffff заменить на #fff #112233 заменить на #123

  • Оптимизировать отступы. Опять же на примерах:
    1
    2
    3
    padding:10px 20px 10px 20px; заменить на padding:10px 20px;
    padding:10px 0px 0px 0px; заменить на padding:10px 0 0;
    padding:10px 10px 10px 10px; заменить на padding:10px;

    padding:10px 20px 10px 20px; заменить на padding:10px 20px; padding:10px 0px 0px 0px; заменить на padding:10px 0 0; padding:10px 10px 10px 10px; заменить на padding:10px;

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

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

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

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

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

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

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

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

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

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

Источник: https://webliberty.ru/optimizatsiya-css/

Как ускорить работу сайта или блога? Трюки по ускорению!

Теперь что Вы делаете, открываете сайт в браузере http://название_вашего_сайта.ru  и открываете исходный код странице. Как это сделать? Если Вы пользуетесь Google Chrome — нажимаете комбинацию клавиш ( Сtrl + U ) или Правая кнопка мыши — Исходный код страницы.

В других браузерах аналогично работает способ с мышкой. Пробуйте! Этими действия Вы увидите сформированные, готовые запросы.

Вот код исходной страницы

1
2
3
4
5
6
7

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

Если в чем-то сомневаетесь, то лучше оставьте как было. Все что остается это перезаписать наш файл с header.php и проверить работоспособность ускорения блога.

Принцип есть и остается — уменьшение размера обрабатываемых и загружаемых файлов. Теперь займемся файлами нашего шаблона. Что будем делать? Убирать лишние пробелы, отступы в файле шаблонов, тем самым уменьшать их размер. Возьмем небольшой кусок кода, я взял произвольно из файла page.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 

   

<\p>

Видите сколько мы имеем лишнего и ненужного в этом коде, а это комментарии, которые отмечены /** комментарии  */ , и лишние пробелы между кодом, теперь вручную убираем лишние комментарии и отступы, что у Вас должно получится

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<\p>

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

Я представлю список, который Вам пригодится.

Hyper Cache — плагин для кеширования вашего блога / сайта

DB Cache Reloaded — этот плагин уменьшат количество запросов к базе данных.

Optimeze DB — оптимизирует вашу базу данных

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

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

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

С уважением, Александр Лукьянов

Источник: http://vpluce.ru/optimizaciya/uskorenie-bloga.html

AlterVision Антон Резниченко

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

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

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

Сжатие файлов

Если на сайте есть всего два-три файла стилей и скриптов, то сжать их можно вручную. В случае с WordPress так, увы, поступить нельзя, потому что js и css там — «туева хуча».

Для сжатия файлов напишем очень простенький скрипт на php. Я запускаю его из-под root-а у себя на сервере, но вполне можно запускать его и у себя на домашней машине (под Windows), на Windows-сервере, без проблем с правами доступа, или на сервере с suPHP.

Этот простенький файлик мгновенно сожмёт все требуемые файлы, где бы они ни были.

Настройка .htaccess

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

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

AddEncoding gzip .gz RewriteCond %{HTTP:Accept-encoding} gzip RewriteCond %{HTTP_USER_AGENT} !Safari RewriteCond %{REQUEST_FILENAME} .css$ [OR] RewriteCond %{REQUEST_FILENAME} .js$ RewriteCond %{REQUEST_FILENAME}.gz -f RewriteRule ^(.*).(css|js)?$ $1.$2.gz [QSA,L]

Чтобы файлы не воспринимались «криво», добавим блок, который отправил клиенту верные заголовки. Проверьте, mod_headers должен быть включен в Apache, в противном случае ничего не будет работать.

Header append Vary User-Agent ForceType text/javascript Header set Content-Encoding: gzip Header set Cache-control: private ForceType text/css Header set Content-Encoding: gzip Header set Cache-control: private

После этого можем сохранять файл .htaccess и наслаждаться результатом.

Файлы

Для самых ленивых, я выкладываю архив с готовыми файлами gzipper.php и .htaccess для WordPress.

  • Скачать gzipper.php и .htaccess для ускорения работы сайта.

При небольшой переработке, они подойдут для любой CMS.

Тестирование

Для проверки, откроем FireFox с установленным расширением TamperData и проверим, какого именно типа файлы скачивает наш браузер при обращении к странице.

В данный момент такой способ «раздачи слонов» действует на моём сайте http://www.fld.mrsu.ru и весьма успешно, надо сказать, работает там вместе с WordPress MU и BuddyPress. Не хуже система работает на http://www.av13.ru — как видите, сайт грузится достаточно быстро! 😉

Источник: http://www.av13.ru/creative/speeding-up-site-with-css-js-compression/

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

  • Расширение .css
  • MIME-тип text/css
  • РазработчикКонсорциум Всемирной паутины
  • Опубликован17 декабря 1996
  • Тип форматаЯзык стилей
  • Сайт w3.org/Style/CSS

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

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

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

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

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

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

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

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

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

Codebeautifier.com — CSS Compressor на основе CSSTidy

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник: http://www.shram.kiev.ua/site/css-compression-tools.shtml

Ссылка на основную публикацию