28 Июн
Веб-разработчики и дизайнеры часто сталкиваются с проблемой скорости загрузки сайта. Существует множество способов ускорить веб-страницу, и одним из них является минификация CSS, HTML и JS файлов. Минификация — это процесс удаления избыточных данных, таких как пробелы, комментарии и хорошо читаемые имена переменных.
WordPress: Минификация CSS, HTML и JS файлов с помощью PHP кода
Минифицированные версии кода (HTML, CSS, JavaScript) обычно на 48% меньше по размеру. В некоторых случаях минификация может уменьшить размер файла на 60%. Например, разница между оригинальной и минифицированной версией библиотеки jQuery/JavaScript составляет 176 КБ. Это сокращает время загрузки веб-страниц, уменьшает использование трафика и улучшает скорость и доступность сайта.
В этом руководстве мы покажем, как минифицировать WordPress с помощью простой PHP-функции. Добавьте приведённый ниже код в файл functions.php вашей темы, или, если вы используете дочернюю тему, добавьте его в child-theme/functions.php.
Шаг 1: Создание класса
Вы можете создать отдельный файл для класса и подключить его в functions.php, либо же просто можете вставить код целиком прямо в functions.php вашей темы.
class WP_HTML_Compression {
protected $wp_compress_css = true;
protected $wp_compress_js = true;
protected $wp_info_comment = true;
protected $wp_remove_comments = true;
protected $html;
public function __construct($html) {
if (!empty($html)) {
$this->wp_parseHTML($html);
}
}
public function __toString() {
return $this->html;
}
protected function wp_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 wp_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->wp_compress_js;
} else if (!empty($token['style'])) {
$strip = $this->wp_compress_css;
} else if ($content == '<!--wp-html-compression no compression-->') {
$overriding = !$overriding;
continue;
} else if ($this->wp_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->wp_removeWhiteSpace($content);
}
$html .= $content;
}
return $html;
}
public function wp_parseHTML($html) {
$this->html = $this->wp_minifyHTML($html);
if ($this->wp_info_comment) {
$this->html .= "\n" . $this->wp_bottomComment($html, $this->html);
}
}
protected function wp_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;
}
}Шаг 2: Вызов функций
Добавьте следующий код для инициализации минификации:
function wp_html_compression_finish($html) {
return new WP_HTML_Compression($html);
}
function wp_wp_html_compression_start() {
ob_start('wp_html_compression_finish');
}
Шаг 3: Добавление хука
Для активации минификации добавьте следующий код:
add_action('get_header', 'wp_wp_html_compression_start');Проверьте, что ваши изменения не влияют на функциональность сайта, и убедитесь, что код работает корректно на всех страницах. В случае возникновения проблем, вы всегда можете вернуть исходный код или использовать плагины для минификации.
Примеры плагинов для минификации
Хотя использование собственных функций для минификации HTML, CSS и JavaScript может быть очень эффективным, существуют также несколько популярных плагинов для минификации, которые могут облегчить эту задачу:
- Autoptimize: Этот плагин позволяет объединять, минифицировать и кэшировать скрипты и стили. Он также может оптимизировать и загружать изображения, внедрять шрифты и отложить выполнение JavaScript.
- W3 Total Cache: Один из самых популярных плагинов для кэширования в WordPress. Он включает функции для минификации HTML, CSS и JavaScript, а также множество других функций для улучшения производительности.
- Fast Velocity Minify: Этот плагин помогает улучшить скорость загрузки сайта за счёт объединения и минификации CSS и JavaScript файлов.
Отключаем лишние скрипты и стили
Как вы знаете, WordPress подгружает различные скрипты и стили в HEAD. Но учитывая тот факт что мы оптимизируем сайт и минифицируем код для быстрой загрузки, логично предположить что полезным будет и отключение не совсем нужных возможностей WP. Например, я в каждый проект, добавляю следующией код (его тоже можно кинуть в functions.php):
remove_action('wp_head', 'start_post_rel_link', 10);
remove_action('wp_head', 'adjacent_posts_rel_link_wp_head', 10);
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');
remove_action('wp_head', 'feed_links_extra');
remove_action('wp_head', 'feed_links');
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'index_rel_link');Важность минификации для SEO
Минификация HTML, CSS и JavaScript играет важную роль в улучшении SEO вашего сайта. Вот несколько причин, почему это важно:
- Ускорение загрузки страниц: Поисковые системы, такие как Google, учитывают скорость загрузки страниц при ранжировании. Чем быстрее загружается ваш сайт, тем выше вероятность, что он будет лучше ранжироваться в результатах поиска.
- Снижение отказов: Быстро загружающиеся страницы улучшают пользовательский опыт, что приводит к снижению уровня отказов. Если пользователи быстро находят то, что ищут, они с большей вероятностью останутся на вашем сайте дольше.
- Меньшая нагрузка на сервер: Минифицированные файлы занимают меньше места и требуют меньше ресурсов для загрузки, что снижает нагрузку на сервер и позволяет обрабатывать больше запросов.
Дополнительные советы по улучшению производительности сайта
Помимо минификации, существуют и другие методы, которые помогут улучшить производительность вашего сайта:
- Использование CDN (Content Delivery Network): CDN помогает ускорить загрузку вашего сайта, распределяя контент по серверам, расположенным ближе к пользователям.
- Кэширование страниц: Использование кэширования страниц позволяет сохранять статические копии вашего контента, что значительно ускоряет время загрузки.
- Оптимизация изображений: Убедитесь, что все изображения на вашем сайте оптимизированы для веба. Используйте современные форматы изображений, такие как WebP, и инструменты для сжатия изображений без потери качества.
- Асинхронная загрузка скриптов: Загрузка JavaScript файлов асинхронно или отложенно помогает предотвратить блокировку рендеринга страницы.
- Регулярное обновление: Следите за обновлениями вашей темы и плагинов, чтобы воспользоваться новыми функциями и улучшениями производительности.
Заключение
Минификация HTML, CSS и JavaScript — важный шаг в оптимизации производительности вашего сайта. Используя предложенные функции или плагины, вы можете значительно ускорить загрузку страниц, улучшить пользовательский опыт и повысить позиции в поисковой выдаче. Не забывайте использовать и другие методы оптимизации для достижения максимальной производительности вашего сайта.
Александр Сокирка
