Сжать css: Online YUI Compressor

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

Измерить скорость загрузки своего сайта и сравнить с конкурентными можно с помощью инструментов Google PageSpeed Insights или Проверка скорости сайта от PR-CY.

Если хотите ускорить загрузку страницы, то рекомендуем уменьшить ее размер.

Как уменьшить размер HTML

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

1. Избавиться от переадресации с целевой страницы. Google пишет о том, что перенаправления типа example.com → www.example.com → m.example.com или example.com → m.example.com/home для мобильных пользователей замедляют загрузку страницы.
2. Оформить HTML-элементы с помощью CSS, это ускорит загрузку и упростит работу с повторяющимися на страницах элементами.
3. Сжать все текстовые файлы HTML, XML, CSS, Javascript, сжать HTML-код страниц.
4. Использовать минификацию — удалить ненужные данные, которые увеличивают объем кода.
5. Сжать все графические файлы, оптимизировать изображения — фотографии и графику.
6. Использовать кэш браузера — кэшировать данные в браузере пользователя.
7. Оптимизировать нефункциональные анимационные детали, отказаться от flash — такие элементы вредят безопасности сайта и могут не поддерживаться у пользователей.
8. Оптимизировать количество рекламных блоков на странице.

Использовать сжатие gzip или brotli

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

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

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

1. Клиент совершает запрос и оповещает сервер, какие данные может принять.
2. Сервер обрабатывает запрос и определяет, какую версию отправить.
3. Сервер отправляет файл клиенту.
4. Клиент распаковывает и считывает информацию.

На втором этапе браузер сообщает серверу, какие методы сжатия поддерживает — посылает заголовки Accept-Encoding с кодом, где указаны алгоритмы сжатия, например, «accept-encoding: gzip, deflate, br». Сервер выбирает форматы из доступных: если клиент поддерживает brotli, то сервер ищет суффикс «.br» в заголовке и отправляет клиенту нужный файл. Если его нет, будет использовать другой алгоритм. Если клиент не поддерживает сжатие вообще, сервер отправит несжатую версию.

Какой алгоритм сжатия выбрать: gzip или brotli?

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

Почитать по теме:
Как оптимизировать показатель LCP | Ускоряем загрузку контента для пользователей

Как использовать сжатие gzip

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

Степень сжатия можно настраивать, gzip поддерживает уровень сжатия от 1 до 9. Обычно рекомендуют степень 4-7 в зависимости от ресурсов процессора, оптимальное значение 5. Подберите подходящую степень сжатия под свои ресурсы, чтобы процессор справлялся, иначе сжимать информацию будет бесполезно, если нагрузка на процессор сильно вырастет. Экономить ресурсы поможет использование заранее сжатых файлов, они имеют формат gzip с дополнительным расширением .gz. На такие файлы можно применять максимальную степень сжатия, дальше сервер будет использовать ее вместо обычной.

Сжатие gzip для Nginx

В новых версиях Nginx gzip сжатие включено по умолчанию, но если такого нет, его можно настроить. Чтобы запустить сжатие gzip для сервера Nginx, нужно включить сжатие в модуле /etc/nginx/nginx.conf: 

 gzip on;
     gzip_disable "msie6";
     gzip_vary on;
     gzip_proxied any;
     gzip_comp_level 6;
     gzip_buffers 16 8k;
     gzip_http_version 1.1;
     gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

Директива «gzip_disable «msie6»» отключает сжатие для эксплорера 5. Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html </ifmodule>

Есть еще такой вариант перечисления типов файлов для сжатия в одной строке: 

<ifmodule mod_deflate.c="">
    AddOutputFilterByType DEFLATE text/html text/css text/javascript font/ttf application/javascript
    DeflateCompressionLevel 7
    </ifmodule>

В строке DeflateCompressionLevel 7 указывают степень сжатия. Сжатие будет работать после сохранения.

Gzip-сжатие файлов SVG для Apache

Векторную графику формата SVG можно сжать с помощью gzip. В файле .htaccess. должна быть строка «# Compress HTML, CSS, JavaScript, Text, XML and fonts», добавьте в .htaccess строчку кода: 

AddOutputFilterByType DEFLATE image/svg+xml

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

Как использовать сжатие brotli

Brotli поддерживают браузеры Chrome, Firefox и Edge 15 для SSL-соединений. В заголовках должен быть «Accept-Encoding: br». В brotli есть собственный словарь из более сотни тысяч фраз, который используется для сжатия данных. Он же встроен в браузеры, которые поддерживают алгоритм, поэтому словарь не передается в архиве, и архив весит меньше.

Алгоритм сжатия brotli сжимает файлы сильнее, чем gzip. Максимальная степень сжатия у gzip — 9, а у brotli 11, степень 11 brotli дает файл на 25% меньше, чем сжатый 9 степенью gzip.

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

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

