Дизайн та розробка сайту

Как сжимать html код, css стили и js скрипты сайта WordPress

Как сжимать html код, css стили и js скрипты сайта WordPress

Доброго времени суток. 🙂

Данная статья скорее как локальное решение задачи, нежели надежное и 100% лекарство, о том, как сжать html код, css стили и js скрипты на сайте с WordPress. Имеется ввиду сжать не код внутри файлов, а код страницы на выходе. То бишь тот код, что отображается в браузере после загрузки страницы. Данный способ подойдет, если у вас нет возможности воспользоваться, например, gzip сжатием. Если вы не хотите устанавливать плагин и вам просто нужно сжать код страницы, например, чтобы Google PageSpeed перестал требовать включите сжатие или еще в каких-нибудь целях.

Как сжимать html код, css стили и js скрипты сайта WordPress

Решение очень простое. нужно всего лишь добавить код в файл пользовательских функций - 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 - выключено). Если в вашем коде есть закомментированные строки с ненужным кодом или пояснениями, то их просто удалит, чтобы они не засоряли код.

Если сравнивать результаты, то изначально код выглядит примерно так:

После подключения нашей функции, весь код страницы выровняется в одну строку.

Иногда строк больше, например на моем сайте, через использование плагина, что выводит код в статьях, код разбивается на несколько строк. Но это не влияет особо на результат, ведь основная часть кода всеравно сжимается.

Использовать ли эту функцию - решать вам. Многим она покажется бессмысленной и они бы сделали иначе, то в чем-то они будут правы и об этом я написал в начале статьи. Кому будет полезной - я только рад.

На этом все, спасибо за внимание. 🙂

Дизайн та розробка сайту

Back to top