A Comparison of Load-time Performance Between Client- and Server-based Responsive Web Design

Before Responsive Web Design (RWD) it was common to create fixed-width websites. In recent years the standard way of creating responsive websites is by some of the fundamental aspects of RWD on the client-side. But can it be worth using RWD with components sent from a server by detecting the device and send component-specific material as to lessen some of the resources of the page? Tests have been made for this purpose with Google Lighthouse’s performance audits in mobile and desktop mode between four almost identical websites. These tests measures which website will receive better load-time performance results viewed from an emulated smartphone with a 3G/4G connection (mobile) and an emulated desktop PC with a 10 Mbps of connection (desktop). Each website consists of two pages, one with lesser resources (< 1 MB, known as index.html), the other with larger resources (24.3 MB, known as gallery.html). All four websites are responsive and built after the main pillars of RWD. Two websites does not have any optimization while two websites have added image optimization. One of the two websites in each category, image-optimized and unoptimized, is a server-based component website. This means, it will use asynchronous calls to a server to get specific components for the specific viewport. In the tests performed, between the unoptimized websites, one client-based (CRWDu), the other server-based (SRWDu), on index.html, the CRWDu website scored best in mobile and got a slightly better result in desktop mode. On gallery.html, the SRWDu website received the best results in both modes, mobile and desktop. Between the image-optimized websites, one client-based (CRWDo), the other server-based (SRWDo), the CRWDo website on index.html, had a slightly better result in mobile and a worse result in desktop mode. On gallery.html, the SRWDo website had a much better result in both mobile and desktop mode