Как минимизировать HTML в WordPress

Если Вы знакомы с сайтостроением, то должны понимать, что результат работы каждой страницы сайта — это сгенерированный HTML-код. Именно таким образом веб-браузер “понимает”, что и как отображать конечному пользователю. Понятно, что чем меньше этого кода, тем быстрее посетитель сайта увидит содержимое страницы. Специально для этого существует такое понятие, как минимизация HTML, цель которой — уменьшить количество символов за счет удаления пробелов, символов табуляции, переносов строк и т.п.

Как минимизировать HTML в WordPress?

Благо, для системы WordPress существует огромное количество возможностей решить эту задачу. Рассмотрим наиболее популярные среди пользователей, использующих “движок”.

Способ 1. Плагины

Для HTML-минификации разработано и успешно используются огромное количество WordPress-плагинов, которые отличаются лишь простотой и количеством настроек.

Плагин Minify HTML

Бесплатный плагин Minify HTML корректно сжимает HTML-код, удаляя из него не только вышеперечисленные элементы, но также ненужные теги, относительные схемы и домены из ссылок. После того, как он был установлен и активирован, следует перейти в админ-раздел Настройки -> Minify HTML, где в опции Minify HTML отметить пункт Enable и нажать кнопку Сохранить изменения.

В итоге исходный код любой из страниц сайта будет иметь следующий вид:

Плагин Autoptimize

Не менее популярным является плагин Autoptimize и также имеет все необходимые возможности для HTML-минификации. Для включения в нем сжатия достаточно, после установки и активации, в админ-панели перейти в раздел Настройки -> Autoptimize, отметить пункт Optimize HTML Code? и нажать кнопку Save Changes and Empty Cache.

Плагин Fast Velocity Minify

Еще один довольно популярный среди WordPress-пользователей плагин для оптимизации кода страниц — Fast Velocity Minify. Главная его особенность — это отсутствие каких-либо настроек. Плагин достаточно просто установить и активировать.

Плагин Clearfy Pro

Очередной способ включить возможность сжатия HTML-кода на сайте WordPress — это премиум-плагин Clearfy Pro. Он, помимо прочих своих полезных для сайта возможностей, также позволяет корректно минимизировать исходный код. Для этого, после его установки и активации, необходимо в админ-панели перейти в раздел Clearfy Pro, на вкладке Код активировать опцию Включить HTML минификацию и нажать кнопку Сохранить изменения.

Способ 2. Вручную

Еще один способ сжать HTML-код на Вашем WordPress-сайте — это добавить специальный PHP-код в файл functions.php активной темы.

Если Вы не знаете что такое файл functions.php, то в этом случае можете воспользоваться плагином ProFunctions.

Итак, в конец указанного файла необходимо вставить следующие строки:

class WPPlugins_HTML_Minify {
    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 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 );
    }

    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 wpplugins_html_minify_finish( $html ) {
    return new WPPlugins_HTML_Minify( $html );
}

function wpplugins_html_minify_start() {
    ob_start( 'wpplugins_html_minify_finish' );
}

add_action( 'get_header', 'wpplugins_html_minify_start' );