[3.3] Самый лёгкий стиль

[romeo_piter]

Я правильно понимаю, что самый лёгкий стиль в плане нагрузки, особенно в адаптивном виде - это штатный просильвер без css правок?

Стили на базе просильвера типа профлэт и тому подобных уже тяжелее как минимум потому что переопределяет цсс и шрифты.

Все верно?

[ReXtor]

тяжелее как минимум потому что переопределяет цсс и шрифты

Нет. Штатные цсс и шрифты от просильвера не грузятся, если стиль на его основе самодостаточен.

[romeo_piter]

Вот как. Я думал все стили подтягивают стайлшит от просильвера, а уже потом частично переписывают...
Какой тогда стиль самый простой, минималистичный?

[Татьяна5]

romeo_piter, ИМХО: basic. Изначально "заточен под телефоны", так что очень лёгкий, но в результате он вообще не для мониторов ПК более-менее большого размера (20'' - уже неудобно)

[ReXtor]

все стили подтягивают стайлшит от просильвера, а уже потом частично переписывают...

Это было бы крайне ужасно и хорошо что это не так. CSSы тянутся те, которые в стиле пропишут в overall_header.html. Например:

Код: Выделить всё

<!-- IF S_ALLOW_CDN -->
<script>
	WebFontConfig = {
		google: {
			families: ['Oxygen:400,700&subset=latin-ext']
		}
	};

	(function(d) {
		var wf = d.createElement('script'), s = d.scripts[0];
		wf.src = 'https://cdn.jsdelivr.net/npm/webfontloader@1.6.28/webfontloader.min.js';
		wf.async = true;
		s.parentNode.insertBefore(wf, s);
	})(document);
</script>
<!-- ENDIF -->
<link href="{T_FONT_AWESOME_LINK}" rel="stylesheet">
<link href="{T_STYLESHEET_LINK}" rel="stylesheet">

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
	<link href="{T_THEME_PATH}/bidi.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->

<!-- IF S_PLUPLOAD -->
	<link href="{T_THEME_PATH}/plupload.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->

<!-- IF S_COOKIE_NOTICE -->
	<link href="{T_ASSETS_PATH}/cookieconsent/cookieconsent.min.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->

<!--[if lte IE 9]>
	<link href="{T_THEME_PATH}/tweaks.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<![endif]-->

<!-- IF $ROUND_AVATARS -->
	<link href="{T_THEME_PATH}/round_avatars.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->

<!-- EVENT overall_header_head_append -->

{$STYLESHEETS}

<!-- EVENT overall_header_stylesheets_after -->

Где <link href="{T_STYLESHEET_LINK}" rel="stylesheet"> - основной CSS стиля:

Код: Выделить всё

<link href="./styles/prolight/theme/stylesheet.css?assets_version=621" rel="stylesheet">

а {$STYLESHEETS} - CSSы расширений:

Код: Выделить всё

<link href="./ext/alfredoramos/markdown/styles/all/theme/css/common.min.css?assets_version=621" rel="stylesheet" media="screen" />
<link href="./ext/alfredoramos/markdown/styles/prosilver/theme/css/markdown.min.css?assets_version=621" rel="stylesheet" media="screen" />

Так как все расширения имеют либо all, либо стилизацию для prosilver, то стили создающиеся на основе prosilver должны иметь наименования селекторов из prosilver, либо для расширения необходимо создавать отдельные CSS под нужный стиль.

Также замечено что не малое количество стилей позиционирующие себя как "созданные на основе prosilver" на самом деле таковыми не являются (другие наименования селекторов, другой принцип построения структуры и тд). Например, созданы вообще на базе какого-нибудь bootstrap. Это может доставить не мало проблем.

[Nekstati]

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

Менее тяжёлые стили - это те, которые не загружают собственные шрифты, не имеют анимаций и картинок в шапке на 1 МБ. Но это не значит, что они лёгкие.

[KEMnEP]