Сжатие brotli для Nginx

Сервер Nginx использует brotli при включенном модуле «brotli_static» в конфигурации «brotli_static on». Тогда сервер получит от браузера заголовок, проверит, есть ли в нем файл с расширением «.br» и отдаст нужный файл как архив, сжатый в brotli.

Brotli-архивы нужно установить из репозитория или собрать утилиты:

git clone https://github.com/badger/libbrotli
cd libbrotli
autoreconf -i
make install
git clone https://github.com/google/brotli
cd brotli
./configure
make
chmod +x bro
./bro —quality 11 —input <filename> —output <filename.br></filename.br></filename>

Пересборка Nginx с поддержкой brotli на Github.

Для сжатия «на лету» можно установить дополнительный модуль nginx brotli. Модуль Nginx для сжатия brotli «на лету» на Github.

Сжатие brotli для Apache

Сжатие brotli поддерживает Apache версии 2.4.26 и выше.

Для Apache есть модуль mod_brotli.

Модуль mod_brotli by kjdev на Github.

Как проверить сжатие данных

Алгоритм сжатия данных будет работать сразу после установки кодов. Проверить корректность работы можно несколькими способами.

Для проверки работы gzip есть Check GZIP compressed.

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

Инструмент «Проверка скорости сайта» от PR-CY оценит скорость и покажет страницы, на которых не работает сжатие.

Использовать минификацию HTML, CSS и JS

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

Минификация помогает уменьшить размер фрагментов кода JS, она не влияет на сам файл, но оптимизирует его и уменьшает размер, за счет чего повышается скорость загрузки. Файлы, прошедшие минификацию, получают расширение «.min». После минификации в CSS, HTML, JS-файле не будет разделителей, переносов, лишних пробелов, поэтому его будет сложнее читать.

Бесплатные инструменты для минификации CSS, JS, HTML-файлов

Собрали несколько бесплатных онлайн-инструментов для сокращения кода.

• minifycode.com
  Простой бесплатный онлайн- инструмент для минификации кода HTML, CSS и JavaScript файлов в отдельных полях.
• willpeavy.com/minifier
  Другой простой инструмент для минификации HTML, CSS или JS в один клик без дополнительных настроек.
• letteros.com/compressor
• Инструмент в два клика сжимает код JS, HTML и CSS, нужно только вставить код в поле и выбрать формат.
• htmlcompressor.com
  Инструмент позволяет выбрать уровень минификации HTML и встроенного в него кода CSS и JS, отметить расширенные настройки.
• jscompress.com
  Инструмент для сокращения файлов JS. Можно загружать файл и минифицировать несколько одновременно.
• askapache.com/online-tools/compress-css
  Инструмент для быстрой минификации CSS без настроек — загружаете код и получаете результат.
• csscompressor.com
  Инструмент дает установить одну из четырех степеней минификации CSS и размер итогового файла.

Использовать кэш браузера для ускорения

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

Google рекомендует настроить сервер так, чтобы он возвращал ответ с HTTP-заголовком Cache-Control, например:

Cache-Control: max-age=31536000

Директива «max-age» указывает, как долго браузер должен кэшировать ресурс в секундах. Значение 31536000 соответствует году: 60 секунд * 60 минут * 24 часа * 365 дней = 31536000 секунд.

Google советует применять «no-cache» для объектов, которые могут обновляться: тогда браузер по-прежнему будет кэшировать ресурс со значением «no-cache», но сначала проверит актуальность на сервере.

Кэширование для Nginx

Для сервера Nginx подходит модуль expires в файле конфигурации. Нужно перечислить форматы файлов для кэширования и указать время хранения кэша: 

location ~* \.(js|css|png|jpg|jpeg|gif)$ {
 expires 86400s;
 log_not_found off;
 }

Время можно указать в любом формате: секунды — s, часы — h, дни — d и месяцы — m, обозначение «max» указывает на кэширование навсегда.

Вместо времени хранения файла можно указать дату следующего обновления файла в кэше: 

expires Fri, 24 Nov 2017 01:01:01 GMT;

Строка log_not_found off нужна для снижения нагрузки на сервер, она отключает ведение лога сообщений с ошибкой 404 для перечисленных файлов. 

Кэширование для Apache

Метод Cache-Control

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

# 1 Month for most static assets
    <filesmatch ".(flv|gif|jpg|jpeg|png|ico|swf|js|css|pdf)$"="">
     Header set Cache-Control "max-age=2592000"
    </filesmatch>

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

  <filesmatch ".(pl|php|cgi|spl|scgi|fcgi)$"="">
     Header unset Cache-Control
    </filesmatch>

