Vliv vybraných vlastností a nástrojů CSS na rychlost načítání webové stránky

Vladimír Turek

Bachelor's thesis

The effect of selected CSS features and tools on web page loading speed

Abstract:

Tato bakalářská práce se věnuje analýze vlivu vybraných vlastností a nástrojů kaskádových stylů (CSS) na rychlost načítání webových stránek. Cílem práce je identifikovat klíčové CSS vlastnosti a nástroje, které mají největší dopad na dobu načítání stránky a navrhnout optimální postupy pro vývojáře webových stránek. První část práce je zaměřena na vysvětlení základních principů CSS, představení způsobu měření a analýzy rychlosti načítání webových stránek a také metrik, které se k analýze a následnému porovnávání používají. Především je kladen důraz na detailní vysvětlení celého procesu načítání webové stránky od počátku až do konce. Práce také poukazuje na význam komplexního porozumění vztahu mezi designem, funkcionalitou a výkonností v kontextu webového vývoje. V praktické části je provedena kvantitativní analýza vybraných webových stránek za použití různých CSS stylů. Metodologie testování zahrnuje měření doby načítání stránek pomocí nástrojů Google PageSpeed Insights a Chrome DevTools. V závěrečné části jsou shrnuty hlavní poznatky práce a diskutovány možné směry pro další výzkum. Tato bakalářská práce přináší ucelený pohled na vztah mezi používáním CSS a výkonností webových stránek. Klíčovým přínosem práce je poskytnutí konkrétních doporučení pro vývoj efektivnějších a rychlejších webových stránek s využitím moderních CSS technik a postupů.

Abstract:

This bachelor thesis is devoted to the analysis of the influence of selected properties and tools of Cascading Style Sheets (CSS) on the loading speed of web pages. The aim of the thesis is to identify the key CSS properties and tools that have the greatest impact on page load time and to propose optimal practices for web developers. The first part of the thesis focuses on explaining the basic principles of CSS, introducing how to measure and analyze web page load speed, as well as the metrics used for analysis and subsequent comparison. Above all, the focus is on a detailed explanation of the entire process of loading a web page from start to finish. The paper also highlights the importance of a comprehensive understanding of the relationship between design, functionality and performance in the context of web development. In the practical part, a quantitative analysis of selected web pages using different CSS styles is performed. The testing methodology involves measuring page load times using Google PageSpeed Insights and Chrome DevTools. The final section summarizes the main findings of the paper and discusses possible directions for further research. This bachelor thesis provides a comprehensive view of the relationship between CSS usage and website performance. A key contribution of the thesis is the provision of specific recommendations for developing more efficient and faster websites using modern CSS techniques and practices.

Keywords

webové stránky, optimalizace webu, měření rychlosti načítání webu, Web Vitals, webový prohlížeč, vykreslování webové stránky, CSS frameworky, CSS nástroje

Keywords

website, website optimization, website loading speed measurement, Web Vitals, web browser, website rendering, CSS frameworks, CSS tools

Language used: Czech

Date on which the thesis was submitted / produced: 17. 3. 2024

Thesis defence

• Date of defence: 24. 5. 2024
• Supervisor: Ing. Dana Vynikarová, Ph.D.
• Reader: David Buchtela, Ph.D.

Czech University of Life Sciences Prague

Faculty of Economics and Management

Bachelor programme:
Informatics