Performance as design - Techniques for making websites more responsive

Abstract

Websites today have to cater to a fragmented device ecosystem. Previous web design trends utilizing fixed-width layouts, aimed at desktop computer browsing, have been replaced by new approaches embracing fluidity, accessibility and context-awareness. Responsive web design is one such approach, merging desktop and mobile layouts into a single codebase. With this merger one feature is often overlooked, namely performance. In this thesis I have aimed to identify inherent performance challenges within the responsive web design paradigm. I have looked at how existing performance optimization techniques can be utilized to alleviate these challenges by comparing their effects under both mobile and desktop browsing contexts. The methods used included collection and discussion of the advantages and disadvantages of existing performance optimization techniques, as well as exploratory research through experiments. The aim of experimentation was to observe how different techniques work in a controlled setting in order to identify how performance was improved, and at which cost. The findings show that several existing techniques can be applied to improve web performance, some especially targeting responsive design and mobile use cases. However, the problem with many of these techniques is that they are workarounds for deficiencies inherent in current web protocols, markup technologies and browsers. While these workarounds can be proven to enhance web performance in certain use cases, most also possess inherent disadvantages. This emphasizes the demand for new technologies. HTTP 2.0 as well as emerging responsive image technologies are predicted as potential solutions to some of these deficiencies.