Мінімізація HTML коду і CSS-JS файлів на сайті

Минимизация HTML кода и CSS-JS файлов на сайте

HTML (від англ. HyperText Markup Language - «мова гіпертекстової розмітки») - стандартизований мову розмітки документів у Всесвітній павутині. Більшість веб-сторінок містять опис розмітки на мові HTML (або XHTML). Мова HTML інтерпретується браузерами; отриманий в результаті інтерпретації форматований текст відображається на екрані монітора комп'ютера або мобільного пристрою.

Мова HTML є додатком SGML (стандартної узагальненої мови розмітки) і відповідає міжнародному стандарту ISO 8879. Мова XHTML є більш суворим варіантом HTML, він слідує всім обмеженням XML і, фактично, XHTML можна сприймати як додаток мови XML до області розмітки гіпертексту. У всесвітній павутині HTML-сторінки, як правило, передаються браузерам від сервера по протоколам HTTP або HTTPS, у вигляді простого тексту або з використанням шифрування.

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

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

Минимизация HTML кода и CSS-JS файлов на сайте

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

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

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

 <? Php
 / *
 * HTML-мінімізація
 * /
 ob_start ();
 ?>

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

 <? Php / * * HTML-мінімізація * / $ out = ob_get_clean ();  $ Out = preg_replace ( '/ (?! [^ <] * <\ / Pre>) [\ n \ r \ t] + /', "\ n", $ out);  $ Out = preg_replace ( '/ {2} /', '', $ out);  $ Out = preg_replace ( '/> [\ n] + /', '>', $ out);  echo $ out;  ?>

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

Що відносно підключених JS і CSS файлів, а також їх включень в код, який вставлені відповідно в тегах <script> </ script> і <style> </ style>, залишаються мінімізованими (можете побачити це в исходнике сторінок блогу).

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

Мінімізація CSS-файлів і JS-файлів за допомогою Minify

Минимизация HTML кода и CSS-JS файлов на сайте

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

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

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

  • Копіюємо папку / min / в корінь свого сайту.
  • Відкриваємо файл /min/config.php в текстовому редакторі і в рядку $ min_enableBuilder = false; міняємо false на true.
  • Заходимо за адресою http: // ваш_сайт / min / builder / і вводимо логін і пароль admin. Відкриється інструмент для отримання посилань на файли, пропущені через мінімізатор.
  • Вказуємо відносні шляхи до потрібних файлів, натискаємо «Update» і отримуємо посилання на мінімізовані версії.
  • Після того, як отримали всі необхідні посилання, краще закрити доступ до билдер. Для цього в config.php назад міняємо true на false в рядку $ min_enableBuilder = true; .

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

наприклад:

  • Вихідний файл - http://www.shram.kiev.ua/templates3/css/style.css
  • Угруповання в groupsConfig.php: 
     return array (
  'Style.css' => array ( '// templates3 / css / style.css'),
 );
  • Результат - http://www.shram.kiev.ua/min/f=/templates3/css/style.css

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

Via dimox.name & wiki