Мінімізація css- і js-файлів і html-коду на сайті

Одним з пунктів оптимізації сайту є мінімізація коду, який передається браузеру відвідувача в момент відкриття сайту. Сюди відноситься як вміст CSS-файлів і JS-файлів, так і HTML-код сторінок. Дані заходи дозволяють помітно скоротити розмір підсумкового коду і трохи прискорити завантаження сайту.

Мінімізація відбувається за рахунок видалення зайвих пробілів, табуляції і порожніх рядків. Розповім, яким чином я роблю це на своїх сайтах.

Мінімізація HTML-коду

Загляньте в вихідний код цього блогу, щоб подивитися, як це буде виглядати в результаті. Як бачите, майже весь код сторінки не відформатований і «зібраний в купу» (про те, чому «майже», буде сказано нижче).

Реалізується це за допомогою двох невеликих вставок PHP-коду. в якому використовуються регулярні вирази.

Першу частину необхідно вставити в самий початок вихідного коду вашого сайту (тобто прямо перед ):

А другу частину, навпаки, необхідно вставити в самий кінець вихідного коду сайту, тобто після тега :

При цьому вміст тега pre додано в виняток, тобто НЕ мінімізується, це необхідно для правильного відображення прикладів коду.

На жаль, я далеко не фахівець в регулярних виразах, тому в даному моєму рішенні присутній недолік - JS-код і CSS-код, який вставлений відповідно в тегах і . залишається мінімізованих (можете побачити це в исходнике сторінок блогу). Крім того, щодо мінімізації такого JS-коду є свої особливості, тому я не став ризикувати.

Мінімізація CSS-файлів і JS-файлів

Для цього я використовую чудовий безкоштовний інструмент Minify. Це PHP-додаток, яке кладеться в окрему папочку на сайті і через яке пропускаються всі необхідні файли.

Можна мінімізувати як окремі файли, так і згрупувати кілька файлів в один, тим самим скоротивши кількість запитів до сервера.

Підключається він просто:

Якщо у вас кілька файлів одного типу, то рекомендую скористатися угрупованням (для цього редагується файл /min/groupsConfig.php). У билдер, та й в самому цьому файлі показані приклади, як об'єднати декілька CSS- або JS-файлів.

До речі, навіть якщо у вас всього один файл, і ви хочете при мінімізації скоротити шлях до нього, тоді теж можна використовувати угруповання.

Наприклад, на цьому блозі я зробив так:

Є ще одна особливість Minify. яка комусь може знадобитися. На деяких серверах для коректної роботи мінімізатора необхідно в файлі .htaccess (який в папці / min /) прибрати знак # в рядку #RewriteBase / min. Я одного разу зіткнувся з цим при перенесенні сайту на інший хостинг, і дана правка мені допомогла.

На цьому все, спасибі за увагу. Сподіваюся, ця інформація виявиться для вас корисною.