Оптимизация HTML-разметки в Битрикс

В процессе разработки и поддержки сайтов на платформе «1С-Битрикс» мы часто сталкиваемся с необходимостью оптимизации HTML-кода для соответствия современным стандартам. Однако при внедрении таких оптимизаций важно учитывать специфику работы системы, особенно когда речь идет о функциональности для администраторов сайта.

Проблема устаревшего синтаксиса

По умолчанию Битрикс генерирует HTML с устаревшими элементами синтаксиса:

• Закрывающие слеши в самозакрывающихся тегах (<link />, <meta />, <img />)

• Избыточные атрибуты type="text/css" и type="text/javascript"

• Устаревший атрибут language="javascript"

Хотя браузеры корректно обрабатывают такой код, он не соответствует стандартам HTML5 и вызывает ошибки при валидации.

Наше решение: полный код функции

<?php
// Добавляем обработчик события, который срабатывает после генерации контента
AddEventHandler("main", "OnEndBufferContent", "cleanHtmlTags");

/**
 * Функция очистки HTML-тегов от устаревшего синтаксиса
 * @param string &$content - ссылка на контент страницы
 */
function cleanHtmlTags(&$content) {
    global $USER;
    
    // Ключевая проверка: если пользователь администратор — не применяем очистку
    if ($USER && $USER->IsAdmin()) {
        return; // Сохраняем исходный HTML для работы визуального редактора
    }
    
    // Убираем слеши у самозакрывающихся тегов
    $content = preg_replace('/<link([^>]+)\/>/', '<link$1>', $content);
    $content = preg_replace('/<meta([^>]+)\/>/', '<meta$1>', $content);
    $content = preg_replace('/<img([^>]+)\/>/', '<img$1>', $content);
    $content = preg_replace('/<input([^>]+)\/>/', '<input$1>', $content);
    $content = preg_replace('/<br\s*\/>/', '<br>', $content);
    $content = preg_replace('/<hr\s*\/>/', '<hr>', $content);
    
    // Убираем type="text/css" у link
    $content = preg_replace('/<link([^>]+)type="text\/css"([^>]*)>/', '<link$1$2>', $content);
    $content = preg_replace('/<link([^>]+)type=\'text\/css\'([^>]*)>/', '<link$1$2>', $content);
    
    // Убираем type="text/javascript" у script
    $content = preg_replace('/<script([^>]+)type="text\/javascript"([^>]*)>/', '<script$1$2>', $content);
    $content = preg_replace('/<script([^>]+)type=\'text\/javascript\'([^>]*)>/', '<script$1$2>', $content);
    
    // Убираем language="javascript"
    $content = preg_replace('/<script([^>]+)language="javascript"([^>]*)>/i', '<script$1$2>', $content);
}
?>

Как работает этот код?

1. Регистрация обработчика

AddEventHandler("main", "OnEndBufferContent", "cleanHtmlTags");

Мы используем событие OnEndBufferContent, которое срабатывает после полной генерации HTML-кода, но перед отправкой в браузер.

2. Проверка прав администратора

if ($USER && $USER->IsAdmin()) {
    return;
}

Это критически важная часть — если пользователь администратор, мы не применяем очистку.

3. Основные замены

Удаление закрывающих слешей:

// Было: <link href="..." />  Стало: <link href="...">
$content = preg_replace('/<link([^>]+)\/>/', '<link$1>', $content);

Удаление избыточных атрибутов:

// Было: <script type="text/javascript" src="...">
// Стало: <script src="...">
$content = preg_replace('/<script([^>]+)type="text\/javascript"([^>]*)>/', '<script$1$2>', $content);

Удаление устаревшего атрибута:

// Было: <script language="javascript" src="...">
// Стало: <script src="...">
$content = preg_replace('/<script([^>]+)language="javascript"([^>]*)>/i', '<script$1$2>', $content);

Почему мы отключили оптимизацию для администраторов?

Основная причина: Визуальный редактор (bitrix:wysiwyg.editor) в Битрикс.

Визуальный редактор, используемый администраторами для редактирования контента, имеет жесткую зависимость от определенной структуры HTML. Когда мы удаляем необходимые атрибуты и изменяем структуру тегов, визуальный редактор перестает работать корректно.

Где разместить этот код?

1. В файле  bitrix/php_interface/init.php

2. В файле  local/php_interface/init.php

Результаты внедрения

После внедрения этого решения:

1. HTML-код проходит валидацию W3C без ошибок

2. Размер HTML уменьшается на 5-15% за счет удаления избыточных атрибутов

3. Визуальный редактор работает корректно для администраторов

4. Производительность сайта улучшается для обычных пользователей

Пример преобразования

До очистки:

<link href="/style.css" type="text/css" rel="stylesheet" />
<script src="/script.js" type="text/javascript"></script>
<meta name="description" content="..." />

После очистки:

<link href="/style.css" rel="stylesheet">
<script src="/script.js"></script>
<meta name="description" content="...">

Заключение

Представленное решение — это простой и эффективный способ привести HTML-код Битрикс в соответствие со стандартами HTML5, сохранив при этом полную функциональность системы для администраторов. Код легко модифицировать и расширять под конкретные нужды проекта.

Важно: Всегда тестируйте подобные оптимизации на тестовой среде перед внедрением на боевой сайт.