BX.ready(function() {
... code ...
}));
BX.defer(function() {
... code ...
});
В самом начале вставляем:
use Bitrix\Main\Page\Asset;
В нужном месте прописывает подключение:
<?php
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . "/js/fix.js");
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . "/styles/fix.css");
Asset::getInstance()->addString("<link href='http://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic' rel='stylesheet' type='text/css'>");
Asset::getInstance()->addString("<script>...</script>");
?>
В самом начале вставляем:
use Bitrix\Main\Page\AssetLocation;
В нужном месте прописывает подключение:
<?php
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . "/js/fix.js", true, AssetLocation::AFTER_JS);
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . "/styles/fix.css", true, AssetLocation::AFTER_JS);
?>
Старый способ:
$APPLICATION->SetAdditionalCss("/local/templates/chel/vendor/swiper/swiper-bundle.min.css");
$APPLICATION->AddHeadScript('/local/templates/chel/vendor/swiper/swiper-bundle.min.js');
Новый способ:
$this->addExternalCss("/local/templates/str.template/assets/css/swiper.min.css");
$this->addExternalJs("/local/templates/str.template/assets/js/swiper.min.js");
<IfModule mod_expires.c>
ExpiresActive on
# CSS
ExpiresByType text/css "access plus 1 year"
# HTML
ExpiresByType text/html "access plus 0 seconds"
# JavaScript
ExpiresByType text/javascript "access plus 6 months"
ExpiresByType application/javascript "access plus 6 months"
# Media
ExpiresByType audio/ogg "access plus 6 months"
ExpiresByType image/gif "access plus 6 months"
ExpiresByType image/jpeg "access plus 6 months"
ExpiresByType image/png "access plus 6 months"
ExpiresByType image/webp "access plus 6 months"
ExpiresByType video/mp4 "access plus 6 months"
ExpiresByType video/ogg "access plus 6 months"
ExpiresByType video/webm "access plus 6 months"
# Web fonts
ExpiresByType application/font-woff "access plus 1 year"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType font/opentype "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
</IfModule>
Вносим изменения в следующий файл /local/php_interface/init.php
В самом начале вставляем
use \Bitrix\Main\Page\Asset;
Далее вставляем:
$event_manager = Bitrix\Main\EventManager::getInstance();
$event_manager->addEventHandler('main', 'OnEndBufferContent', 'deleteKernelScripts');
function deleteKernelScripts(&$content) {
global $USER;
if (defined("ADMIN_SECTION")) {
return;
}
if (is_object($USER) && $USER->IsAuthorized()) {
$ar_patterns_to_remove = [
'/<script[^>]+?>var _ba = _ba[^<]+<\/script>/',
];
} else {
$ar_patterns_to_remove = [
'/<link.+?href="\/bitrix\/css\/main\/themes\/blue\/.+?(\.min|)\.css\?\d+".+?>/',
'/<link.+?href="\/bitrix\/js\/.+?(\.min|)\.css\?\d+".+?>/',
'/<link.+?href="\/bitrix\/components\/.+?(\.min|)\.css\?\d+".+?>/',
'/<link.+?href=".+?kernel_main\/kernel_main(\.min|)\.css\?\d+"[^>]+>/',
'/<link.+?href=".+?main\/popup(\.min|)\.css\?\d+"[^>]+>/',
'/<script.+?src="\/bitrix\/.+?kernel_main.+?(\.min|)\.js\?\d+"><\/script\>/',
'/<script.+?>if\(\!window\.BX\)window\.BX.+?<\/script>/',
'/<script[^>]+?>\(window\.BX\|\|top\.BX\)\.message[^<]+<\/script>/',
'/<script[^>]+?>var _ba = _ba[^<]+<\/script>/',
'/<script[^>]+?>.+?bx-core.*?<\/script>/',
'/<script[^>]*?>[\s]*BX\.(setCSSList|setJSList)[^<]+<\/script>/',
'#<script[^>]*?>[^<]+BX\.ready[^<]+<\/script>#',
];
}
$content = preg_replace($ar_patterns_to_remove, "", $content);
$content = preg_replace("/\n{2,}/", "\n", $content);
}
Из-за этих строк будет ошибка в консоле про BX:
'/<script.+?src=".+?js\/main\/core\/.+?(\.min|)\.js\?\d+"><\/script\>/',
'/<script.+?src="\/bitrix\/js\/.+?(\.min|)\.js\?\d+"><\/script\>/',
<?php
$renderImage = CFile::ResizeImageGet( $arResult["BACKGROUND_IMAGE"]["ID"], Array("width" => 220, "height" => 310), BX_RESIZE_IMAGE_EXACT, true);
?>
<img src="<?= $renderImage["src"] ?>" width="<?= $renderImage["width"] ?>" height="<?= $renderImage["height"] ?>" alt="<?=$arItem["NAME"]?>" />
$arItem["PREVIEW_PICTURE"]["ID"]$arResult["BACKGROUND_IMAGE"]["ID"]Отресайзенные картинки попадут в папку "/upload/resize_images" и сами применятся в шаблоне.
Модуль автоматически размечает изображения на странице в тегах img под отложенную загрузку атрибутом loading="lazy", и отложенная загрузка происходит без использования JS.
Это облегченная версия модуля LazyLoad, которая работает только с изображениями в тегах img. Преимуществом этой версии является то, что здесь не используется Javascript для реализации ленивой загрузки, а используется атрибут loading="lazy" (введён в 2019 году), благодаря которому браузер самостоятельно производит ленивую загрузку. Такой механизм позволяет не терять баллы Google Page Speed за счёт дополнительного времени на загрузку и исполнение Javascript и является самым эффективным с точки зрения использования ресурсов браузера.
Модуль бесплатный
Модуль конвертации изображений формата jpeg, jpg, png, bmp, gif в формат webp, что позволяет уменьшить размер изображений на странице, в идеале...
Модуль требует наличия GD-библиотеки и модуля EXIF для php (по умолчанию присутствует на серверах), модуль автоматически подменяет изображения на сконвертированные в webp-формате.
Оригинальные изображения не изменяются. Все созданные webp-изображения помещаются в директорию по умолчанию — /upload/webp/.
Важно! Модуль не работает при отложенной загрузке изображений, например, при ajax.
Модуль бесплатный
Добавление поддержки тега <source>:
Чтобы webp работал в тегом <source>нужно немного поправить код модуля, файл находится в: /bitrix/modules/catart.webp/lib/Main.php
Находим:
$images = $output->find('img');
Заменяем на:
$images = $output->find('img, source');
Внутри цикла foreach ($images as $image) {
Находим:
if ($image->hasAttribute('src')) {
$imagesLinks[] = trim($image->getAttribute('src'));
}
Добавляем:
if ($image->hasAttribute('srcset')) {
$imagesLinks[] = trim($image->getAttribute('srcset'));
}
Модуль сжимает HTML код отображаемой страницы, что приводит к уменьшению веса страница — это положительно сказывается на загрузки сайта. Увеличение скорости загрузки сайта — из‑за меньшего веса страницы.
Модуль бесплатный