Наша команда-партнер Artmisto
Компресія і оптимізація CSS і JS власноручним CMS-движку
Неділя, 12 серпня 2018 р.
Одного разу, якщо у мене буде трохи більше часу, я поділюся десь, можливо на utilmind.com всім своїм досвідом оптимізації і прискорення роботи веб-серваков.
У мене тут на FAVOR.com.ua собственнопісний CMS-движок. Звичайно, це не дуже популярно в інтернетах, але я впевнений, що не єдиних такої. Кому-то це може бути корисно. А хоч би навіть і для створення свого легкого і швидкого движка ...
Щоб хоч з чогось почати, опишу конкретний план дій:
- Налаштування apache, nginx (який хаває статику і передає Апач динаміку), mysql, php, exim (до движку не відноситься, але може впливати на роботу сервака в цілому), і ще кількох дрібниць.
Особлива увага, звичайно Apache і Nginx. Прибираємо все зайве. Налаштовуємо gzip-стиснення всієї статики + підхоплення попередньо стисненого контенту gzip'ом. - PHP-Функ inline_script, add_script, add_scripts, за допомогою яких у нас все скрипти акуратно збираються воєдино в потрібних місцях.
- Збір пучків css / js-файлів воєдино, в один «мінімізований» і стислий gzip'ом css / js. Авто-моніторинг змін в роз'єднаних css'ках і js'ках, з очищенням кеша підготовлених мінімізованих і стислих файлів (за допомогою inotifywait). Перехоплювання запиту відсутніх стислих css'ок і js'ок хуком сторінки 404 і створення їх на льоту (див. Збір пучка css / js-файлів воєдино).
Мінімізація CSS і JS-файлів відповідно за допомогою javascript-minifier і cssminifier . (Плюс, звичайно, обов'язкове максимальне стиснення минимизированного файлу gzip'ом.) - Ліричний відступ ... (перед главою про зображення ...) Розвиток хорошою звички зберігати SVG-зображення в двох версіях. Зберігати оригінальні (нормально читаються) SVG-картинки в відведених для архіву папках.
Але видавати по регулярним робочим HTTP-запитами виключно стислий контент (стиснений з допоможи svgo, наприклад, або навіть руками з SVGOMG ). Зберігання публічних SVG-файлів виключно в мінімізованому вигляді + стислому gzip'ом з максимальною компресією. Звикання до того, що у нас все статичні SVG (а також XML, ICO, TXT та інші дрібниці) зберігаються для публічного доступу виключно в .gz-файлах. - Авто-компресія зображень. SVG, JPEG, PNG. Імовірно, при використанні такого собі сховища з оригінальними файлами + т.зв. кеш-сховища з публічними файлами.
Для компресії для початку використовуємо тільки найпростіші і легкодоступні інструменти.
SVG: svgo + gzip
PNG: optipng
JPEG: jpegoptim
RSS (бонус): чи не мінімізуємо. Я вирішив залишити ці XML-ки чітабелнимі для людей. Але на серваке тиснемо gzip'ом.
(Можливо приділити увагу установці настройці всіх цих інструментів.)
А також детально розписати весь функціонал модуля minifier.php. Функ для автоматичного використання javascript-minifier'a і cssminifier'а + стиснення груп файлів gzip'ов і т.д.) - Налагодження та використання CDN. На прикладі умовно-безкоштовного (протягом року) Google Cloud CDN.
Мітки: apache , css , gzip , javascript , jpegoptim , js , nginx , optipng , rss , svg , svgo , компресія , мінімізація
