Сжатие js и css-файлов.
Зачем нужно сжимать и кодировать код? Сжимать следует для снижения веса файла или сокращения занимаемого места. Что касается кодировки, то это нужно для тех, кто хочет воспользоваться Вашим готовым кодом без согласия или как минимум слова спасибо) Шифровка делает его нечитабельным.
Таким образом, кстати, можно закодировать не только код Java Script, но ещё и CSS. Перейдём к сервисам.
1. JS Crunch
http://www.cfoster.net/jscrunch/
Автор: Charles Foster
Оптимальное шифрование и сжатие. Поддерживает UTF-8. Из минусов: не выводит никакой информации о проделанной работе - коэффицент сжатия, исходные, конечные размеры. Не всегда выдает рабочий зашифрованный код, поэтому проверяйте.
2. JavaScript Compressor
http://javascriptcompressor.com/
Автор: Dean Edwards
Онлайн компрессор. Предоставляет возможность закодировать код несколькими способами.
3. CSS & JavaScript Compressor
http://www.creativyst.com/Prod/3/
Онлайн компрессор. Довольно дубовый, без каких либо наворотов, вычищает лишние пробелы, табуляцию и пустые переводы строк.
Да, есть современные формы сжатия и считывания: прочитайте про gzip. Однако, не следует забывать о частных небольших примерах, где сервисы могут пригодиться. И как можно чаще занимайтесь чисткой и оптимизацией кода. Особенно при высоких нагрузках на сервис!)
Дамы и господа, давайте включим параною:
Однако, если рассматривать средний результат, то с достаточно большим отрывом выделяются 2 инструмента:1. cssresizer.com (84,13%);
whois спойлер
nikitas@pentagon:~$ whois cssresizer.com
Whois Server Version 2.0
Domain names in the .com and .net domains can now be registered
with many different competing registrars. Go to http://www.internic.net
for detailed information.
Domain Name: CSSRESIZER.COM
Registrar: REGISTRAR OF DOMAIN NAMES REG.RU LLC
Sponsoring Registrar IANA ID: 1606
Whois Server: whois.reg.com
Referral URL: http://www.reg.ru
Name Server: NS1.MCHOST.RU
Name Server: NS2.MCHOST.RU
Name Server: NS3.MCHOST.RU
Name Server: NS4.MCHOST.RU
Status: clientTransferProhibited https://icann.org/epp#clientTransferProhibited
Updated Date: 21-apr-2016
Creation Date: 08-apr-2016
Expiration Date: 08-apr-2017
For more information on Whois status codes, please visit https://icann.org/epp
NOTICE: The expiration date displayed in this record is the date the
registrar"s sponsorship of the domain name registration in the registry is
currently set to expire. This date does not necessarily reflect the expiration
date of the domain name registrant"s agreement with the sponsoring
registrar. Users may consult the sponsoring registrar"s Whois database to
view the registrar"s reported date of expiration for this registration.
TERMS OF USE: You are not authorized to access or query our Whois
database through the use of electronic processes that are high-volume and
automated except as reasonably necessary to register domain names or
modify existing registrations; the Data in VeriSign Global Registry
Services" ("VeriSign") Whois database is provided by VeriSign for
information purposes only, and to assist persons in obtaining information
about or related to a domain name registration record. VeriSign does not
guarantee its accuracy. By submitting a Whois query, you agree to abide
by the following terms of use: You agree that you may use this Data only
for lawful purposes and that under no circumstances will you use this Data
to: (1) allow, enable, or otherwise support the transmission of mass
unsolicited, commercial advertising or solicitations via e-mail, telephone,
or facsimile; or (2) enable high volume, automated, electronic processes
that apply to VeriSign (or its computer systems). The compilation,
repackaging, dissemination or other use of this Data is expressly
prohibited without the prior written consent of VeriSign. You agree not to
use electronic processes that are automated and high-volume to access or
query the Whois database except as reasonably necessary to register
domain names or modify existing registrations. VeriSign reserves the right
to restrict your access to the Whois database in its sole discretion to ensure
operational stability. VeriSign may restrict or terminate your access to the
Whois database for failure to abide by these terms of use. VeriSign
reserves the right to modify these terms at any time.
The Registry database contains ONLY .COM, .NET, .EDU domains and
Registrars.
Domain name: cssresizer.com
Domain idn name: cssresizer.com
Status: clientTransferProhibited http://www.icann.org/epp#clientTransferProhibited
Registry Domain ID:
Registrar WHOIS Server: whois.reg.com
Registrar URL: https://www.reg.com/
Registrar URL: https://www.reg.ru/
Registrar URL: https://www.reg.ua/
Updated Date:
Creation Date: 2016-04-08T14:01:10Z
Registrar Registration Expiration Date: 2017-04-08
Registrar: Registrar of domain names REG.RU LLC
Registrar IANA ID: 1606
Registrar Abuse Contact Email: [email protected]
Registrar Abuse Contact Phone: +7.4955801111
Registry Registrant ID:
Registrant ID:
Registrant Name: Protection of Private Person
Registrant Street: PO box 87, REG.RU Protection Service
Registrant City: Moscow
Registrant State/Province:
Registrant Postal Code: 123007
Registrant Country: RU
Registrant Phone: +7.4955801111
Registrant Phone Ext:
Registrant Fax: +7.4955801111
Registrant Fax Ext:
Registrant Email: [email protected]
Admin ID:
Admin Name: Protection of Private Person
Admin Street: PO box 87, REG.RU Protection Service
Admin City: Moscow
Admin State/Province:
Admin Postal Code: 123007
Admin Country: RU
Admin Phone: +7.4955801111
Admin Phone Ext:
Admin Fax: +7.4955801111
Admin Fax Ext:
Admin Email: [email protected]
Tech ID:
Tech Name: Protection of Private Person
Tech Street: PO box 87, REG.RU Protection Service
Tech City: Moscow
Tech State/Province:
Tech Postal Code: 123007
Tech Country: RU
Tech Phone: +7.4955801111
Tech Phone Ext:
Tech Fax: +7.4955801111
Tech Fax Ext:
Tech Email: [email protected]
Name Server: ns1.mchost.ru
Name Server: ns2.mchost.ru
Name Server: ns3.mchost.ru
Name Server: ns4.mchost.ru
DNSSEC: Unsigned
URL of the ICANN WHOIS Data Problem Reporting System: http://wdprs.internic.net/
>>> Last update of WHOIS database: 2016-07-27T00:49:39Z
RewriteEngine
On
RewriteCond
%{
HTTP_USER_AGENT}
!".*Safari.*"
RewriteCond
%{
HTTP:Accept-Encoding}
gzip
RewriteCond
%{
REQUEST_FILENAME}
.gz -f
RewriteRule
(.*)
\.js$ $1
\.js.gz [
L]
ForceType
text/javascript
### 2. Обработка css-файлов
ForceType
text/css
Header
set Content-Encoding: gzip
RewriteEngine
On
RewriteCond
%{
HTTP_USER_AGENT}
!".*Safari.*"
RewriteCond
%{
HTTP:Accept-Encoding}
gzip
RewriteCond
%{
REQUEST_FILENAME}
.gz -f
RewriteRule
(.*)
\.css$ $1
\.css.gz [
L]
ForceType
text/css
Всё, никаких изменений больше не нужно !
Проверить корректность работы метода можно в Firefox с установленным плагином Live HTTP Headers :
История изменений:
- 19.04.2008 — первичная публикация;
- 14.11.2008 — добавление альтернативного варианта (FilesMatch);
- 21.03.2009 — исправлена опечатка в примере альтернативного варианта (FilesMatch).
Всем-всем привет!
Продолжаем оптимизировать и сегодня на очереди у нас оптимизация JS (JavaScript) и CSS кода. Напомню, вчера мы работали с изображениями, если Вы все еще не оптимизировали их, то как раз для Вас (обязательно примените то, что написано там).
Урок получится коротким, поэтому скорее начнем. Погнали!
Что такое JS и CSS код?В настоящее время сайт, созданный исключительно на HTML и CSS, уже является отстающим, ведь на этих языках нельзя написать какие-то удобные, полезные штуки, которые облегчили бы взаимодействие с ним. Пользователям, в свою очередь, необходимо преподнести максимально удобный продукт (веб-ресурс). Осуществить данное требование помогут различные языки программирования, к которым относится и JavaScript.
JavaScript — язык программирования, позволяющий создавать различные скрипты (приложения), которые встраиваются в HTML-страницы. Скрипты выполняются в браузере пользователя.
Чтобы вывести даже тот самый пресловутый счетчик времени потребуется JS. Так что, думаю, и на Вашем сайте присутствует данный язык программирования.
CSS — язык описания внешнего вида любого элемента сайта. То есть то, как выглядит Ваш сайт, мой сайт, да любой другой, написано на этом языке.
Для чего нужно оптимизировать JS и CSS код?Задача данного мероприятия одна — снизить время загрузки страниц сайта. К сожалению, JS-скрипты и CSS код зачастую несут в себе очень много символов, пробелов, чем и замедляют загрузку веб-ресурса. Оптимизация подобных файлов направлена на то, чтобы отсечь лишние символы, лишние пробелы, тем самым снижая их размер и, как следствие, облегчая загрузку веб-страниц. По сути происходит обычное сжатие файла. Можно сделать и более глубокую оптимизацию, если, конечно, Вы разбираетесь в программировании и сайтостроении.
Оптимизация JS и CSS кодаВ Интернете, как и в случае с оптимизацией изображений, существует несколько онлайн-сервисов, которые выполняют то, что написано выше:
Ваша задача: скопировать код файла, вставить его в один из перечисленных сервисов, получить оптимизированный код и вставить его в исходный файл. Вот и все.
Предупреждаю: после оптимизации код станет не читабельным, поэтому дальнейшая работа с ним будет немного затруднена.
Оптимизируя свой , я попробовал оба сервиса: в первый залил проблемный файл JS, а во второй CSS () и буквально через 5 секунд код оптимизировался и уже можно было заливать, что я и сделал.
Скорость загрузки является одним из наиболее значимых факторов, определяющих конверсию сайта. Поэтому это одна из самых важных проблем, которую нужно решать в первую очередь. Есть множество факторов, влияющих на этот параметр - от удаленности сервера до качества разработки. Также существуют множество методов по уменьшению скорости загрузки сайта. Один из них - сжатие файлов js и css .
Описание проблемыCMS 1С-Битрикс пока не предоставила функционала по сжатию js и css файлов. Она позволяет только объединить эти файлы в один js и css файл. Поэтому нужно решать эту проблему самостоятельно.
Проблема скорости загрузки сайта остро встала перед одним из наших постоянных клиентов — сайт tiremax.ru , которому мы оказываем услугу при появлении сезонного спроса на их товар. После проверки сайта Google Page Speed , сервис указал нам на большой объем js и css файлов. Решили эту проблему в два этапа:
Для минимизации файлов js была выбрана библиотека Dean Edwards . Она очень проста в использовании:
В результате на этом шаге получились следующие результаты * :
| common.js | 30918 | 13002 |
| jquery.cookie.js | 2817 | 1483 |
| jquery.easing.1.3.js | 8097 | 3204 |
| jquery.equalheights.js | 2395 | 752 |
| jquery.maskedinput.js | 12397 | 3540 |
| jquery.stickem.js | 4499 | 2098 |
| scripts.js | 7572 | 4490 |
| video_slider.js | 9737 | 4297 |
* в таблице не приведены файлы библиотек, которые уже поставляются в сжатом виде.
Но, есть одно требование, которое предъявлено к вашим файлам js . Иначе после минимизации браузер будет выдавать ошибку. И это требование — правильная расстановка запятых в исходном js . Вот пример правильной расстановки запятых:
Var input, output; // notice the semi-colon at the END of function expressions onload = function() { input = document.getElementById("input"); output = document.getElementById("output"); clearAll(true); }; function packScript() { output.value = pack(input.value); } function clearAll(focus) { output.value = input.value = ""; // the "if" statement is NOT terminated with a semi-colon if (focus) { input.focus(); } }
Минимизация css-файловДля минимизации css—файлов использовался парсер и оптимизатор . Принцип его работы также прост:
И скрипт выдает нам сжатый код css . Вот результаты, которые получились у меня:
Для сжатия файлов в формат gz использовались материалы статьи Как ускорить загрузку своего сайта при помощи compress.php , который объединит и сожмёт JS + CSS в Gzip .
Инструкции, описанные в статье довольно просты:
В строках 3-6 скрипт проверяет, поддерживает ли браузер сжатие. Если поддерживает, то будут подключены gz—файлы, если нет, то будут подключены сжатые css и js—файлы.
В папке min создались 5 файлов: js_schedule.js , css_schedule.css , js_schedule.jsgz , css_schedule.cssdz и.htaccess с кодом:
AddType text/css cssgz AddType text/javascript jsgz AddEncoding x-gzip .cssgz .jsgz # for all files in min directory FileETag None # Cache for a week, attempt to always use local copy ExpiresActive On ExpiresDefault A604800 Header unset ETag Header set Cache-Control "max-age=604800, public" который надо вставить в ваш.htaccess в корне сайта.
Запускаем сайт — работа закончена.
В результате объем файла css_schedule.cssgz стал 41604 байта (изначально суммарный вес всех css—файлов был более 300000 байт), а файла js_schedule.jsgz — 51059 байт (суммарный вес — более 400000 байт)..
Таким образом, при помощи сторонних библиотек удалось сократить размеры файлов js и css . Стоит заметить, что после повторного тестирования сайта tiremax.ru на Google Page Speed оценка скорости загрузки подросла на 6 пунктов. В дальнейшем, для увеличения скорости загрузки нашего партнера, мы установили ему композитный сайт. Будем надеяться, что хорошая скорость загрузки привлечет к нему много клиентов.