Semantiskais pret nesemantisko CSS: CSS ietekmes uz tīmekļa veiktspēju kvantificēšana

Abstract

Šajā darbā tiek pētīta semantisko (BEMIT) un nesemantisko, uz lietderību orientēto (Tailwind CSS) CSS metodoloģiju ietekme uz tīmekļa veiktspēju. Izstrādāta eksperimentāla metodoloģija, lai nodrošinātu funkcionālu un vizuālu līdzvērtību, izolētu mainīgos un saglabātu kontrolētu testēšanu. Katrai pieejai izveidotas divas vizuāli identiskas produktu lapas simulētos mobilo ierīču un tīkla apstākļos. Mērījumi ietvēra CSS un HTML pārsūtīšanas apjomu, pirmās (First Contentful Paint, turpmāk - FCP) un lielākās (Largest Contentful Paint, turpmāk - LCP) satura daļas attēlošanas laiku. Rezultāti rāda, ka Tailwind CSS samazināja CSS apjomu par 49% un uzlaboja FCP par 7–9% un LCP par 3–9%, salīdzinot ar BEMIT. Lai šos secinājumus varētu attiecināt uz plašāku tīmekļa projektu klāstu, nepieciešami papildu pētījumi.

This paper examines the impact of semantic (BEMIT) and non-semantic, utility-first (Tailwind CSS) CSS methodologies on web performance. An experimental methodology was developed to ensure functional and visual equivalence, isolate variables, and maintain controlled testing. Two visually identical product pages for each paradigm were tested under simulated mobile device and network conditions. Measurements included CSS and HTML transfer size, First Contentful Paint (FCP), and Largest Contentful Paint (LCP). Results show that Tailwind CSS reduced CSS payload by 49% and improved FCP by 7–9% and LCP by 3–9% compared to BEMIT. Further research is needed to apply these findings to a broader range of web projects.