Если уж говорить на прямоту, тут вовсе используются уже устаревшие технологии (много лет прошло, много расширений, если всё переделать, то и расширения касаемые графики придётся пилить и о-го-го как переделывая).
Первое, избавляться от джеквери, js всё тоже самое может без доп загрузки большой библиотеки.
Второе, js адаптивность, прошлый век, нынче медиа запросы самой css всё это решают ещё на ранних стадиях "конвейера" прорисовки страницы.
Третье. Всё нужно минимизировать, а это не удобно для последующей разработки расширений (аля css и html в одну строчку, но это ещё легко восстановить, а вот js наименование переменных обфусцированное и сведённое к минимум буквам уже затруднительно.)
Четвёртое, перевести всё изображения на webp.
Но это уже будет совсем другой форум....

Отправлено спустя 6 минут 47 секунд:
Пс: ах да, и всё это сведёт на нет какая нить реклама встроенная в сайт или метрика

[ReXtor]

очень тяжёлые

Да там и тот факт что файлов стилей целая пригоршня тоже влияет. Вместо одного запроса на подгрузку CSS мы имеем их много на каждую строку @import`а.

для адаптивности используют JavaScript

Как и сказал KEMnEP выше, это довольно устаревшее явление.

responsive.css в prosilver с @media-запросами присутствует, но судя по всему адаптивность в него добавлялась еще до активного использования функционала CSS и некоторый функционал так и остался в виде JS. Тот же Makes breadcrumbs responsive и другие.

Лично я для себя загорелся идеей создать свой собственный стиль и максимально на CSS. Просто так, ради интереса. Если не брошу эту затею - когда-нибудь может быть покажу и расскажу

[KEMnEP]

Да там и тот факт что файлов стилей целая пригоршня тоже влияет. Вместо одного запроса на подгрузку CSS мы имеем их много на каждую строку @import`а.

На самом деле с http 2.0 установленном на сервере это уже не шибко важно, если вы конечно не в метро с очень плохой связью Хотя да, конкатенация была не лишней, но как уже писал выше, это не шибко удобно для последующей разработки сторонней.

[ReXtor]

если вы конечно не в метро с очень плохой связью

В РФ еще предостаточно мест, помимо метро, где есть "проблемы со связью". Ну и в целом, забивать на оптимизацию, как делают это всякие VK и прочие гиганты - дурной тон.

[KEMnEP]

Лично я для себя загорелся идеей создать свой собственный стиль и максимально на CSS

сейчас только этим и занимаюсь (не для форумов правда), https://evklid.kemnep.ru/ вот как пример вся адаптивка на css, даже шрифты минимизированные, убраны лишние знаки и языки

[romeo_piter]

Тестирую сейчас стили на новом домене. Самое забавное, что стили Трушкина дают по PageSpeed Insights на чистой установке почти 100 производительности в моб. версии. Просилвер дает чуть более 80. Стиль, который стоит у меня на старом форуме дает 60 :shock:

ИМХО: basic. Изначально "заточен под телефоны", так что очень лёгкий

Из протестированных стилей он действительно дает самые красивые цифры. Но страшненький, зараза.

[Nekstati]

стили Трушкина дают по PageSpeed Insights на чистой установке почти 100 производительности в моб. версии. Просилвер дает чуть более 80.

Объективная разница между ними:
prosilver: 15 файлов CSS
basic: 2 файла CSS
Других отличий, влияющих на производительность, нет. Скрипты у basic даже немного тяжелее, общий объём загружаемых файлов больше на 10%, и то, что я писала выше о тяжёлой прогрузке меню и кнопок, тоже не отличается от prosilver. Так что похоже, всё дело в раздробленной CSS. Вероятно, можно в любом стиле склеить все файлы CSS в один (как сделано у Трушкина) и получить похожее улучшение цифр.

[Siava]

У меня стиль на основе prosilver. Куча css, более сотни расширений.
На списке форумов 86 попугаев на мобильных устройствах и 96 на ПК. Стиль нифига не лёгкий, реклама яндекса тоже присутствует. Что я делаю не так?)

[rxu]

Могут разные сервера по-разному отдавать файлы css (быстрее/медленнее)? В зависимости от настроек, например.