Vliv renderingu webových aplikací na web vitals metrics a SEO

Lukáš Březina

Master's thesis

Web application rendering and its impact on web vitals metrics and SEO

Abstract:

V poslední dekádě v oblasti vývoje webových aplikací roste obliba tzv. client-side renderovaných aplikací. Server u těchto aplikací vrátí pouze základní HTML kostru odkazující na javascriptovou aplikaci, pomocí které se již stáhnou potřebná data a vykreslí požadovaný obsah stránky. Tento přístup má své výhody z hlediska interaktivnosti aplikace, ale může mít také nevýhody, zejména v oblasti výkonnosti aplikace na slabších zařízeních a ztížené či problémové indexaci webu internetovými vyhledávači. Tento problém se snaží řešit další přístupy k renderingu webových aplikací. U těchto jednotlivých druhů renderingu jsou teoreticky popsána jejich specifika a vliv jejich volby na výkonnost a indexovatelnost aplikací. Tato tvrzení však nebývají podložena měřeními na konkrétních aplikacích. V této práci jsou shrnuty možnosti, jak lze v současnosti renderovat webové aplikace. Tato problematika je řešena nejen z teoretického, ale i z praktického hlediska. Při realizaci práce byly navrženy a naimplementovány dvě reprezentativní webové aplikace za použití čtyř druhů renderingu – server rendering, client-side rendering, server-side rendering a prerendering. Za využití těchto aplikacích jsou dané druhy renderingu měřeny, porovnány a vyhodnoceny v oblasti výkonnosti a přizpůsobivosti pro webové vyhledávače. Porovnána je také náročnost implementace daných přístupů. Další přidanou hodnotou této práce je pak jedna z testovacích aplikací – aplikace elektronické farní sbírky, která je reálně používána, a díky které bylo možno měřit výkonnost jednotlivých druhů renderingů v reálném provozu.

Abstract:

In the last decade, the popularity of client-side rendered applications has been rising in the field of web application development. In these applications, the server returns only a basic HTML skeleton that points to a javascript application, that obtains the needed data and renders the desired page content. This approach has its advantages, especially in application interactivity, however it could have some disadvantages too – whether in worse performance when using less powerful devices or whether in more difficult and problematic content indexing by search engines. Other approaches to web application rendering attempt to address this problem. For these approaches, while the specifics of these renderings and the subsequent impact on performance and indexability are described in theory, their comparison on real-world applications is lacking. This thesis summarizes how web applications can be rendered. This problem is addressed on both theoretical and practical level. As a part of this thesis, two representative web applications are designed and implemented using four types of rendering – server rendering, client-side rendering, server-side rendering and prerendering. These applications are then used to measure, compare, and evaluate these rendering types in terms of performance and search engine optimization. Implementation complexity between these renderings is also evaluated. Another added value of this work is one of the test applications – the parish donation application, which is being used by local parish and thanks to which it was possible to measure the performance of different types of renderings on real devices.

Keywords

client-side rendering, výkonnost, Webová aplikace, rendering, server rendering, server-side rendering, prerendering, search engine optimization

Keywords

prerendering, performance, rendering, server rendering, server-side rendering, search engine optimization, client-side rendering, web application

Language used: Czech

Date on which the thesis was submitted / produced: 24. 6. 2021

Thesis defence

• Date of defence: 14. 9. 2021
• Supervisor: Stanislav Vojíř
• Reader: Martin Sajal

Vysoká škola ekonomická v Praze

Master programme / field:
Aplikovaná informatika / Znalostní a webové technologie