imater 11 окт 2012 в 09:38

Как ускорить загрузку своего сайта при помощи compress.php, который объединит и сожмёт JS + CSS в Gzip

3 мин

61K

Серверная оптимизация*

+24

Комментарии 50

shsmad 11 окт 2012 в 09:46

> CSS: сжато в gz 46049 kB

Ничего себе у вас стилей на 45 мегабайт…

imater 11 окт 2012 в 09:54

fixed

Scratch 11 окт 2012 в 09:47

А при чем тут Google? Или вы считаете все проекты на code.google.com принадлежащими гуглу?

imater 11 окт 2012 в 09:54

Автор скриптов Arn Burkhoff. Добавил в статью.

xmdy 11 окт 2012 в 10:03

А кто это такой?

imater 11 окт 2012 в 10:05

plus.google.com/105200890582862986291/posts — это седовласый мудрец, который облегчил мне жизнь

Yazov 11 окт 2012 в 10:10

Гендальф, это ты?

imater 11 окт 2012 в 10:18

он самый.

imater 11 окт 2012 в 10:19

Кстати, в ответ к вопросу о программировании в 50 лет.

Yazov 11 окт 2012 в 10:02

Далеко не все указали в htaccess. Хотя бы вот так:

Спойлер

<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault                          "access plus 1 month"
ExpiresByType text/cache-manifest       "access plus 0 seconds"
ExpiresByType text/html                 "access plus 0 seconds"
ExpiresByType text/xml                  "access plus 0 seconds"
ExpiresByType application/xml           "access plus 0 seconds"
ExpiresByType application/json          "access plus 0 seconds"
ExpiresByType application/rss+xml       "access plus 1 month"
ExpiresByType image/x-icon              "access plus 1 week" 
ExpiresByType image/gif                 "access plus 1 year"
ExpiresByType image/png                 "access plus 1 year"
ExpiresByType image/jpg                 "access plus 1 year"
ExpiresByType image/jpeg                "access plus 1 year"
ExpiresByType video/ogg                 "access plus 1 year"
ExpiresByType audio/ogg                 "access plus 1 year"
ExpiresByType audio/mp3                 "access plus 1 year"
ExpiresByType video/mp4                 "access plus 1 year"
ExpiresByType video/webm                "access plus 1 year"
ExpiresByType text/x-component          "access plus 1 month"
ExpiresByType font/truetype             "access plus 1 year"
ExpiresByType font/opentype             "access plus 1 year"
ExpiresByType application/x-font-woff   "access plus 1 year"
ExpiresByType image/svg+xml             "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType text/css                  "access plus 2 months"
ExpiresByType application/javascript    "access plus 2 months"
ExpiresByType text/javascript           "access plus 2 months"
<IfModule mod_headers.c>
Header append Cache-Control "public"
</IfModule>
</IfModule>

ksenobayt 11 окт 2012 в 10:35

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

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

Yazov 11 окт 2012 в 10:58

Верно, nginx, при правильной настройке, умеет и минифицировать и сжимать в GZ.

ksenobayt 11 окт 2012 в 11:00

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

imater 11 окт 2012 в 11:01

Он это делает на лету каждый раз или раз и навсегда, до модификации скриптов? Если да, то дайте ссылку на описание скриптов для nginx.

ksenobayt 11 окт 2012 в 11:05

Какие скрипты, там всё один раз в конфиге пишется. Всё делается на лету, после чего выставляются экспайры, и всё успешно кешируется на стороне клиента.

Навскидку, статику можно пожимать примерно так, предварительно отдавая, минуя бекенд:

location ~* ^.+\.(css|htc|js|htm|html)$ {
root /var/www/site.ru;
gzip_static on;
expires 30d; # caching for 30 days
add_header Cache-Control private;
add_header Vary Accept-Encoding;
}

ksenobayt 11 окт 2012 в 11:07

Тьфу, мисбаттон. Забыл указать, что это для конфига виртхоста.
В самом nginx.conf до кучи нужно сделать примерно так:

gzip on;
gzip_min_length 1000;
gzip_proxied any;
gzip_vary on;
gzip_types text/plain text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable «msie6»;
gzip_comp_level 8;

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

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

imater 11 окт 2012 в 11:10

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

-1

ksenobayt 11 окт 2012 в 11:12

Слово «кеширование» вы понимаете? В примере блока конфига для виртхоста указан экспайр — т.е. сколько времени nginx при совпадении чексумм будет считать файл не устаревшим.

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

