此报告(如前一个)将专注于CSS的大小。我们将发现创建网站需要多少CSS。
使用这些工具,我们提取有关UI框架和外部CSS大小,样式标记CSS和内联CSS的信息,其中:
由于我们偶然发现了一些错误,同时从这些站点提取CSS代码,如重复的CSS文件或< style>标签,我们从报告中删除了它。收集的数据可能与实际数据略有不同,但它仍然足够接近,以获得关于CSS大小的“大图片”。
要使文本更具可读,术语“站点”和“主页”是指同样的信息:网站的主页。
⚠️可能由无效软件引起的报告中的任何错误都不刻意,并且应该被视为这样。
Bundesliga站点的平均页面加载〜712.69KB的CSS代码。与英超联赛报告相比,CSS代码减少了3.30%。 〜89.66%的CSS代码来自外部CSS文件,〜10%来自< style>标签,〜0.34%来自内联样式属性。与英超联赛报告相比,平均Bundesliga网站使用〜3.56%的外部CSS,来自< style&gt的CSS少39.76%。标记,且〜3.54%少于内联样式属性。
所有Bundesliga站点都使用外部CSS。 eintracht法兰克福负载近1.5MB,BorussiaMönchengladbach,FCBayernMünchen和Schalke 04使用约〜1MB。
每个Bundesliga站点都使用< style>标签。 FCBayernMünchen负载最多的CSS,287KB。以下是Schalke 04,230.07KB,Hoffenheim,229.08KB,以及229.01KB的FCKöln。具有最小且&gt的网站。标记CSS代码只计算几个字节,如Mainz 05和Hertha。
至于内联样式属性,每个人也使用它。 Union Berlin使用最多9.84KB,Arminia Bielefeld和SV Werder Bremen使用的一半,Köln至少使用422b。
根据Wappalyzer,六个站点使用UI框架。 Borussia Dortmund使用物以理为CSS。 Hoffenheim,Freiburg,Hertha,Schalke 04和Mainz 05使用引导。
根据CSS状态进行的研究,对自动启动的满意度正在下降。 2019年,52%的受访者声称他们满意,而次年,满意度降至48%。两年内对自举的兴趣占所有受访者的17%。在一年内,使用从87%降至86%,两年的意识比例为100%。
对于物质化CSS,满意度从57%下降至53%,就像利息下降到37%到29%。使用量从30%增加到33%,就像意识增加到72%到76%一样。
Bootstrap和Materialize CSS是两个最常用的框架,Bundesliga网站在此处遵循统计信息。
与六个使用UI框架的六个Bundesliga网站相比,只有三个首选联赛网站使用它们。由于Bundesliga报告中有19个站点,而21个高级联赛网站,我们可以看到Bundesliga网站更加依赖UI框架。
平均Bundesliga站点的主页加载了8个外部CSS文件,5< style>标签和30个样式属性。
Augsburg只有一个,拜耳leverkusen和联盟柏林装载两个,而Bundesliga网站则加载40个外部CSS文件。
所有Bundesliga网站使用< style>标签。 Bayer Leverkusen,BorussiaMönchengladbach,Eintracht Frankfurt,Mainz 05和Hertha使用单一< style>标签。 Bundesliga网站负载39< style>标签,而该集团的第二大在线是FCBayernMünchen,16< STYLE>标签。其他俱乐部范围为2至8<风格>标签。
每个Bundesliga站点也使用内联样式属性。 Köln,斯图加特和Wolfsburg仅使用少量风格属性,Arminia Bielefeld和SV Werder Bremen使用大约60个样式属性,而联盟柏林使用多达154个样式属性。
在另一边,在CSS文件大小方面的底部三个站点是:
即使普通甲板' S主页CSS大小比平均英超联赛略轻,仍然太大了,它仍然太大。
根据HTTParhive报告,页面上位桌面的页面所要求的所有外部样式表的转移大小千字节的总和为73.3KB,中位移动器为68.7KB。如果我们查看过去三年,CSS文件大小增加了30%以上。
每年加载更多CSS代码的趋势正在继续。 使用CSS网格和CSS变量等现代技术,应该接管CSS框架,可能会期望不同的结果。 我们当然希望在接下来的几年中是这种情况。 我们正在努力尽快发布新报告和博客帖子。