Кампрэсія і аптымізацыя CSS і JS ва ўласнаручна CMS-рухавічку

Наша команда-партнер Artmisto

Кампрэсія і аптымізацыя CSS і JS ва ўласнаручна CMS-рухавічку

НЕДІЛЯ, 12 Серпня 2018 р.

Аднойчы, калі ў мяне будзе крыху больш часу, я падзялюся недзе, магчыма на utilmind.com усім сваім вопытам аптымізацыі і паскарэння працы вэб-сервак.

У мяне тут на FAVOR.com.ua собственнописный CMS-рухавічок. Вядома, гэта не занадта папулярна ў інтэрнэце, але я ўпэўнены, што не адзіных такой. Камусьці гэта можа быць карысна. А хоць бы нават і для стварэння свайго легкаважнага і хуткага рухавічка ...

Каб хоць з нечага пачаць, апішу канкрэтны план дзеянняў:

1. Настройка apache, nginx (які глынае статыку і перадае апача дынаміку), mysql, php, exim (да рухавічка не адносіцца, але можа ўплываць на працу серваке ў цэлым), і яшчэ некалькіх дробязяў.
   Асаблівая ўвага, вядома Apache і Nginx. Прыбіраем ўсё лішняе. Наладжвальны gzip-сціск ўсёй статыкі + подхватывание папярэдне сціснутага кантэнту gzip'ом.
   
2. PHP-Функ inline_script, add_script, add_scripts, з дапамогай якіх у нас усё скрыпты акуратна збіраюцца разам у патрэбных месцах.
   
3. Збор пучкоў css / js-файлаў разам, у адзін «мінімізаваць» і сціснутае gzip'ом css / js. Аўта-маніторынг змен у раз'яднаных css'ках і js'ках, з ачысткай кэша падрыхтаваных мінімізаваных і сціснутых файлаў (з дапамогай inotifywait). Перахоплівання запыту адсутных сціснутых css'ок і js'ок Хуком старонкі 404 і стварэнне іх на лёце (гл. Збор пучка css / js-файлаў разам).
   Мінімізацыя CSS і JS-файлаў адпаведна з дапамогай javascript-minifier і cssminifier . (Плюс, вядома, абавязковае максімальны сціск мінімізаваць файла GZip'ом.)
   
4. Лірычнае адступленне ... (перад кіраўніком аб малюнках ...) Развіццё добрай звычкі захоўваць SVG-выявы ў двух версіях. Захоўваць арыгінальныя (нармальна чытаныя) SVG-карцінкі ў адведзеных для архіва папках.
   Але выдаваць па рэгулярных рабочым HTTP-запытах выключна сціснуты кантэнт (сціснуты з Помазаў svgo, напрыклад, ці нават рукамі з SVGOMG ). Захоўванне публічных SVG-файлаў выключна ў мінімізаваць выглядзе + сціснутым gzip'ом з максімальнай кампрэсіяй. Прывыканне да таго, што ў нас усё статычныя SVG (а таксама XML, ICO, TXT і іншыя дробязі) захоўваюцца для публічнага доступу выключна ў .gz-файлах.
   
5. Аўта-кампрэсія малюнкаў. SVG, JPEG, PNG. Як мяркуецца, пры выкарыстанні няма каго сховішчы з арыгінальнымі файламі + т.зв. кэш-сховішчы з публічнымі файламі.
   Для кампрэсіі для пачатку выкарыстоўваем толькі самыя простыя і лёгкадаступныя інструменты.
   SVG: svgo + gzip
   PNG: optipng
   JPEG: jpegoptim
   RSS (бонус): ня мінімізуем. Я вырашыў пакінуць гэтыя XML-кі читабелными для людзей. Але на серваке ціснем gzip'ом.
   (Магчыма надаць увагу ўсталёўцы наладзе ўсіх гэтых інструментаў.)
   А таксама дэталёва распісаць ўвесь функцыянал модуля minifier.php. Функ для аўтаматычнага выкарыстання javascript-minifier'a і cssminifier'а + сціску груп файлаў gzip'ов і г.д.)
   
6. Настройка і выкарыстанне CDN. На прыкладзе ўмоўна-бясплатнага (на працягу года) Google Cloud CDN.

, css , gzip , javascript , jpegoptim , js , nginx , optipng , rss , svg , svgo , кампрэсія , мінімізацыя