imater 11 окт 2012 в 11:08

Остаётся вопрос, как объединить несколько JS в один файл (+CSS) средствами nginx.

ksenobayt 11 окт 2012 в 11:13

www.gethifi.com/blog/Automatic-file-minification-on-nginx — например, так.

docomo 11 окт 2012 в 14:54

Если разобрались с тем, как конфигурировать nginx, запустить простой скриптец типа такого вам уже не составит труда:

cat fileuploader.js json2.js highslide.js order.js > .order.js
java -jar /data/yui/yuicompressor.jar --type js --nomunge .order.js -o order.min.js --charset utf-8
rm .order.js

tagir_valeev 11 окт 2012 в 15:24

Интересно, а вы про HTTP Keep-Alive соединения слышали?

ptalus 11 окт 2012 в 11:50

дефолтный конфиг Apache для debian тоже сжимает

ksenobayt 11 окт 2012 в 11:59

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

-4

n0ne 11 окт 2012 в 11:45

Что люди не придумают, когда есть assets pipeline (-:

TIgorA 11 окт 2012 в 11:47

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

TIgorA 11 окт 2012 в 12:00

Что-то я недосмотрел, временные метки есть, но в каком-то неочевидном месте. Обычно их приписывают как static-file.js?timestamp

Agent_J 11 окт 2012 в 12:29

Автор жжёт
code.google.com/p/cssmin/downloads/detail?name=cssmin-v3.0.1-minified.php&can=2&q=

imater 11 окт 2012 в 12:37

Меня тоже удивила данная версия. Что он пытается этим сжатием добиться?

TIgorA 11 окт 2012 в 13:16

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

Agent_J 11 окт 2012 в 13:22

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

injecto 11 окт 2012 в 15:37

Как можно сделать такое без PHP? Я пишу на Java и использую google closure compiler для автоматической компиляции js при сборке проекта. Хотел бы подобную вещь для объединения js и css в один файл и сжатия.

Claud 11 окт 2012 в 15:47

Вот посмотрите мой .htaccess. Там есть правила для сжатия для кеширования и еще пара полезных, все с комментариями.

bezumkin 11 окт 2012 в 17:12

Для пользователей MODX Revolution есть компонент MinifyX, который склеивает и минифицирует javascript и css.

При очистке кэша сайта они генерируются заново, только если были изменения. Настраивается за 1 минуту. Кому интересно — исходный код тут.
Используются Minify_CSS_Compressor и JSMin.

Настройки сервера менять не нужно.

-2

НЛО прилетело и опубликовало эту надпись здесь

Praeses 11 окт 2012 в 18:03

Критика должна быть конструктивная. Расскажите, как делать правильно.

НЛО прилетело и опубликовало эту надпись здесь

AndrewStephanoff 11 окт 2012 в 22:41

Комментарий тянет на статью. Особенно на фоне основной статьи. Спасибо за развернутый ответ.

TIgorA 11 окт 2012 в 23:23

Для статики хранить на диске сжатый gzip вполне себе вариант, у nginx даже есть для этого модуль ngx_http_gzip_static_module

НЛО прилетело и опубликовало эту надпись здесь

Claud 12 окт 2012 в 00:07

Что значит не нужно минифицировать свои js, вы что считаете в них нет тех же комментов как в других либах. К тому же если вы это делаете автоматизировано, через тот же closure-compiler.appspot.com/home, во время deploy, то особых телодвижений вам делать не придется. Сделать на автомате gz версию тоже проблем не составит.

Правила для gz сжатия сервером нужны, но как резервный вариант, так как проще один раз все ужать и отдавать тем же ngx_http_gzip_static_module.

НЛО прилетело и опубликовало эту надпись здесь

Claud 12 окт 2012 в 19:34

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

> Собрать его с этим модулем
Насколько я помню он идет в стандарте.

>видимо, и при разработке по F5 предусмотреть обход этого дела

Господи, при разработке вам это зачем. Думаю мы друг-друга не понимаем, лучше будет окончить этот бесполезный диалог.

Praeses 12 окт 2012 в 00:14

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

Claud 11 окт 2012 в 18:29

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

Так что про уродов и не понимающих в клиентской оптимизации вы перегибаете.

biozzz 11 окт 2012 в 19:52

А как мобильные браузеры (opera mini, ios safari, android и прочие) дружат с форматом gzip?

imater 11 окт 2012 в 20:50

ios точно дружит и грузит в 4 раза быстрее.

Meliborn 11 окт 2012 в 21:52

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