PWAMP - Combine technology for faster loading and improved user experience. Jesper Nyhlén Faculty of Computing Blekinge Institute of Technology SE-371 79 Karlskrona Sweden 1 This diploma thesis is submitted to the Faculty of Computing at Blekinge Institute of Technology in partial fulfillment of the requirements for the diploma degree in Software Engineering. The thesis is equivalent to 10 weeks of full time studies. Contact information: Author: Jesper Nyhlén E-mail: [email protected] ​ Faculty of Computing Internet : www.bth.se Blekinge Institute of Technology Phone : +46 455 38 50 00 SE-371 79 Karlskrona, Sweden Fax : +46 455 38 50 57 2 Introduction In this study, I will examine the load time and effect of applying a Progressive Web App Mobile Pages (PWAMP) technology against a Progressive Web App (PWA). PWAMP is a combination of Accelerated Mobile Pages (AMP) and PWA. AMP is a relatively new HTML framework created by Google and built on open source [1]. As the standard for Internet speeds increases, we also expect the load times to follow the same track. However, the requirements for what a website should do and how they should engage the user are greater than ever, making it more difficult for a web developer to maintain or improve these times as a combination to this, especially across a variety of network conditions and devices [2]. A constant search for balanced development takes place, where the goal is to show and engage its content in the most optimal way. AMP primarily works to reduce the load time for web pages. Mainly, AMP reduces the load time by excluding extensive use of Javascript and limits the user's amount of external Cascading Style-Sheet (CSS). However, the use of Google's proxy-based network (Google AMP Cache) should further improve this [1]. PWAs can offer engaging material to users and function more like a regular application, with dynamic content, push notifications, offline capability and a mobile-first principle that gives you the ability to use the mobile's functionalities [3]. There are currently three official approaches to combining these techniques [4]. ● Use AMP as the data source for your PWA. ● Use AMP as the starting point for your website to install the service worker for your progressive web app and show first content. ● Enable PWA functions for your AMP pages. The two last methods I have chosen to study further and to delve into, but also to analyze why and how we should work towards the effect that could result from such an implementation. 3 Focus Areas / Research Questions The focus of this study is on the effect of preloading a PWA using AMP and incorporating PWA like features for an AMP application, also known as PWAMP. This in addition to increasing the understanding of why load times can increase and how it can be counteracted. 1. How does a PWAMP implementation affect load times on a website? These implementations will be evaluated: a. PWA. b. AMP to PWA. c. AMP as PWA. In most cases, both AMP and PWAs are perceived as alternatives to a fast site, but in different ways and in different positions of the site. With information on this, the reader should get a better understanding of the extent to which an implementation of this type can affect the loading time within ​​ the website. Taking into account what parts of the website are affected and how much. The interesting thing is to analyze both initial loading in addition to the entire website. 2. What are the top focus areas for a decrease of a website's load time? There are many factors that affect how fast a regular website loads and for a developer it can be difficult to know where the focus should be to get the most impact. This should be reviewed to find some well-named and clear reasons for this and to give a clear picture of what the focus should be to prevent this. 3. What benefits could a business see from faster load times? Visiting a website that takes a long time to load and use can easily create frustration for the user and nothing that one wishes to experience. However, websites are often for marketing purposes and are a way to showcase their business or services. It is therefore important to find out how the company is affected directly by these times and why. It is important to note that the study is not conducted to show exact implementations on how to reduce load times in the most optimal way, but rather shows possible solutions and alternatives to improve a website's performance, which could be further improved. 4 Collect, Analyze, Evaluate RQ1. To answer the first question, three websites must be built with the same content, including in total of two pages. The difference within these sites should be the way the website is developed. One site is entirely built with Gatsby [5], while the second website uses AMP as the first page and Gatsby for the remaining structure. The third site is completely built with Google AMP. Gatsby is chosen because the author has higher experience developing in this area, and some similar implementations have been documented before. That will give more time for optimization of the development and accurate measurements. The idea is to use WebPageTest in addition to Google Lighthouse for measurements [6][12]. ​ Important metrics to measure are Load time, First contentful pain, Time to interactive, Speed index, ​​ Full load time, Requests and Application size to get a complete overview of what is being loaded and how fast. It is important that a user's pattern can be imitated in the measuring, by going from one page to another and preserving the material already loaded and seeing results even after first loading. WebPageTest can measure values by direct link to the website, but also simulate that a user comes ​​ from eg. Google, where also Google AMP Cache could be used to deepen the study. RQ2. To answer the second question of what is increasing the speed of a website and what are the reasons for a less rapid, a literature study would be relevant to analyze what data is already collected in this area and check for current recommendations. To then evaluate and compare these recommendations with studies done in the specific field. Web-based technologies and the work around this is a rapidly growing industry, which means that new information should be the focus, although historical data is still fully relevant to analyze to increase the perspective for the developer. RQ3. To answer the third question, data will be collected through a literature study. Constantly searching for lower load times can be given to create a better user experience. But the interesting thing in this case is to see what actually benefits a company more than the user experiencing a page without delay creates. What are the actual benefits that contribute to being prepared to invest in this area and that will make the money invested back in return. Companies have made study cases themselves about this area and this is data that may be relevant to collect and compare. It is then important to review the sources while comparing their relevance for most accurate analysis. Page speed effect on Search Engine Optimization (SEO) and conversion rate are areas that would be most interesting to cover. 5 Motive and Value A study done by Akamai in 2014 showed that 49% of e-commerce consumers expect a page to load in 2 seconds or less [7]. In comparison Backlinko analyzed 5.2 million websites and found out that the average page loading speed for a web page is 10.3 seconds on desktop and 27.3 seconds on mobile [8]. It is worth mentioning that the selection of web pages obviously affects the result. But it shows that improvement can be done and that this area is highly important in this day and age. The purpose of this report is to investigate and measure whether a combination of two web technologies that specialize in different areas can decrease load time while maintaining the user experience. A combination that holds the advantages of both techniques at best. With measured times, it should be easier for the user to visualize the direct effect and possibilities with an implemented method like this. A challenge will be to show the results in a simple and representative way where the difference becomes the essential, and not the actual numbers, as the content may vary on different websites deployed commercially. It is also important to structure the websites in similar ways and try to exclude as many factors as possible created by the developers implementation. The amount of web development techniques and tools is increasing just as the number of users using the web. A common way to develop is by choosing a technology stack where the front-end consists of a certain technology or framework. For developers, this research can be a good insight into a not-so-common and new method of development, by dividing your front-end into several parts for the opportunity for increased benefits. it may help a developer gain more understanding of what is causing a slow site and broaden the view of how front-end development can be implemented. With the above focus, it is also important to strengthen the understanding of why loading times are an important factor for companies we develop it for, as well as what causes this. This knowledge should be useful as a developer, even if it applies to a specific technology or aggregate factors that apply to the entire web.