Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 50
> CSS: сжато в gz 46049 kB
Ничего себе у вас стилей на 45 мегабайт…
Ничего себе у вас стилей на 45 мегабайт…
А при чем тут Google? Или вы считаете все проекты на code.google.com принадлежащими гуглу?
Автор скриптов Arn Burkhoff. Добавил в статью.
А кто это такой?
plus.google.com/105200890582862986291/posts — это седовласый мудрец, который облегчил мне жизнь
Гендальф, это ты?
он самый.
Кстати, в ответ к вопросу о программировании в 50 лет.
Далеко не все указали в 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>
Статья нацелена на новичков, так как профи уже всё это делают при помощи сложных громоздких платформ.
Ну если веб-сервер, умеющий сжимать весь необходимый контент сразу — это громоздкая платформа…
Верно, nginx, при правильной настройке, умеет и минифицировать и сжимать в GZ.
Да-да, у меня как раз так и сделано. Не понимаю, на кой возиться с кучей пых-костылей сугубо для сжатия.
Он это делает на лету каждый раз или раз и навсегда, до модификации скриптов? Если да, то дайте ссылку на описание скриптов для nginx.
Какие скрипты, там всё один раз в конфиге пишется. Всё делается на лету, после чего выставляются экспайры, и всё успешно кешируется на стороне клиента.
Навскидку, статику можно пожимать примерно так, предварительно отдавая, минуя бекенд:
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;
}
Навскидку, статику можно пожимать примерно так, предварительно отдавая, минуя бекенд:
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;
}
Тьфу, мисбаттон. Забыл указать, что это для конфига виртхоста.
В самом 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 навсегда.
В самом 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 навсегда.
Налету — это дополнительная нагрузка на сервер. А при помощи скрипта, это делается один раз и потом все пользователи получают уже заранее сжатый файл.
Слово «кеширование» вы понимаете? В примере блока конфига для виртхоста указан экспайр — т.е. сколько времени nginx при совпадении чексумм будет считать файл не устаревшим.
Костыль, который предлагаете вы, имеет право на существование только при условии, что он будет использоваться где-нибудь на шареде, где нет полноценного доступа к настройкам сервера.
Костыль, который предлагаете вы, имеет право на существование только при условии, что он будет использоваться где-нибудь на шареде, где нет полноценного доступа к настройкам сервера.
Остаётся вопрос, как объединить несколько JS в один файл (+CSS) средствами nginx.
www.gethifi.com/blog/Automatic-file-minification-on-nginx — например, так.
Если разобрались с тем, как конфигурировать 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
Интересно, а вы про HTTP Keep-Alive соединения слышали?
дефолтный конфиг Apache для debian тоже сжимает
Что люди не придумают, когда есть assets pipeline (-:
Не лишним будет ввести версионность стилей и скриптов. Чтоб изменения на сайте отображались у пользователей раньше чем через год.
Как можно сделать такое без PHP? Я пишу на Java и использую google closure compiler для автоматической компиляции js при сборке проекта. Хотел бы подобную вещь для объединения js и css в один файл и сжатия.
Вот посмотрите мой .htaccess. Там есть правила для сжатия для кеширования и еще пара полезных, все с комментариями.
Для пользователей MODX Revolution есть компонент MinifyX, который склеивает и минифицирует javascript и css.
При очистке кэша сайта они генерируются заново, только если были изменения. Настраивается за 1 минуту. Кому интересно — исходный код тут.
Используются Minify_CSS_Compressor и JSMin.
Настройки сервера менять не нужно.
При очистке кэша сайта они генерируются заново, только если были изменения. Настраивается за 1 минуту. Кому интересно — исходный код тут.
Используются Minify_CSS_Compressor и JSMin.
Настройки сервера менять не нужно.
Критика должна быть конструктивная. Расскажите, как делать правильно.
Комментарий тянет на статью. Особенно на фоне основной статьи. Спасибо за развернутый ответ.
Для статики хранить на диске сжатый gzip вполне себе вариант, у nginx даже есть для этого модуль ngx_http_gzip_static_module
Что значит не нужно минифицировать свои js, вы что считаете в них нет тех же комментов как в других либах. К тому же если вы это делаете автоматизировано, через тот же closure-compiler.appspot.com/home, во время deploy, то особых телодвижений вам делать не придется. Сделать на автомате gz версию тоже проблем не составит.
Правила для gz сжатия сервером нужны, но как резервный вариант, так как проще один раз все ужать и отдавать тем же ngx_http_gzip_static_module.
Правила для gz сжатия сервером нужны, но как резервный вариант, так как проще один раз все ужать и отдавать тем же ngx_http_gzip_static_module.
Если вы говорите про контекст статьи, то я не пойму зачем вы говорите про картинки про асинхронную загрузку (для которой придется скорей всего еще и код подстроить). В статье только про css и js, для которых сделать оптимизацию перед выкладкой проекта на боевой сервер дело одной секунды. Если вы правите код на боевом сервере и вам лень, то это не есть хорошо.
> Собрать его с этим модулем
Насколько я помню он идет в стандарте.
>видимо, и при разработке по F5 предусмотреть обход этого дела
Господи, при разработке вам это зачем. Думаю мы друг-друга не понимаем, лучше будет окончить этот бесполезный диалог.
> Собрать его с этим модулем
Насколько я помню он идет в стандарте.
>видимо, и при разработке по F5 предусмотреть обход этого дела
Господи, при разработке вам это зачем. Думаю мы друг-друга не понимаем, лучше будет окончить этот бесполезный диалог.
Напишите статью о простейшей оптимизации, что и как стоит делать и что не стоит.
Из Вашего комментария лично я почерпнул достаточно, что бы знать, что гуглить. Поэтому предлагаю Вам действительно написать по этому вопросу статью. Статью.
Из Вашего комментария лично я почерпнул достаточно, что бы знать, что гуглить. Поэтому предлагаю Вам действительно написать по этому вопросу статью. Статью.
Признайтесь честно, вы не понимаете о чем говорите или не читали статью. Видно же, что вся оптимизация проходит один раз и файлы отдаются стандартными средствами сервера.
Так что про уродов и не понимающих в клиентской оптимизации вы перегибаете.
Так что про уродов и не понимающих в клиентской оптимизации вы перегибаете.
А как мобильные браузеры (opera mini, ios safari, android и прочие) дружат с форматом gzip?
Я правильно понимаю, что если надо будет изменить хотя бы одно значение переменной то придется заного генерить файл и пользователю выкачивать все это добро?
Не затронута проблема отладки сжатого и минимизированного кода, а это происходит на 90% проектах
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Как ускорить загрузку своего сайта при помощи compress.php, который объединит и сожмёт JS + CSS в Gzip