«Фавориты Успеха» logo Компрессия и оптимизация CSS и JS в собственноручном CMS-движке
© FAVOR.com.ua
 
Компрессия и оптимизация CSS и JS в собственноручном CMS-движке
  

Однажды, если у меня будет чуть больше времени, я поделюсь где-то, возможно на 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.
https://favor.com.ua/ru/blogs/30102.html