Кэширование по времени

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

 ## EXPIRES CACHING ##
    <ifmodule mod_expires.c="">
    ExpiresActive On
    ExpiresByType image/jpg "access 1 year"
    ExpiresByType image/jpeg "access 1 year"
    ExpiresByType image/gif "access 1 year"
    ExpiresByType image/png "access 1 year"
    ExpiresByType text/css "access 1 month"
    ExpiresByType text/html "access 1 month"
    ExpiresByType application/pdf "access 1 month"
    ExpiresByType text/x-javascript "access 1 month"
    ExpiresByType application/x-shockwave-flash "access 1 month"
    ExpiresByType image/x-icon "access 1 year"
    ExpiresDefault "access 1 month"
    </ifmodule>
    ## EXPIRES CACHING ##

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

После сохранения нужно обновить страницу.

Проверить кэширование в Google Chrome можно с помощью веб-инспектора Chrome DevTools. Столбец Size в Chrome DevTools поможет убедиться, что ресурс в кэше:

Столбец Size в Chrome DevTool. Источник — Google

Вкладка Headers покажет, как установлен Cache-Control:

Проверка заголовка Cache-Control. Источник — Google

Сжать фотографии, иллюстрации и другую графику

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

Почитать по теме:
Большое руководство по SEO для картинок: как оптимизировать изображения на сайте

Как оптимизировать картинки для сайта:

1. Подберите разрешение.
   Незачем загружать изображение в большом разрешении, если оно будет отображаться в маленьком без увеличения по клику.
2. Подберите формат.
   JPEG подходит для фотографий, PNG для дизайнерской графики, SVG для вектора. Google также индексирует формат WebP, который весит меньше, но не все браузеры его поддерживают. Яндекс не индексирует SVG и изображения в скриптах.
3. Уменьшайте количество цветов.
   Изображения, где нет сложных градиентов, требуют меньшего количества цветов. Можно оптимизировать картинку без потери качества, выбрав палитру меньше, тогда изображение будет хранить меньшее количество битов на пиксель.
Слева направо: 32 бита (16M цветов), 7 бит (128 цветов), 5 бит (32 цвета)
4. Пропишите параметры в CSS.
   Укажите размеры в коде или в редакторе изображений CMS. Для разных экранов и дисплеев с матрицей Retina нужны дополнительные варианты изображения разных размеров, чтобы браузер загружал нужное для устройства.
5. Используйте шрифты.
   Если вы еще используете графику вместо шрифтов для текста, замените надписи на шрифты, это удобнее и меньше весит. Такой текст можно скопировать, поменять, масштабировать в любой момент.
6. Удалите лишние изображения.
   Неинформативные картинки, иллюстрации ради разбивки текста и непонятные схемы лучше заменить на качественные изображения, которые помогут понять тему материала, или вообще удалить, чтобы они не прибавляли вес странице.
7. Минифицируйте.
   Удаляйте XML-разметку с лишними метаданными, она появляется при работе с картинками в некоторых графических приложениях. EXIF — информацию о геоданных, дате съемки, фотокамере тоже можно удалить.
8. Используйте алгоритмы сжатия.
   Настройте на сервере gzip-сжатие для SVG-графики.

Инструменты и сервисы для оптимизации изображений на сайте:

• CompressJPEG
  Сервис для сжатия JPEG и PNG без потерь качества.
• PunyPNG
  Инструмент сжимает PNG, JPEG и GIF.
• TinyPNG
  Инструмент для оптимизации изображений в PNG и JPEG.
• Jpegtran
  Инструмент для оптимизации JPEG-изображений.
• Optipng
  Инструмент для оптимизации PNG без потерь.
• Pngquant
  Инструмент сжимает PNG-изображения.

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

Ускорение Работы Сайта — Gzip Сжатие

Sait

2 мая, 2017

2мин. чтения

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

Gzip находит одинаковые строки в текстовом файле и временно их заменяет, тем самым уменьшая общий размер файла. Gzip сжатие особенно выгодно в сфере веб-технологий, так как HTML и CSS файлы используют множество повторяющихся строк и пробелов. В конечном итоге, gzip может сжать размер страницы и CSS стилей до 60-70%.

ВАЖНО! Gzip ускоряет работу вашего сайта, но увеличивает нагрузку на центральный процессор. Перед включением убедитесь в рациональности его использования.

Перед тем, как вы начнете это руководство, вам понадобится следующее:

• Доступ к файлу .htaccess
• Доступ к cPanel (необязательно)

Вы можете включить gzip для вашего сайта используя mod_gzip или mod_deflate. Рекомендуется использовать сжатие mod_deflate, так как оно использует более хороший алгоритм сжатия и сами модули совместимы с более поздними версиями Apache. Больше информации об этих двух методах вы можете найти в этой статье журнала Linux.

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

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml 
  AddOutputFilterByType DEFLATE application/x-font  
  AddOutputFilterByType DEFLATE application/x-font-truetype  
  AddOutputFilterByType DEFLATE application/x-font-ttf  
  AddOutputFilterByType DEFLATE application/x-font-otf 
  AddOutputFilterByType DEFLATE application/x-font-opentype 
  AddOutputFilterByType DEFLATE application/vnd. cgi-script$
