Компресія і оптимізація 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 , компресія , мінімізація