15 Сервисов сжатия CSS файлов


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

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. До скорой встречи!

    Сжатие CSS

    Нужно ли вообще сжимать CSS код?

    Прежде всего, давайте определимся, зачем нам сжимать css код? Если наши css файлы имеют небольшой размер, то и понтоваться нечем то, но если вы разрабатываете солидный проект, то это совсем другой разговор. Итак, вы здесь чтобы узнать, как организовать сжатие CSS. Ближе к делу… CSS сжатие можно реализовать несколькими способами. Ниже список всех известных мне способов сжатия CSS.

    Способы сжатия CSS

    Примечания: статическое сжатие, сжимает до — 80%-90%

    Примечания: динамическое сжатие, сжимает до -75%-95% (зависит от вас)

    Примечания: статическое сжатие, сжимает до — 50%

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

    Сжатие CSS с помощью онлайн компрессоров

    Анализируя работу cssкомпрессоров, можно сделать следующие выводы о степени сжатия css. Эксперимент проводился на основании двух css файлов со следующими параметрами:

    первый – 7 372 байт

    второй – 62 609 байт

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

    Онлайн компрессор CleanCSS

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

    первый – сжат до 7 075 байт (96 %)

    второй – сжат до 52 797 байт (84,3 %)

    Онлайн компрессор FormatCSS

    Этот сервис предназначен более для форматирования css файлов, нежели для их сжатия. Текст css вводится с помощью скопировать/вставить.

    первый – сжат до 8 105 байт (109,9 %)

    второй – сжат до 61 715 байт (98,5 %)

    Онлайн компрессор Robson CSS Compressor

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

    первый – сжат до 6 326 байт (86,3 %)

    второй – сжат до 48 985 байт (78,2 %)

    Онлайн css html компрессор Tabifier

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

    первый – сжат до 7 876 байт (106,8 %)

    второй – сжат до 60 706 байт (96,9 %)

    Сжатие CSS средствами PHP

    Сжатие css с помощью PHP доступно несколькими способами, но я приведу только один, самый интересный для моего понимания. Преимущество css сжатия на php это динамичность и гибкость в плане настроек сжатия, так как вы их сами задаете, с помощью своего php сценария. Мой сценарий выглядит так:

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

    Сжатие CSS алгоритмом Base 62

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

    1. Сжатие css с помощью компрессора

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

    2. Создание js файла

    Необходимо создать js файл и поместить в него следующий код:

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

    3. Сжатие алгоритмом Base 62

    Как видите, теперь вы имеете js файл, который вы сжимаете с помощью сервиса Packer — http://dean.edwards.name/packer/

    Вставьте код вашего js файла в верхнее поле и выберите галочку Base62 encode , после чего получите результат в нижнем поле.

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

    P.S.


    Я выложил все свои знания по поводу сжатия css. Если имеете какие-то соображения по поводу более эффективных способов сжатия css, пожалуйста, отпишитесь в комментариях. Спасибо за ваше внимание!

    Gzip сжатие ресурсов CSS, JS, HTML — как его включить в файле htaccess для увеличения скорости загрузки сайта

    Здравствуйте, уважаемые читатели блога Goldbusinessnet.com. В качестве очередного шага, способного существенно ускорить ваш сайт, мы разберем процесс gzip сжатия наиболее часто используемых ресурсов, которые необходимы для корректного отображения страниц сайта, а именно, файлов стилей (CSS), скриптов (JS) и HTML.

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

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

    Советы Page Speed в отношении gzip сжатия

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

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

    Когда-то ранее в ходе оптимизации одного из своих проектов я применял для тестирования тот же инструмент PageSpeed, но тогда он предлагался в том числе в составе дополнений для Google Chrome и Mozilla, причем для инсталляции последнего надо было предварительно установить незабвенное расширения Файрбуг (здесь читайте об установке и работе с ним).

    К слову, сейчас плагины Пейдж Спид тоже доступны, но несколько другой разновидности, к тому же скачивать их нужно уже не со специальной гугловской страницы, как было ранее, а с магазина Google и с официального сайта Firefox (в зависимости от браузера, который вы используете).

    Итак, на очередном шаге оптимизации одного из своих ресурсов при проверке Page Speed проинформировал, что именно выполнение gzip сжатия скриптов, файлов стилей и документов HTML является на данный момент приоритетным (рекомендация находилась в красной зоне):

    Топ-пост этого месяца:  ТИЦ Яндекс что такое ТИЦ, как посмотреть ТИЦ Яндекс, 23 сервиса

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

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

    Осуществление gzip сжатия оказалось возможным благодаря активации модуля mod deflate, который можно включить через директивы в конфигурационном файле .htaccess, регулирующем все процессы в отношении сайтов на серверах Apache. Подробнее обо всем этом опять же читайте далее по тексту, а сейчас мне хотелось бы отметить, что такой метод будет исправно работать только в том случае, если на хостинге, где «живет» вам веб-сайт, установлен Апач в чистом виде.

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

    Сделать это самостоятельно большинство владельцев вебсайтов, расположенных на разделенном виртуальном хостинге, просто не в состоянии чисто по техническим причинам. Кстати, у моего нынешнего провайдера Sprinthost (тут читайте о покупке места для сайта) gzip включен через Nginx, поэтому страница Goldbusinessnet.com успешно прошла тест на сжатие в Пейдж Спид:

    Прежде, чем продолжить, хочу дать совет начинающим вебмастерам. Ежели компрессия на вашем сервере не работает (узнать об этом вы сможете по результатам тестирования в Page Speed) и не запустилась после соответствующих действий, направленных на его активацию, обязательно обратитесь в службу поддержки своего хостинга. Адекватный провайдер обязательно поможет, в конце концов, решение проблем клиентов в его интересах.

    Как проверить сжатие сайта онлайн, в том числе наличие HTTP заголовка Content-Encoding

    Как я уже сказал, Google PageSpeed подскажет вам, работает ли сжатие на страницах вашего ресурса. Однако, не лишним будет осуществить проверку другими средствами, например, при помощи онлайн сервисов. Доверие вызывает вот этот, где вводите URL страницы, нажимаете кнопку «Test» и через несколько секунд получаете ответ:

    В данном случае видно, что составляющие тестируемой страницы подвергнуты компрессии (is compressed), а значит, сжатие на сервере для документов HTML включено.

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

    Ну и мой объединенный скрипт (JS) также оказался подвергнутым компрессии:

    Есть еще один хороший ресурс GTmetrix (введите урл исследуемой странички и жмите кнопочку «Analyze»), который выдает аналитическую информацию по всем аспектам скорости загрузки веб-страницы сайта. После теста перейдите во вкладку «Waterfall»:

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

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

    Но это не все. Нажатием на плюсик, расположенный рядом со строчкой, соответствующей тому или иному объекту, вы раскрываете информацию об ответе сервера, наличие в которой HTTP-заголовка Content-Encoding со значением gzip означает, что компрессия включена.

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

    Как включить gzip сжатие JS, CSS и HTML в htaccess

    Собственно, идея сжатия в формате gzip и механизм ее реализации предельно просты для общего понимания. Файлы, необходимые для корректного отображения web-страницы (стили CSS, различного рода скрипты, документы HTML) архивируются и передаются в браузер пользователя в сжатом виде. Это значительно сокращает время загрузки странички. Если брать в общем, то существуют различные виды компрессии, но в данном случае gzip наиболее эффективен.

    Большинство современных веб-обозревателей (уж самые популярные точно) поддерживают gzip сжатие, поэтому с этой стороны никаких проблем нет, о чем я сказал чуть выше. Далее мы с вами разберем два различных метода осуществления компрессии: динамический и статический.

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

    Динамическое gzip сжатие для максимального ускорения сайта

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

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

    Динамическую компрессию будем включать посредством все того же волшебного файла .htaccess, отвечающего за конфигурацию сервера под управлением Апач (как я отметил выше, при наличии связки Apache + Nginx номер не пройдет, и за помощью вам придется обратиться к хостеру).

    Для начала соединитесь веб-сервером посредством FTP, используя при этом какой-нибудь надежный менеджер вроде FileZilla (здесь все об этой программе). Файл .htaccess должен находиться в корневой директории (public_html или htdocs) вашего сайта:

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

    Поскольку конфигурационный файл понадобится для указания в нем специальных директив, то для редактирования удобнее использовать другой полезный софт NotePad++ (в этом материале все подробности об установке и применении этого редактора). В нем и создайте новый файлик прямо на сервере, обозвав его «.htaccess» (именно так, с точкой впереди):

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

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

    Итак, компрессия в отношении нужных файлов активируется на серверах Apache, при помощи модуля mod deflate, директивы которого, как мы уже выяснили, необходимо вписать в .htaccess:

    Присутствие «IfModule» в директиве (аналогично использованию mod expires и mod headers при настройке кеширования в браузерах пользователей) дает возможность проверить наличие модуля и включить его, если он не активирован. Это позволит избежать ненужных проблем, связанных с нарушением работоспособности ресурса. Ведь если модуль не установлен, то просто не последует никаких изменений, а вот веб-сайт будет функционировать в прежнем режиме.

    Также следует обратить внимание на то, что в состав директив включен модуль mod setenvif, дающий команду отдавать несжатые версии файлов старым модификациям некоторых браузеров, не поддерживающих gzip. Хотя такими вэб-обозревателями пользуется мизерное количество юзеров, думаю, оставить «mod setenvif» вполне разумно, хуже точно не будет.

    Ежели выше предложенный код не сработает, вполне возможно, что mod deflate изначально не установлен на сервере. В таком случае попытайтесь включить mod gzip (практика показывает, что либо тот, либо другой модуль обязательно присутствует у большинства хостеров на серверах Apache) посредством ниже следующей директивы:

    Если и это не дало результата, попробуйте использовать универсальный вариант:

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

    Далее несколько слов для тех, кто применяет расширение Hyper Cache для Вордпресса (тут об этом важнейшем плагине кеширования мануал). Дело в том, что в настройках Гипер Кеша присутствует опция сжатия:

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

    Как включить статическое сжатие gzip для сокращения нагрузки

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

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

    Правда, если вы заметили, я ничего не сказал об основном документе HTML. Ведь большинство владельцев использует для управления своими сайтами ту или иную CMS, например, WordPress (файловое устройство и редактирование шаблонов WP).

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

    Итак, чтобы осуществить статическое gzip сжатие файлов JS и CSS, предварительно нужно скачать их на компьютер (опять же Файлзилла вам в помощь). Для их архивирования можно воспользоваться бесплатной программой архиватором 7-zip. Скачайте ее и установите обычным образом, трудностей с инсталляцией быть не должно. Кстати, возможно, кто-то предложит альтернативные архиваторы в комментариях? Буду только рад, это и другим читателям полезно.

    После установки открываете программу и правой кнопкой мыши кликаете по предварительно загруженному и предназначенному для сжатия файлу, затем из контекстного меню выбираете «7-zip» — «Добавить к архиву»:

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

    После нажатия кнопки «ОК» произойдет упаковка (в данном случае CSS) и мы получим 2 файла: один оригинальный несжатый, другой в формате gzip архива с расширением gz.

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

    Далее. Старые версии браузеров не поддерживают gzip сжатие, однако некоторые пользователи еще используют их. Поэтому к оригинальному несжатому файлу дописываем nogzip и получаем: style.nogzip.css, его мы отдадим браузерам, которые не поддерживают сжатие. В сумме всех действий получаем два файла стилей CSS в корневой папке:

    Итак, файл style.css (сжатый) будет отдаваться браузерам, которые поддерживают gzip сжатие, а style.nogzip.css (несжатый оригинальный) — старым версиям браузеров, не поддерживающим архивирование. Теперь подобную операцию необходимо проделать для всех JS или CSS файлов, которые подгружаются вместе с web-страницами сайта. Для того, чтобы статическое gzip сжатие заработало, необходимо вставить следующий код в упомянутый уже неоднократно файл .htaccess:

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

    В завершение предлагаю посмотреть 6-серийный комплекс видеоуроков (куда включено и gzip сжатие), посвященный наиболее важным аспектам ускорения сайта WordPress и практической реализации рекомендаций PageSpeed:

    Оптимизация и сжатие CSS в Page Speed — как отключить внешние файлы стилей и объединить их в один для ускорения загрузки

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

    Дело в том, что гораздо проще писать, что называется, по горячим следам, а не вспоминать потом: «а как я смог это сделать?», что бывает довольно затруднительно, особенно по прошествии некоторого времени.

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

    Оптимизация и сжатие CSS в Page Speed

    В прошлой статье мы подробно рассмотрели, как установить плагин Page Speed и как настроить оптимальным образом кэширование статических объектов (изображений, скриптов, стилей) в браузерах пользователей.

    После произведенных нами настроек Web сервера, этот плагин уже перестал ругаться на сильное снижение скорости из-за «Leverage browser caching»:

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

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

    Если щелкнуть по плюсику рядом с «Minify CSS», то откроется список объектов, которые желательно было бы подвергнуть оптимизации (сжать):

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

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

    Например, мой неоптимизированный style.css, идущий в комплекте с темой WordPress, состоял из почти 2000 строк, а после того как произошла оптимизация, удалось уменьшить количество строк в нем до 400, а сам файлик похудел на одну пятую своего изначального веса. Да и внешний вид прописанных в нем свойств после этого мне нравится гораздо больше.

    Судите сами, так выглядел он до того, как мне удалось его сжать в Page Speed:

    А так выглядит после его оптимизации:

    Итак, для этого вам нужно будет всего-навсего скачать по ссылке «Save as» сжатую версию. Скачали?

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

    Топ-пост этого месяца:  PHP 7. Часть 2. Оператор spaceship

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

    Как объединить внешние CSS в один общий файл

    Но самым оптимальным вариантом было бы объединить все внешние CSS в один, а уже потом его сжать средствами Page Speed. Это будет идеальный вариант, позволяющий выгадать еще несколько миллисекунд в скорости загрузки. Собственно, и сам плагин подсказывает именно такой вариант в поле «Combine external CSS»:

    Здесь он нам предлагает объединить все найденные им внешние файлы (внешние скрипты тоже можно будет объединить в один — «Combine external JavaScript»), подгружаемые в браузер посетителей, в один общий, но при этом нужно будет обязательно отключить все лишние файлы стилей. Проблема возникает в том, что многие из них создают и подключают плагины или другие расширения вашего движка.

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

    Если functions.php вы не найдете, то можете его просто создать, например, в редакторе Notepad++ и загрузить в папку с темой оформления WordPress. Но, наверняка, он все же найдется. В него вам нужно будет добавить небольшой кусочек PHP кода, такого вида:

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

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

    Вроде бы все просто — отключили и все, можно про это забыть. Так, да не так. Предварительно ведь еще нужно найти в коде каждого WP плагина (в котором отключаем подгрузку стилей) тот регистр, который отвечает за их подключение.

    Если вы внимательнее посмотрите на приведенный выше код, то заметите строки, где перечислены эти самые регистры:

    Т.е., например, для замечательного WordPress плагина постраничной навигации WP-PageNavi регистр будет называться «wp-pagenavi», а для плагина Comment Form Quicktags — «cfq». Если вы используете те же самые расширения, что и я, то можете не лазить в их PHP код, а позаимствовать регистры из приведенного кода.

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

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

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

    Наверное, вы представляете о чем идет речь. Такое CSS свойство может, например, иметь такой вид:

    Запись url(flags.png) означает, что картинку под названием flags.png нужно будет искать в той же самой папке, где находится сам файл таблиц каскадных стилей. Но дело в том, что когда вы скопируете содержимое всех стилей плагинов, то в них наверняка будут использоваться такие вот относительные пути до изображений.

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

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


    Кстати, после того, как у вас весь стилевой код будет находиться в одном общем файлике, не забудьте его еще раз сжать через Page Speed, найдя в его окне строку под названием Minify CSS и щелкнув по плюсику рядом с этой надписью, а затем скопировав оптимизированный файлик «Save as». Далее замените им оригинальный файл в папке с используемой вами темой оформления WordPress.

    Отключение внешних CSS для ускорения сайта на примере

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

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

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

    скопировать содержимое двух CSS файликов, которые мы планируем отключить: shCore.css и shThemeDefault.css , т.к. именно на них нам показывает пальцем Page Speed (ну, и в настройках у меня выбрана дефолтная тема, для которой, вполне логично, нужен CSS с соответствующим названием).

    После этого открываете на редактирование:

    Затем осуществляете поиск с помощью возможностей Notepad++, о всех достоинствах которого тут читайте. Искать нужно что-нибудь содержащее «CSS». В syntaxhighlighter.php это будет участок кода:

    Смотрим, какие именно регистры позволят нам отключить подгрузку стилей shCore.css и shThemeDefault.css . Копируем их названия (в моем случае это будут: syntaxhighlighter-theme-default и syntaxhighlighter-core ) и добавляем в functions.php (из папки с вашей темой оформления) две дополнительные строчки в описанный чуть выше кусочек кода:

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

    Правильная настройка Autoptimize, сократить HTML, JS, CSS.

    С помощью Autoptimize можно сократить HTML, CSS, JS код. Удалить блокирующий код из хэдера страницы в Page Speed Insights. И что не менее важно, ускорить загрузку сайта.

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

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

    Прежде чем перейти к настройке Autoptimize, нам необходимо понять к чему стремиться, а именно:

    • Увеличение рейтинга в Page Speed Insights(PSI) и увеличение полной скорости загрузки сайта.
    • Ускорение отображения (отрисовки) видимой части сайта для посетителей.

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

    Скорость загрузки сайта

    Скорость загрузки сайта, можно поделить на два основных вида, это:

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

    Например, используя сервис webpagetest.org это может выглядеть так:

    Слева на скриншоте файлы/запросы, которые необходимо подгрузить серверу для загрузки страницы, большинство из них могли бы быть, как раз те самые JS и CSS файлы. На картинке их мало, потому что Autoptimize у меня уже активирован и все файлы объединены. Так же у меня активирован плагин Wp Super Cache, который прекрасно работает вместе с Autoptimize. И именно эти плагины помогли достичь такого количества запросов, без них было 94, сейчас 39.

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

    Когда Autoptimize объединяет все файлы в один большой, он начинает «весить» значительно больше, нежели 10-15 маленьких по отдельности. В итоге мы получаем один большой долго загружаемый файл, но за счет объединения и сокращения кода, он загрузиться быстрее. Именно для этого я провел тестирование плагина Autoptimize в отдельной статье, дабы определить насколько велика эта разница.

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

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

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

    Таким образом, мы получим ускоренную «полную загрузку» сайта. В данном случае Page Speed Insights(PSI) должен нас похвалить увеличением рейтинга. Но мы можем и немного уменьшить скорость «отрисовки» для посетителей нашего сайта, что не есть хорошо.

    Обычно это 0.1 — 1 сек. Все зависит от размеров и количества CSS файлов. Я бы хотел акцентировать на этом ваше внимание: если файлов очень много, время отрисовки может значительно вырасти. Однако, есть усредненные способы решения этой проблемы, которые мы обязательно рассмотрим дальше.

    Настройка плагина Autoptimize

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

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

    В дальнейшем в статье название сервиса Page Speed Insights будет использоваться довольно часто, для простоты — PSI.

    Параметры HTML

    «Оптимизировать код HTML?»

    В PSI мы можем наблюдать вот такую картину:

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

    В моей теме HTML был сокращен, данный пункт я не использую вообще. Т.к. никакой производительности он мне не добавит.

    В итоге в PSI мы должны получить:

    «Сохранять комментарии HTML?»

    В коде могут присутствовать пометки, которые выглядят так:

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

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

    Поэтому галочку можно не ставить, т.к. это лишние килобайты.

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

    Опции JavaScript

    «Оптимизировать код JavaScript?»

    Именно эта настройка включает, объединение и сокращение файлов JS. Если в PSI у вас была проблема «Удалите из верхней части страницы код JS…», на этом этапе она исчезнет.

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

    Пункты ниже могут нам с этим помочь.

    «Force javaScript in?»

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

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

    Для PSI, один блокирующий файл JS лучше чем двадцать.

    «Also aggregate inline JS?

    Интегрировать JavaScript в HTML, этот параметр помещает все ваши скрипты в HTML. Сам разработчик уверяет, что с интеграцией производительность намного увеличивается. По моим замерам, я никакой значительной разницы не увидел. После включения проверьте, правильно ли все отображается на сайте, если имеются «перекосы» отключите. Думаю автор понимает о чем говорит, поэтому я включил.

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

    При достижении больших размеров кэша, можно очищать, с помощью кнопки «Сохранить изменения и удалить кэш»

    «Exclude scripts from Autoptimize:»

    Исключить определенные JS файлы из оптимизации или частей кода(в случае интеграции JS в HTML). У меня на сайте перестал работать некоторый функционал, а так же не отображалась Google Recaptcha.

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

    Для рекаптчи, мне пришлось добавить файл wpdiscuz-recaptcha.js, он по умолчанию грузиться из нижней части сайта, поэтому он ничего не блокирует в PSI.

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

    «Add try-catch wrapping?»

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

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

    Конечно, без причины включать не стоит.

    Опции CSS

    «Оптимизировать код CSS?»

    Включает сокращение и объединение стилей, на данном этапе они останутся загружаться в «верхней части сайта», но вместо 10-20 файлов будет, один.

    «Generate data: URIs for images?»

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

    У меня в теме почти нет таких картинок, но все же пару есть, и на них этот пункт не сработал. Если у Вас работает, напишите об этом в комментариях.

    «Remove Google Fonts?»

    Если в теме сайта используются Google шрифты, PSI будет этому не рад:

    Топ-пост этого месяца:  В какой соцсети запускать рекламу в 2020

    Если установить галочку, проблема исчезнет как и сами Google шрифты, на сайте отобразятся стандартные шрифты, типа: «Arial».

    Конечно, плагин ничего не удаляет, если галочку убрать, вернуться шрифты которые стояли до этого.

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

    «Also aggregate inline CSS?»

    Частичная интеграция CSS в HTML. Плагин выбирает часть кода, который будет интегрирован в HTML. Как ни старался, я не нашел какой именно код и его количество.

    Основной файл CSS остается в верхней части сайта и продолжает раздражать PSI.

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

    Но как и с интеграцией JS, плагин начинает создавать больше CSS файлов в своем кэше.

    По моим замерам, производительность не увеличивается, я не активировал.

    «Inline and Defer CSS?»

    Самый интересный и сложный пункт. Он позволяет нам, интегрировать в HTML только тот CSS код, который используется для видимой отрисовки сайта и отложить загрузку всех CSS в целом, для удаления их из «верхней части сайта» в PSI.

    Что мы получаем:

    Плюсы:

    • Ускоренную отрисовку сайта для посетителей.
    • В PSI из верхней части сайта, удаляется файл CSS.

    Минусы:

    • Увеличение времени полной загрузки сайта, т.к. сначала подгружается наш интегрированный код, а потом все стили подгружаются снова.

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

    Я считаю этот пункт наилучшим компромиссом, который может предложить Autoptimize, в данном разделе.


    Как найти нужный код, который необходимо интегрировать в html(критический CSS)?

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

    Если вы, как и я, не обладаете идеальным знанием CSS и не можете самостоятельно определить какие стили используются для «отрисовки» той или иной страницы(да и долго это), можно попробовать воспользоваться сервисом Critical Path CSS, в его второй раздел, нужно поместить код всех стилей которые используются в вашей теме.

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

    После активации плагина убедитесь, что у Вас включен 1-ый пункт «Оптимизировать код CSS?».

    • Перейдите на любую станицу: нажмите правую кнопку мыши → «просмотр кода страницы» или ctrl+u (для Google Chrome).
    • Находим css-файл созданный плагином, для этого воспользуйтесь поиском по странице (ctrl+F), введите: autoptimize. Название примерно такое: autoptimize_6f0ee70cc9b84a1d501e9aee91e4e9a6.css.
    • Нажимайте на него, откроется новое окно с кодом, который необходимо вставить в Critical Path CSS.

    Теперь нам нужно создать критический CSS.

    Для этого введите url той страницы с которой брался код и нажмите «Create Critical Path CSS»:

    После чего мы наконец получим, критический CSS для той страницы, url которой Вы вводили!

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

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

    Следующая стадия удаление дублей и оптимизация кода.

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

    Осталось дело за малым, вставить полученный код в Autoptimize и сохранить настройки.

    «Inline all CSS?»

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

    Применение этого пункта, возможно, если у Вас небольшое количество CSS и с интеграцией в HTML, вместе они будет весить до

    300 КБ. Сам автор, рекомендует использовать этот пункт, при наличии низкого количества переходов по страницам, на «легких» сайтах. С ростом посещаемости, производительность, может ухудшаться.

    «Exclude CSS from Autoptimize:»

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

    «CDN Options»

    Сервис CDN — размещение частичной/полной кэшированной копии сайта или другого контента(аудио, видео и т.д.), на других платформах, для сокращения нагрузки на основной сервер. Часто используется для сокращения задержки, на больших расстояниях.

    Сервис подключается отдельно, в Autoptimize нужно указать адрес CDN сервиса, на котором Вы хотите размещать оптимизированные CSS и JS.

    Если Вы не используете CDN, ничего не вписывайте.

    Информация о кэше и Сжатии

    Каталог кэша — Локальный путь на Вашем сервере, где располагается кэш плагина.

    Cached styles and scripts — количество файлов, их общий размер и время создания.

    Save aggregated script/css as static files? — Если поставить галочку, отключает статическое сжатие файлов.

    Зачем это может понадобиться?

    • Если используется Gzip сжатие, включенное в htaccess или на уровне сервера или иными плагинами.
    • Если есть добавленные файлы в исключения оптимизации, они не будут сжиматься посредством плагина, поэтому можно отключить сжатие Autoptimize и включить GZIP сжатие. (Таким образом, мы достигнем максимального рейтинга в PSI).

    Кнопки сохранения — с первой все понятно, со второй есть нюанс, при сохранении настроек и очистке кэша Autoptimize, удаляется так же кэш Wp Super Cache, возможно и других кэширующих плагинов.

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

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

    Помочь в этом деле может сервис CSS Drive. Вот что он делает с вашим CSS-файлом:

    • Удаляет лишние пробелы, оставляя только один;
    • Удаляет пробелы около селекторов;
    • Удаляет пробелы около свойств;
    • Удаляет символы табуляции»;
    • Заменяет множество пустых строк одной линией;
    • Сокращает комментарии и т.д. и т.п.

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

    Компьютерные уроки, статьи и советы по настройке компьютера и сетевой работе — создание, оптимизация и продвижение сайтов и блогов в Сети Интернет, программирование HTML, XHTML, CSS и ява-скрипт

    Установка и загрузка ОС Виндовс

    Сжатие CSS и яваскрипт в CMS DLE

    Сжатие CSS и яваскрипт в CMS DLE

    Сжатие файлов CSS и яваскрипт

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

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

    Встроенный компрессор кода в CMS DLE

    В движке DLE имеется полноценный встроенный компрессор кода для системного сжатия файлов перед их отправкой потребителю. Он автоматически жмёт и прессует файлы стилей (.css) и яваскрипт (,js). По-умолчанию, сжатие кода в CMS DLE отключено. Подключение производится в секции head главного файла шаблона – main.tpl. Подключение встроенного компрессора решает все проблемы со сжатием и разжатым файлов. После подключения встроенного компрессора кода, в CMS DLE – движок начинает самостоятельно сжимать всё файло при его отправке потребителю.

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

    Сжатие файлов CSS в шаблоне CMS DLE

    По-умолчанию, внешние файлы стилей (css) подключены в шаблоне CMS DLE, в хедере его главного файла – main.tpl. В секции head (между тегами head) находится строки:

  • Для включения сжатия этих CSS-файлов,
    вышеуказанные строки заменить на:

    Стили будут автоматически объединены и сжаты.
    В браузер будут отдаваться уже сжатые файлы.

    Пояснение к строке кода:

    /style/styles.css (через запятую)
    /style/engine.css Пути к сжимаемым файлам CSS. Файлов стилей можно объединять, сколько годно. Если сжимаемый файл стилей находится за пределами шаблона, установленного по-умолчанию – тогда путь к файлу указывается от корня сайта. charset=windows-1251&amp Кодировка для файлов, содержащих кириллицу. Необязательный параметр. Если русских буквей в сжимаемом коде не наблюдается, эту часть можно не писать. &15 Количество дней хранения сжатого файла в кеше браузера. Необязательный параметр.

    Сокращение строки подключения:

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

    Убираем необязательный параметр &15 (срок хранение сжатого файла в кэше браузера):

    Убираем необязательный параметр charset=windows-1251&amp для файлов, содержащих русскоязычный текст:

    Сжатие файлов яваскрипт в шаблоне CMS DLE

    Принципиально, сжатие яваскрипт в шаблоне CMS DLE ничем не отличается от сжатия стилей (css). С той только разницей, что изменяются пути к файлам, теги и их атрибуты в строке подключения. Пример подключения сжатия файла яваскрипт libs.js, находящегося в папке js шаблона сайта, установленного по-умолчанию:

    СжатЫе файлы (результат сжатия)

    Интересно, как выглядит сжатый файл? Посмотреть его содержимое не так-то просто. Если стандартно (CTRL + S) сохранить страницу сайта на локальный компьютер то, в папке с сохранёнными файлами, сжатых – не окажется. Придётся залезать в кэш браузера.

    Работа с кэшем браузеров – нудное занятие. Браузеры шифруются. Бродить по кэшу без путеводителя бесполезно. Ведут в зашифрованное хранилище пути, вида: C:\Пользователи\Имя учётной записи\AppData\Local\Yandex\YandexBrowser\User Data\Default\Cache

    Выручает Мозилла.
    – ввести в адресную строку: about:cache
    – прокрутить открывшееся окно до раздела: disk
    – в разделе disk (в самом низу) нажать ссылку: List Cache Entries
    – в открывшемся окне найти адрес своего файлика и кликнуть по нему
    – в открывшемся окне кликнуть по ссылке в строке: key
    – на экране откроется к прочтению содержимое файла!
    Прим. Перед началом работы – почистить кэш браузера.
    Поиск по странице (Ctrl + F) – выполнять по имени файла.

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

    Gzip-сжатие

    Gzip-сжатие – архивирование файлов при их пересылке по Сети. Gzip-сжатие – упаковка файлов на сервере в Gzip-архив перед отправкой в браузер. После распаковки браузером полученного Gzip-архива – файлы приобретают прежний вид. Если файл был предварительно сжат на сервере компрессором DLE – он запакуется и распакуется в сжатом виде. Если файл НЕ! был предварительно сжат на сервере компрессором DLE – он запакуется и распакуется в НЕ! сжатом виде.

    Это две большие разницы,
    или, как говорят в Одессе –
    четыре маленькие.

    Методы сжатия кода для оптимизации CSS

    09.09.2020, 22:03

    Online сервис или программа для сжатия кода
    Как можно собрать весь код в кучу ? т.е например из такого .

    Нужен совет по выбору программы или плагина для оптимизации HTML-кода
    Посоветуйте какими программами оптимизации вы пользуетесь? Возможно есть плагины для sublime ил.

    Методы оптимизации кода
    Написал статью по оптимизации кода на С++. Ее можно почитать тут: А вы какие еще способы.

    Оптимизации кода для улучшения производительности
    Почему VB.net такой тормозной по сравнению с VC++ ?! риторический вопрос 🙂 Какие вообще есть.

    При попытке выполнения сжатия диска система пишет, что доступное для сжатия место — всего лишь 45 МБ
    Приветствую. Пытаюсь отделить от диска D (не системный) 50гб памяти. На диске 450+гб памяти всего.

    09.09.2020, 22:41 2 10.09.2020, 01:59 [ТС] 3 10.09.2020, 11:30 4
    10.09.2020, 11:30
    10.09.2020, 17:56 [ТС] 5

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

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

    HTML Compressor уменьшит размер HTML, CSS, JS, PHP, Smarty кода

    С удовольствием представляю сервис HTML Compressor с одноименным адресом https://htmlcompressor.com тем, кто с ним еще не знаком, с этим удобным и бесплатным онлайн инструментом. Заметьте, с безопасным соединением, что сейчас очень важно (если на вашем сайте пока обычный протокол, но вы планируете подключить безопасный, вам может пригодиться статья «Установка SSL-сертификата«). Итак, с помощью онлайн инструментов можно сделать компактными файлы JS, CSS, HTML и Smarty. HTML Compressor удалит в коде все лишние символы и пробелы, разберется с переносами строк, которые нужны разработчикам, но мешают при загрузке сайта.

    В поле слева можно вставить скопированный код или перетащить файл целиком, и он откроется в окне.

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

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

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

    Обратите внимание на верхний скриншот: в интерфейсе онлайн программы HTML compressor 4 вкладки: исходный код, сжатый, ошибки и сообщения. В целях безопасности данные удаляются каждый час.

    Порядок действий на HTML Compressor

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

    1. Скачиваю файл с сервера
    2. Загружаю его в окно сервиса и одновременно помещаю в отдельно подготовленную папку, названную, например, так: «Файлы до компрессии». Файл с исходным кодом может потребоваться, если при сжатии были исправлены какие-то ошибки, но это стало фатальным для работоспособности сайта. Оригинальный файл всегда можно восстановить из бэкапа.
    3. Жму кнопку «compress» и жду результата. В правой части экрана выводится процент, но не компрессии, а «сухого остатка», то есть, если вы видите 90%, значит, код сжат всего на 10%. Итог можно сравнить и по весу файлов: если было 46 килобайт, а стало 23, значит, код сокращен вдвое.
    4. Скачиваю файл со сжатым кодом. Название у каждого compressed. Его нужно будет аккуратно переименовать перед загрузкой.
    5. Перезаливаю на сервер, проверяю, как эта замена отразилась на работе сайта.
    6. Радуюсь!

    Здесь же есть инструменты для вебмастера, где можно проверить корректность кода, но мне привычнее и удобнее пользоваться программой notepad++. Кстати, если в коде есть комментарии, обратите внимание, не стерты ли они. Нужные можно скопировать из исходного кода и перенести в новый.

    Провела эксперимент. Валидатору не нравилось выражение “role=banner” (свойство, которое не применяется, и его можно было просто удалить). Сервис убрал кавычки. Теперь очередь за вами, если есть желание облегчить сайт или, для кого это актуально, высвободить место на хостинге.

    Добавить комментарий