Как сжимать html код, css стили и js скрипты сайта WordPress
Віталий
Доброго времени суток. 🙂
Данная статья скорее как локальное решение задачи, нежели надежное и 100% лекарство, о том, как сжать html код, css стили и js скрипты на сайте с WordPress. Имеется ввиду сжать не код внутри файлов, а код страницы на выходе. То бишь тот код, что отображается в браузере после загрузки страницы. Данный способ подойдет, если у вас нет возможности воспользоваться, например, gzip сжатием. Если вы не хотите устанавливать плагин и вам просто нужно сжать код страницы, например, чтобы Google PageSpeed перестал требовать включите сжатие или еще в каких-нибудь целях.
Решение очень простое. нужно всего лишь добавить код в файл пользовательских функций - functions.php.
class Compress_HTML {
protected $compress_css = true;
protected $compress_js = true;
protected $info_comment = true;
protected $remove_comments = true;
protected $html;
public function __construct($html)
{if (!empty($html)){$this->parseHTML($html);}}
public function __toString()
{return $this->html;}
protected function bottomComment($raw, $compressed){
$raw = strlen($raw);
$compressed = strlen($compressed);
$savings = ($raw-$compressed) / $raw * 100;
$savings = round($savings, 2);
return '<!--HTML compressed, size saved '.$savings.'%. From '.$raw.' bytes, now '.$compressed.' bytes-->';}
protected function minifyHTML($html){
$pattern = '/<(?<script>script).*?<\/script\s*>|<(?<style>style).*?<\/style\s*>|<!(?<comment>--).*?-->|<(?<tag>[\/\w.:-]*)(?:".*?"|\'.*?\'|[^\'">]+)*>|(?<text>((<[^!\/\w.:-])?[^<]*)+)|/si';
preg_match_all($pattern, $html, $matches, PREG_SET_ORDER);
$overriding = false;
$raw_tag = false;
$html = '';
foreach ($matches as $token) {
$tag = (isset($token['tag'])) ? strtolower($token['tag']) : null;
$content = $token[0];
if (is_null($tag)){
if ( !empty($token['script']) ){$strip = $this->compress_js; }
else if ( !empty($token['style']) )
{$strip = $this->compress_css; }
else if ($content == '<!--wp-html-compression no compression-->')
{$overriding = !$overriding; continue;}
else if ($this->remove_comments)
{if (!$overriding && $raw_tag != 'textarea'){
$content = preg_replace('/<!--(?!\s*(?:\[if [^\]]+]|<!|>))(?:(?!-->).)*-->/s', '', $content);}}
} else{
if ($tag == 'pre' || $tag == 'textarea'){$raw_tag = $tag;}
else if ($tag == '/pre' || $tag == '/textarea')
{$raw_tag = false;}
else{if ($raw_tag || $overriding){$strip = false;}else{$strip = true;
$content = preg_replace('/(\s+)(\w++(?<!\baction|\balt|\bcontent|\bsrc)="")/', '$1', $content);
$content = str_replace(' />', '/>', $content);}}}
if ($strip){$content = $this->removeWhiteSpace($content);}
$html .= $content;}
return $html;}
public function parseHTML($html) {
$this->html = $this->minifyHTML($html);
if ($this->info_comment){$this->html .= "\n" . $this->bottomComment($html, $this->html);}}
protected function removeWhiteSpace($str) {
$str = str_replace("\t", ' ', $str);
$str = str_replace("\n", '', $str);
$str = str_replace("\r", '', $str);
while (stristr($str, ' ')){$str = str_replace(' ', ' ', $str);}
return $str;}
}
function wp_html_compression_finish($html){return new Compress_HTML($html);}
function wp_html_compression_start(){ob_start('wp_html_compression_finish');}
add_action('get_header', 'wp_html_compression_start');
Данная функция имеет некоторые настройки, которые вы можете изменить. В самом начале кода есть следующие параметры:
protected $compress_css = true; - сжимать все css стили на странице(true - включено / false - выключено ). То бишь, если внутри страницы, где-то встречаются стили заключенные в теги <style>...</style> их выстроит в одну строку.
protected $compress_js = true; - сжимать js скрипты что встречаются на странице (true - включено / false - выключено). Если на странице будет скрипт заключенный в теги <script>...</script> он тоже будет сжат.
protected $info_comment = true; - вывод информации о сжатии (true - включено / false - выключено). Под кодом будет выводится закомментированная строка с результатами сжатия.
<!--HTML compressed, size saved 8.63%. From 115702 bytes, now 105712 bytes-->
Ее можно изменить в 15-й строке функции, если это вам нужно.
protected $remove_comments = true; - удалять комментарии в коде (true - включено / false - выключено). Если в вашем коде есть закомментированные строки с ненужным кодом или пояснениями, то их просто удалит, чтобы они не засоряли код.
Если сравнивать результаты, то изначально код выглядит примерно так:
После подключения нашей функции, весь код страницы выровняется в одну строку.
Иногда строк больше, например на моем сайте, через использование плагина, что выводит код в статьях, код разбивается на несколько строк. Но это не влияет особо на результат, ведь основная часть кода всеравно сжимается.
Использовать ли эту функцию - решать вам. Многим она покажется бессмысленной и они бы сделали иначе, то в чем-то они будут правы и об этом я написал в начале статьи. Кому будет полезной - я только рад.