Streaming-Based Progressive Enhancement of Websites for Slow and Error-Prone Networks

This thesis aims to improve the loading times of web pages by streaming the content in a non-render-blocking way. At the beginning of this thesis, a large-scale analysis was performed, spanning all downloadable pages of the top 10.000 web pages according to the Tranco-list. This analysis aimed to gather data about the render-blocking properties of web page resources, including HTML, JavaScript, and CSS. It further gathered data about code coverage, giving insight into how much of the render-blocking code is actually used. Therefore, the structural optimization potential could be determined. Less render-blocking code will, in turn, lead to faster loading times due to requiring less data to display the page. The analysis showed that there is significant optimization potential left. On average, modern web pages are built with a combined 86.7% of JavaScript and CSS, the rest being HTML. Both JavaScript and CSS are loaded mostly render-blocking, with 91.8% of JavaScript and 89.47% of CSS loaded in this way. Furthermore, only 40.8% of JavaScript and 15.9% of CSS is used until render. This shows that, on average, web pages have significant room for improvement. The concept, which is then developed based on the results of this analysis, aims to load web pages in a new way by streaming all render-blocking content. The related work showed that multiple sub-techniques are required first, which were conceptualized next. First, an optimization and splitting tool for CSS is proposed, called Essential. This is followed by an optimization framework concept for JavaScript, consisting of Waiter and AUTRATAC. Lastly, a backward-compatible approach was developed, which allows for splitting HTML and streaming all content to a client. The evaluation showed that the streamed web page loads significantly faster when comparing FCP, content ”Above-the-Fold,” and total transfer time of all render-blocking resources of the document. For example, the case study test determined that the streamed page could reduce the time until FCP by 83.3% at 2 Mbps and the time until the last render-blocking data is transferred by up to 70.4% at 2 Mbps. Furthermore, existing streaming methods were also compared, determining that WebSockets meets the requirements to stream web page content sufficiently. Lastly, an anonymous online user questionnaire showed that 85% of users preferred this new style of loading pages

Top tools for Data Visualisation in web development : a performance first approach

The purpose of this final year project was to deliver a visualisation based solution for the game analytics company, Game Refinery. The company’s platform presents a handful of reviews for games based on features with an additional chart that shows the rank of games in stores. Due to the slowness of the charts on the platform, multiple types of performance testing mechanisms were implemented to optimize the charts and the ways the system runs them. The focal point of the thesis is testing the performance of different charting libraries based on their user friendliness, features, functionalities, customisability, architecture, scalability, compatibility and performance. The project also put emphasis on performance optimization in web development and proper implementation of data visualization in web applications

Web Performance e as plataformas de venda online

As plataformas de venda de produtos online têm estado cada vez mais presentes na sociedade e no dia a dia das pessoas, sendo vendidos produtos de várias categorias como por exemplo, de vestuário, artigos tecnológicos, decoração, alimentação, entre outros. Todo o processo de compra online pode ditar o sucesso de uma empresa, sendo crucial garantir que todos os clientes tenham uma ótima experiência de compra sem qualquer tipo de fricção, pois estes impedimentos podem fazer com que o consumidor desista da sua intenção. Como consequência, não se pode menosprezar nenhum tipo de consumidor sendo imprescindível garantir que as aplicações de venda online possam ser acedidas com o mesmo nível de qualidade em qualquer tipo de ambiente ou dispositivo. A fluidez e a usabilidade de uma aplicação podem ser afetadas por vários fatores como por exemplo, as infraestruturas de telecomunicações, a capacidades de processamento dos diferentes dispositivos móveis, entre outros. Com o intuito de atingir uma experiência de compra fluída para todos os consumidores, será necessário desenvolver um protótipo focado no desempenho e na usabilidade, sendo, por isso, necessária a pesquisa e a implementação de conceitos relacionados com estes temas. Subsequentemente, este protótipo será implementado com o auxílio de vários padrões de performance, como por exemplo: a criação de um caminho crítico para o utilizador; a separação da aplicação em diferentes secções e o carregamento assíncrono de componentes. Foram concretizados dois tipos de testes para analisar a qualidade e a eficácia do protótipo. A fim de averiguar a usabilidade da aplicação foi realizado um inquérito de modo a verificar se o público alvo sentiu algum tipo de dificuldade na interação com o protótipo desenvolvido. Adicionalmente, foi também executada uma bateria de testes de desempenho de modo a comparar a aplicação desenvolvida com outras plataformas de venda online. Por fim, esta dissertação deve realçar a importância do tema de web performance e como este está diretamente interligado com o comportamento consumidores, apresentando boas práticas de desenvolvimento que devem ser seguidas para qualquer outro tipo de projeto ou aplicação.Online sales have been increasingly more present in society and in people’s daily lives. It has become more and more common to buy an item online, whether it is clothing, consoles, decorative items or others. The user journey in e-commerce platforms can dictate the success of a company, being crucial to ensure that all customers have a seamless experience without any interference, so they don't give up on the purchase. Consequently, every user should be able to have a fluent and consistent purchase experience, being the responsibility of the ecommerce platforms to ensure every web application provides a seamless journey for every consumer. However, the user experience can be affected by external factors like network speed, the hardware capacity of processing data, among others. In order to have a fast and flawless shopping experience, it was necessary to develop a prototype with a performance vision, where it was required to have an analysis and implementation of technical concepts, such as asynchronous loading and server side rendering. More specifically, it was implemented a diversity of performance patterns like the identification of the critical path, loading of external assets asynchronously and the split of application into different segments. Furthermore, it was essential to evaluate the quality and effectiveness of the developed prototype, so it was performed two different battery tests. In the first place, it was conducted a usability survey to understand if the consumers are really having a seamless and fast purchase experience. Secondly, and by the end, it was executed a performance test with the help of an external platform to gather different metrics and compare the developed prototype against other e-commerce platforms. Lastly, this dissertation must act as awareness of the benefits of web performance and how it directly affects the consumer's behaviour, being a reference for good practices to any other web application