Скрипт для сборки критических стилей

Опубликовано 25 марта, 20223 г.

Выкладываю для разработчиков скрипт для сборки необходимых стилей для страницы. Лично моему сайту он помог сократить стили почти в 2 раза.

Возможно кому-то нужно будет скрипт доработать на сохранение списка стилей не попадающие на экран или не применяемые на странице, или обработку определённых файлов.

image.png.f7d95773afc79ace78ef778f3a9b2aad.png

busCritical v0.1 - первая версия скрипта для сборки критических стилей

Спойлер

bus_critical.js

Пример работы:

var s = document.createElement('script');
s.async = true;
s.type = 'text/javascript';
s.src = 'catalog/view/theme/default/javascript/bus_critical.js';
var ss = document.getElementsByTagName('script')[0];
ss.parentNode.insertBefore(s, ss);

window.addEventListener('busCritical', function() {
	busCritical.setting['html_all'] = true;
	busCritical.setting['html_elements'] = ['font-face', 'keyframes', '*', '::after, ::before', ']'];

	setTimeout(function() {
		var start = new Date().getTime();
		var critical = busCritical.critical('body');

		if (critical) {
			busCritical.Ajax(window.location.href, {
				metod: 'post',
				data: {bus_cache_critical:critical},
				success: function(data) {
					//console.log(data);
				}
			});
		}

		var end = new Date().getTime();
		console.log('Обработка ' + (end - start)/1000 + ' сек. или ' + (end - start) + ' мс.', critical);
	}, 1);
});

busCritical v0.5+ - новая версия скрипта для сборки критических стилей и busAjax v0.3 - скрипт для возможности отправки запросов на сервер на чистом JavaScript

busCritical - сборка критических стилей для страницы на чистом JavaScript
Должно работать даже на IE9, но это неточно.

bus_ajax.js bus_critical (1).js

Установка
Подключите скрипт, установив в "<head></head>":

Пример работы:

var s = document.createElement('script');
s.async = true;
s.type = 'text/javascript';
s.src = 'catalog/view/theme/default/javascript/bus_ajax.js';
var ss = document.getElementsByTagName('script')[0];
ss.parentNode.insertBefore(s, ss);

var s = document.createElement('script');
s.async = true;
s.type = 'text/javascript';
s.src = 'catalog/view/theme/default/javascript/bus_critical.js';
var ss = document.getElementsByTagName('script')[0];
ss.parentNode.insertBefore(s, ss);

window.addEventListener('busCritical', function() {
	busCritical.setting['html_all'] = true;
	busCritical.setting['html_elements'] = ['font-face', 'keyframes', '*', '::after, ::before', ']'];

	setTimeout(function() {
		var start = new Date().getTime();
		var critical = busCritical.critical('body');

		if (critical) {
			window.addEventListener('busAjax', function() {
				busAjax(window.location.href, {
					metod: 'post',
					data: {bus_cache_critical:critical},
					success: function(data) {
						//console.log(data);
					}
				});
			});
		}

		var end = new Date().getTime();
		console.log('Обработка ' + (end - start)/1000 + ' сек. или ' + (end - start) + ' мс.', critical);
	}, 1);
});

Пример 100% работы, если хотите сделать, чтобы можно было отложить загрузку двух скриптов

Спойлер

Вариант 1

var s = document.createElement('script');
s.async = true;
s.type = 'text/javascript';
s.src = 'catalog/view/theme/default/javascript/bus_ajax.js';
var ss = document.getElementsByTagName('script')[0];
ss.parentNode.insertBefore(s, ss);

var s = document.createElement('script');
s.async = true;
s.type = 'text/javascript';
s.src = 'catalog/view/theme/default/javascript/bus_critical.js';
var ss = document.getElementsByTagName('script')[0];
ss.parentNode.insertBefore(s, ss);

var window.myCritical = function() {
	window.busCritical.setting['html_all'] = true;
	window.busCritical.setting['html_elements'] = ['font-face', 'keyframes', '*', '::after, ::before', ']'];

	setTimeout(function() {
		var start = new Date().getTime();
		var critical = window.busCritical.critical('body');

		if (critical) {
			window.busAjax(window.location.href, {
				metod: 'post',
				data: {bus_cache_critical:critical},
				success: function(data) {
					//console.log(data);
				}
			});
		}

		var end = new Date().getTime();
		console.log('Обработка ' + (end - start)/1000 + ' сек. или ' + (end - start) + ' мс.');
	}, 1);
}

window.addEventListener('busCritical', function() {
	if ('busAjax' in window) {
		window.myCritical();
	} else {
		window.addEventListener('busAjax', window.myCritical);
	}
});

Спойлер

Вариант 2

var s = document.createElement('script');
s.async = true;
s.type = 'text/javascript';
s.src = 'catalog/view/theme/default/javascript/bus_ajax.js';
var ss = document.getElementsByTagName('script')[0];
ss.parentNode.insertBefore(s, ss);

var s = document.createElement('script');
s.async = true;
s.type = 'text/javascript';
s.src = 'catalog/view/theme/default/javascript/bus_critical.js';
var ss = document.getElementsByTagName('script')[0];
ss.parentNode.insertBefore(s, ss);

window.addEventListener('busCritical', function() {
	window.busCritical.setting['html_all'] = true;
	window.busCritical.setting['html_elements'] = ['font-face', 'keyframes', '*', '::after, ::before', ']'];

	setTimeout(function() {
		var start = new Date().getTime();
		var critical = window.busCritical.critical('body');

		if (critical) {
			var myAjax = function() {
				window.busAjax(window.location.href, {
					metod: 'post',
					data: {bus_cache_critical:critical},
					success: function(data) {
						//console.log(data);
					}
				});
			}

			if ('busAjax' in window) {
				myAjax();
			} else {
				window.addEventListener('busAjax', myAjax);
			}
		}

		var end = new Date().getTime();
		console.log('Обработка ' + (end - start)/1000 + ' сек. или ' + (end - start) + ' мс.');
	}, 1);
});

То есть логика такова:

Скрипты после загрузки совершают событие, мы проверяем существование главной переменной скрипта, если нету переменной, то ждём события.

if ('busAjax' in window) {
	myAjax();
} else {
	window.addEventListener('busAjax', myAjax);
}

Обозначения параметров настроек:
busCritical.setting['html_all'] - брать в обработку все элементы страницы, если false, то будет брать элементы попадающие в поле зрения экрана;
busCritical.setting['html_elements'] - указывается массив элементов, если нужно взять из стилей;

Внимание!
Стили собирать должен только администратор сайта, не делайте генерацию критических стилей любым пользователем в целях безопасности.

Войти

Скрипт для сборки критических стилей

Рекомендуемые сообщения

Последние посетители 0

Account

Navigation

Поиск

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)