</ifModule>

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

Пользователи WordPress могут включить gzip сжатие, установив такие плагины, как GZip Ninja Speed Compression.

На Joomla вы можете включить gzip в панели управления вашим сайтом в разделе Система → Глобальные настройки → Сервер. Вы также можете посетить наше руководство об улучшении производительности Joomla здесь.

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

Если вы используете сервер на базе Windows, вы можете включить HTTP сжатие для статического и динамического контента через командную строку:

appcmd set config /section:urlCompression /doDynamicCompression:True

appcmd set config /section:urlCompression /doStaticCompression:True

За подробностями вы можете обратиться к официальному руководству Microsoft.

Gzip сжатие может быть проверено несколькими различными инструментами, к примеру WebPageTest или GTMetrix.

Вот результаты ПЕРЕД включением gzip сжатия:

Для сравнения, вот результаты ПОСЛЕ включения gzip сжатия:

В этом кратком руководстве вы научились, как ускорить работу сайта с помощью gzip сжатия. Включить его можно несколькими способами; через .htaccess и добавление mod_gzip или mod_deflate, через CMS плагины, cPanel или с помощью специальных команд на Windows сервере.

Руководства по теме:

Сжатие css файлов | Продвижение бизнеса

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

Инструменты

• CSSMin ( httpHTTP. Протокол, на котором «разговаривают» клиенты (например, браузер или поисковый робот) и сервер сайта с помощью запросов и откликов. При каждом запросе к серверу браузер или робот поисковика передает служебную информацию в HTTP заголовках.://code.google.com/p/cssmin/ ). Библиотека проводит набор простейших замен в CSS-файле (удаляет ненужные символы) и склеивает его в одну строку.
• Minify ( httpHTTP. Протокол, на котором «разговаривают» клиенты (например, браузер или поисковый робот) и сервер сайта с помощью запросов и откликов. При каждом запросе к серверу браузер или робот поисковика передает служебную информацию в HTTP заголовках.://code.google.com/p/minify/ ) . Библиотека, минимизирующая как CSS-, так и JS-файлы. Кроме того она может склеивать несколько файлов в один, заменять относительные пути к фоновым картинкам на более короткие и самостоятельно отдавать кэширующие заголовки. В общем, не сильно лучше предыдущей.

• YUI ( http://developer.yahoo.com/yui/compressor/ ). YUI-compressor (использовалась версия 2.2.5). Фактически, делает то же самое, что две предыдущих библиотеки.

• CSSCSS (Cascading Style Sheets — каскадные таблицы стилей). Набор определенных свойств (стилей) для удобной настройки внешнего вида элементов веб-страницы. Minifier ( http://www.artofscaling.com/css-minifier/ ). Автор разработал собственный алгоритм сжатия (после беглого анализа это оказалась несколько переработанная версия CSSCSS (Cascading Style Sheets — каскадные таблицы стилей). Набор определенных свойств (стилей) для удобной настройки внешнего вида элементов веб-страницы. Tidy), который, по его собственному утверждению, «жмет лучше всех». Это мы и проверим чуть дальше. .

• CSS Tidy ( http://csstidy.sourceforge.net/ ). Проект по минимизации CSS-файлов с открытым исходным кодов. Имеет много настроек, перенесен на несколько языков и используется на нескольких ресурсах, которые предлагают инструментарий для минимизации CSS-файлов, например, на www.codebeautifier.com. Наиболее широко распространенная версия минимизатора.

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

Графические результаты

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

Рис. 9. Эффективность различных инструментов для минимизации CSS-файлов по сравнению с gzip

При архивировании, однако, все минимизаторы ведут себя примерно одинаково.

Рис. 10. Эффективность различных инструментов для минимизации CSS-файлов вместе с дополнительным архивированием по сравнению с gzip

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

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

Тут уже видно отчетливо, что CSS Tidy ведет себя, в целом, лучше остальных скриптовСкрипт (от англ. script — сценарий) — небольшая программа, исполняющаяся на стороне сервера и написанная на специальном языке сценариев (РНР-, Perl-скрипты и др.) или в браузере пользователя (JavaScript и др.). Служит для выполнения сложных действий, которые не исполняет обычный веб-сервер или браузер…. (хотя, за исключением редких случаев, выигрыш не превосходит 6% относительно обычного архивирования).

Выводы

Во-первых, gzip и так показывает хорошее сжатие (до 81%), поэтому в большинстве случаев можно пользоваться только им.

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

В-третьих, замечен локальный выброс при файле небольшого размера. Он связан с тем, что gzip изначально его плохо сжал (вероятно, из-за маленькой исходной библиотеки слов), поэтому все минимизаторы показали себя на высоте. Однако, файлы такого размера (порядка 1 Кб) стоит либо объединять с другими файлами (ибо тратить время на дополнительный запрос на сервер из-за такой мелочи не очень рационально), либо включить в сам HTML-файл. Так что данный выброс не стоит считать серьезным основанием для того, чтобы действительно использовать какой-либо минимизатор только из-за выигрыша в 3-4% от размера исходного файла.

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

В общем, если мы не хотим дополнительно морочить себе голову, то можно просто архивировать CSS-файлы (в среднем, выигрыш 79%) либо проводить простую «подчистку мусора» перед архивированием (в среднем, выигрыш 82%). Если мы заботимся о количестве байтов, то стоит изучить действие CSS Tidy и Minifier (их прелесть заключается в алгоритме перегруппировки селекторов) и использовать их либо разработать собственное приложение.

Практический пример

По сравнению с JavaScriptКлиентские скрипты — программы, загружаемые с сайта и выполняющиеся в браузере пользователя. Наиболее распространенные языки программирования для написания клиентских скриптов — JavaScript и VBScript., CSS относительно просто сжимать. В силу практически полного отсутствия строк, заключенных в кавычки (в основном, пути и названия шрифтов) мы можем изничтожить проблемы обычными регулярными выражениями. Когда же мы действительно встречаемся со строкой в кавычках, то мы можем объединить множественные пробелы в один (так как мы не рассчитываем обнаружить их в количестве больше чем 1 в URL или названиях шрифтов). Простейший скриптСкрипт (от англ. script — сценарий) — небольшая программа, исполняющаяся на стороне сервера и написанная на специальном языке сценариев (РНР-, Perl-скрипты и др.) или в браузере пользователя (JavaScript и др.). Служит для выполнения сложных действий, которые не исполняет обычный веб-сервер или браузер…. на Perl может обеспечить нам все необходимые преобразования:

#!/usr/bin/perl
my $data = ”;
open F, $ARGV[0] or die “Не получается открыть исходный файл: $!”;
$data .= $_ while <F>;
close F;

$data =~ s!\/\*(.*?)\*\/!!g; # удаляем комментарии
$data =~ s!\s+! !g; # сжимаем пробелы
$data =~ s!\} !}\n!g; # добавляем переводы строки
$data =~ s!\n$!!; # удаляем последний перевод строки
$data =~ s! \{ ! {!g; # удаляем лишние пробелы внутри скобок
$data =~ s!; \}!}!g; # удаляем лишние пробелы и синтаксис внутри скобок print $data;

Осталось прогнать все наши CSS-файлы через этот скриптСкрипт (от англ. script — сценарий) — небольшая программа, исполняющаяся на стороне сервера и написанная на специальном языке сценариев (РНР-, Perl-скрипты и др. ) или в браузере пользователя (JavaScript и др.). Служит для выполнения сложных действий, которые не исполняет обычный веб-сервер или браузер…., чтобы сжать их, например, так:

perl compress.pl site.source.css > site.compress.css

Путем простых текстовых преобразований можно уменьшить общий объем передаваемых данных почти на 50% (очень сильно зависит от стиля кодирования; обычно будет получен менее впечатляющий результат), что обеспечит более быструю работу сайта для конечных пользователей в том случае, если gzip применить не удается.

Как сжать, растянуть, обрезать, преобразовать и масштабировать изображения на CSS

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

Раньше я при публикации записи на WordPress подготавливал несколько вариантов одной и той же картинки с разными размерами. Большие (оригинального размера) использовались для показа в галерее, средние в теле самой записи, а маленькие в качестве миниатюр (thumbnail).

Со временем, мне надоело это делать из-за временных затрат и ошибок, которые нет-нет, да возникали при ручном преобразовании. Кроме того у меня возникали сложности при смене дизайна сайта, когда требовались другие размеры для изображений. Поэтому я стал преобразовывать картинки «на лету» с помощью WordPress плагина Kama Thumbnail. Спасибо автору за этот отличный плагин!

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

Css-свойство object-fit

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

Здесь проще всего показать все на примерах. Допустим у нас есть две картинки размерами 200х300 пикселей и 300х200 пикселей, а для миниатюр к постам мы хотим использовать изображение размером 200х200 пикселей. Разумно, чтобы первичные изображения полностью заполняли миниатюру с сохранением пропорций, а лишние части (сверху/снизу или слева/справа) отсекались.

Чтобы реализовать задуманное нужно использовать ключевое значение object-fit: cover;, при его использовании лишнее содержимое изображения обрезается, а итоговая картинка выравнивается по центру с сохранением пропорций таким образом, чтобы полностью заполнить область контейнера.

Как сжать и обрезать изображение на CSS

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

img.object-fit-cover {
width: 200px; 
height: 200px;
object-fit: cover;
}

Сам вывод изображения может быть таким:

<img src="//domainname.tld/img/another-picture.jpg">

Другие значения object-fit для преобразования изображений

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

Достоинства и недостатки преобразования размеров изображений средствами одного CSS

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

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

Кроме того, если для миниатюры 100х100 пикселей использовать картинку формата FullHD 1920×1080, то сначала она полностью скачается на компьютер пользователя, а лишь затем браузер приведет ее к формату 100х100. Как вы понимаете размер таких изображений (1920×1080 и 100х100) может различаться в 10 раз, и это может замедлить работу сайта на слабых компьютерах и медленном интернете (например на телефонах и планшетах в сетях 2G/3G)!

На мой взгляд плюсы перевешивают минусы.

Благодарности

При написании статьи были использованы следующие источники:

1. https://developer.mozilla.org/ru/docs/Web/CSS/object-fit
2. https://html5book.ru/svoystva-object-fit-i-object-position/

YUI

По мнению группы разработчиков Yahoo! По исключительной производительности, От 40% до 60% пользователей Yahoo! имеют пустой кеш, и около 20% всех просмотров страниц выполняются с пустым кешем. (подробнее см. статью Тенни Теурера в YUIBlog. информация об использовании кеша браузера). Этот факт подчеркивает важность того, чтобы веб-страницы были как можно более легкими. Улучшение инженерного дизайна страницы или веб-приложения обычно дает наибольшую экономию, и это всегда должно быть основной стратегией.При правильном дизайне существует множество вторичных стратегий для повышения производительности, таких как минификация кода, сжатие HTTP, использование спрайтов CSS и т. Д.

Что касается минимизации кода, наиболее широко используемыми инструментами для минимизации кода JavaScript являются инструмент Дугласа Крокфорда. JSMIN, компрессор Додзё и Дин Эдвардс ‘ Пакер. Однако каждый из этих инструментов имеет недостатки. JSMIN, например, не дает оптимальной экономии (из-за своего простого алгоритма он должен оставлять много символов перевода строки в код, чтобы не вносить новых ошибок).

Целью минификации JavaScript и CSS всегда является сохранение рабочих качеств кода при одновременном уменьшении его общего объема в байтах (как в исходном виде, так и после сжатия, поскольку большая часть JavaScript и CSS, обслуживаемых с рабочих веб-серверов, сжимается как часть протокола HTTP. ). YUI Compressor — это минификатор JavaScript, который на 100% безопасен и обеспечивает более высокую степень сжатия, чем большинство других инструментов. Тесты библиотеки YUI показали экономию более 20% по сравнению с JSMin (становится 10% после сжатия HTTP).Компрессор YUI также может сжимать файлы CSS с помощью порта минификатора CSS на основе регулярных выражений Исаака Шлютера.

Быстрые ссылки

• Документация: Подробное описание компрессора YUI и его использования.
Примечания к выпуску
• : подробный журнал изменений для YUI Compressor.
• Минификация CSS: Описание минификации CSS, выполняемой компрессором.
• Лицензия: Весь код, специфичный для YUI Compressor, выпущен под лицензией BSD.YUI Compressor расширяет и реализует код проекта Mozilla Rhino. Rhino выпускается в соответствии с общественной лицензией Mozilla (MPL), и MPL применяется к исходному тексту Rhino и двоичным файлам, которые распространяются с YUI Compressor, включая модификации Rhino, сделанные YUI Compressor. YUI Compressor также использует и распространяет двоичный файл JArgs; к этому двоичному файлу применяется лицензия JArgs BSD.
• Загрузить: Загрузите YUI Compressor.

Как работает компрессор YUI?

Компрессор YUI написан на Java (требуется Java> = 1.4) и полагается на Rhino для токенизации исходного файла JavaScript. Он начинается с анализа исходного файла JavaScript, чтобы понять, как он структурирован. Затем он распечатывает поток токенов, исключение как можно большего количества пробелов и замена всех локальных символов на 1 (или 2, или 3) буквенный символ везде, где уместна такая замена (перед лицом злые функции, такие как eval или с , YUI Compressor использует защитный подход, не запутывая ни одну из областей, содержащих зло statement) Алгоритм сжатия CSS использует набор точно настроенных регулярных выражений для сжатия исходного файла CSS.YUI Compressor имеет открытый исходный код, поэтому не стесняйтесь взглянуть на код, чтобы понять, как именно он работает.

Использование YUI Compressor из командной строки

 $ java -jar yuicompressor-x.y.z.jar
Использование: java -jar yuicompressor-x.y.z.jar [параметры] [входной файл]

  Глобальные параметры
    -h, --help Отображает эту информацию
    --type  Определяет тип входного файла
    --charset  Прочитать входной файл с помощью 
    --line-break  Вставить разрыв строки после указанного номера столбца
    -v, --verbose Показать информационные сообщения и предупреждения
    -o <файл> Поместить вывод в <файл> или в шаблон файла.По умолчанию - стандартный вывод.

  Параметры JavaScript
    --nomunge Только минимизировать, не запутывать
    --preserve-semi Сохранить все точки с запятой
    --disable-optimizations Отключить все микрооптимизации

ГЛОБАЛЬНЫЕ ВАРИАНТЫ

  -h, --help
      Печатает справку по использованию YUI Compressor

  --Разрыв строки
      Некоторым инструментам управления версиями не нравятся файлы, содержащие строки длиннее, чем,
      скажем 8000 символов. В этом случае используется опция разрыва строки для разделения
      длинные строки после определенного столбца.Его также можно использовать для создания кода
      более читаемый, более простой в отладке (особенно с отладчиком MS Script Debugger)
      Укажите 0, чтобы получить разрыв строки после каждой точки с запятой в JavaScript, и
      после каждого правила в CSS. 

  --type js | css
      Тип компрессора (JavaScript или CSS) выбирается на основе
      расширение имени входного файла (.js или .css) Эта опция обязательна
      если не указан входной файл. В противном случае этот вариант только
      требуется, если расширение входного файла не является ни js, ни css.--charset набор символов
      Если указан поддерживаемый набор символов, YUI Compressor будет использовать его.
      для чтения входного файла. В противном случае он будет предполагать, что платформа
      используется набор символов по умолчанию. Выходной файл закодирован с использованием
      тот же набор символов.

  -o Outfile

      Поместите вывод в файл outfile. Если не указано иное, YUI Compressor будет
      по умолчанию используется стандартный вывод, который можно перенаправить в файл.
      Поддерживает синтаксис фильтра для выражения выходного шаблона, когда есть
      несколько входных файлов.бывший:
          java -jar yuicompressor.jar -o '.css $: - min.css' * .css
      ... уменьшит все файлы .css и сохранит их как -min.css

  -v, --verbose
      Отображать информационные сообщения и предупреждения.

ТОЛЬКО ОПЦИИ JAVASCRIPT

  --nomunge
      Только минимизировать. Не скрывайте местные символы.

  --preserve-semi
      Сохранять ненужные точки с запятой (например, прямо перед '}'). Этот параметр
      полезен, когда сжатый код нужно запускать через JSLint (который является
      случай YUI например)

  --disable-optimizations
      Отключите все встроенные микрооптимизации.

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

Следующая командная строка (x.y.z представляет номер версии):

 $ java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js 

уменьшит файл myfile.js и выведет файл myfile-min.js . Для получения дополнительной информации о том, как использовать YUI Compressor, обратитесь к документации. входит в архив.

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

 $ java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js --charset utf-8 

Дополнительные примечания

• Не сомневайтесь, используйте опцию -v . Хотя не замена JSLint, он выдаст несколько полезных подсказок когда он чувствует, что с вашим кодом что-то не так.
• Если вы хотите минимизировать свои файлы на бэкэнде (также известном как минификация на лету), а не во время сборки, вы захотите кэшировать минифицированные файлы в памяти для оптимальной производительности (вместо минимизации тех же файлов снова и снова и минификация — это трудоемкий процесс) Обратите внимание, что YUI Compressor можно легко создать и используется из среды на основе Java (сервлет).

Поддержка и сообщество

YUICompressor обсуждается в группе Google YUICompressor.

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

Сообщения об ошибках и запросы функций

YUICompressor использует проблемы Github для отслеживания проблем.

Подробнее о минификации JavaScript / CSS и компрессоре YUI

Как минимизировать CSS в WordPress, чтобы увеличить скорость вашего сайта в 2 раза

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

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

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

Скорость веб-сайта — один из таких критериев.

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

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

The What and Why with Minifying CSS 🔍

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

Минимизация CSS помогает уменьшить размер файла, насколько это возможно.

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

Однако пробелы и комментарии не требуются для работы на веб-сайте. Все, что вам нужно, это сами команды CSS.

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

/ * ------------------------------
>>> СОДЕРЖАНИЕ:
------- -------------------------
# Нормализовать
# Типографика
# Элементы
# Формы
# Навигация
# Макет
## Ссылки
## Меню
------------------------------ * /

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

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

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

html {
семейство шрифтов: без засечек;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; }

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

Теперь давайте посмотрим, как выглядит этот CSS в уменьшенном виде:

html {font-family: sans-serif; -webkit-text-size-adjust: 100%; - ms-text-size-adjust: 100%}

Все лишнее для работы сайта удалено, и размер вашего файла станет намного меньше . Меньший размер файла = более быстрое время загрузки.

способов минимизировать CSS для разработчиков и пользователей 000

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

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

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

Интернет-инструменты

Вы можете использовать онлайн-инструменты для минимизации CSS. Инструмент Dan’s Tools CSS Minifier позволяет копировать и вставлять CSS в текстовое поле и нажимать кнопку, чтобы уменьшить его.

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

Плагины для WordPress

WordPress также могут помочь вам минимизировать CSS. WP Super Minify — это самый последний плагин, совместимый с последней версией WordPress на момент написания этой статьи.

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

Способы минимизации CSS для разработчиков

Если вы профессиональный веб-разработчик, то есть два основных способа минимизировать ваш CSS.

Красота бегунов

помогает автоматизировать многие задачи, которые необходимо выполнить, чтобы вы могли выполнять свою работу более эффективно.Grunt и Gulp — два самых известных исполнителя задач. У Grunt есть пакет, который минимизирует CSS, как и у Gulp. Я использую Gulp в своем рабочем процессе, и Gulp Clean CSS мне подходит.

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

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

Использование препроцессора CSS

Если вы используете SASS или LESS и не используете средство выполнения задач, ваш компилятор также должен иметь возможность минимизировать CSS.До того, как я открыл для себя Gulp, я использовал Compass в качестве компилятора SASS. В файле Compass config.rb вы можете просто установить параметры вывода как сжатые. Ваши файлы SASS останутся несжатыми, а скомпилированный CSS будет уменьшен.

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

Тестирование улучшения скорости страницы

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

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

Теперь идите дальше и минимизируйте!

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

Превратите свой веб-сайт в демона скорости, одну технику оптимизации за раз!

Хотите оставить отзыв или присоединиться к беседе? Добавляйте свои комментарии 🐦 в Twitter.

СохранитьСохранить

Как легко и четко минимизировать JS и CSS в вашей теме Shopify за 2 шага

Последнее обновление: 24 февраля 2021 г., автор: LAUNCHTIP

Как легко и четко минимизировать JS и CSS в вашей теме Shopify за 2 шага

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

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

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

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

Вы можете разместить свои файлы CSS в папке Assets .Выберите Интернет-магазин на вкладке Канал продаж в вашем магазине Shopify. Затем выберите раскрывающееся меню Действия и нажмите Изменить код . Это предоставит вам файлы CSS для вашего магазина. Любые файлы с расширением .scss.liquid или. sccs . были оптимизированы. Те файлы с расширениями. css.liquid или. css не были минифицированы.

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

1. Выберите css.liquid , чтобы открыть файл и переименовать его в custom.scss.liquid
2. Найдите, откуда файл загружается. Обычно эту команду можно найти в liquid и в теге
3. В нашем примере вы измените css на custom.scss
4. После этого изменения Shopify сжимает ваш файл CSS на своем сервере перед его отправкой на ваш веб-сайт.

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

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

  
mod_gzip_on Да
mod_gzip_dechunk Да
mod_gzip_item_include файл.Кодирование содержимого:. * Gzip. *

  

  
SetOutputFilter DEFLATE

  

  
AddOutputFilterByType DEFLATE text / text text / html text / plain text / xml text / css application / x- javascript application / javascript

  

  

SetOutputFilter DEFLATE


  

  
AddOutputFilterByType DEFLATE text / html text / plain text / xml text / css application / x-javascript text / javascript application / javascript application / json

SetOutputFilter DEFLATE


  

  #Gzip - сжатие текста, html, javascript, css, xml

AddOutputFilterByType DEFLATE текст / простой
AddOutputFilterByType DEFLATE text / html
AddOutputFilterByType DEFLATE текст / xml
AddOutputFilterByType DEFLATE text / css
AddOutputFilterByType DEFLATE application / xml
AddOutputFilterByType DEFLATE application / xhtml + xml
AddOutputFilterByType DEFLATE application / rss + xml
AddOutputFilterByType DEFLATE application / javascript
AddOutputFilterByType DEFLATE application / x-javascript

#End Gzip
  

  <Местоположение />
SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI \. (?: gif | jpe? G | png) $ no-gzip не изменять
SetEnvIfNoCase Request_URI \. (?: exe | t? Gz | zip | gz2 | sit | rar) $ no-gzip не изменять

  

  a: link {
  цвет: серый;
}

а: посетил {
  цвет: зеленый;
}

a: hover {
  цвет: пурпурный;
}

a: active {
  цвет: бирюзовый;
}  

  a: link {color: gray} a: посещено {color: green} a: hover {color: # 663399} a: active {color: teal}