Analyzing and Improving the Loading Performance of Large-scale Websites on Mobile Devices Olavi Haapala School of Science Thesis submitted for examination for the degree of Master of Science in Technology. Espoo 31.05.2018 Supervisor Prof. Petri Vuorimaa Advisor M.Sc. Katri Selonen Copyright © 2018 Olavi Haapala Aalto University, P.O. BOX 11000, 00076 AALTO www.aalto.fi Abstract of the master’s thesis Author Olavi Haapala Title Analyzing and Improving the Loading Performance of Large-scale Websites on Mobile Devices Degree programme Master’s Programme in Computer, Communication and Information Sciences Major Computer Science Code of major SCI3042 Supervisor Prof. Petri Vuorimaa Advisor M.Sc. Katri Selonen Date 31.05.2018 Number of pages 51+4 Language English Abstract The World Wide Web (WWW) has evolved dramatically over the past few years from a collection of web documents into advanced and complex web applications. However, the increased size and complexity of modern webpages have caused a degraded user experience on mobile devices with slower connection speeds and less computing power. The focus of this thesis is on measuring and improving web performance. In addition to investigating the already available tools for analyzing web performance, a custom performance measurement setup is implemented. This thesis also introduces Progressive Web Applications (PWA): a modern way of building fast, resilient, and offline-capable web applications. The research is based on Sanoma News Delivery Platform (SNDP), which is a platform that Ilta-Sanomat and Helsingin Sanomat webpages are built on. Methods for improving web performance are introduced and a prototype PWA is built for validating whether additional caching and offline support using service workers improves the performance. The results show that the PWA in itself does not significantly improve the loading performance of the SNDP websites onmobile devices. However, other ways of improving the performance are introduced as recommended actions for improving and focusing on web performance. In conclusion, it is important to focus on mobile web performance by optimizing the Critical Rendering Path (CRP). Performance auditing tools give useful hints for how to optimize for better user experiences on low-end devices and slower network connections. Keywords Web Performance, Progressive Web Applications, Mobile Web Performance, Page Load Time, User Perceived Performance Aalto-yliopisto, PL 11000, 00076 AALTO www.aalto.fi Diplomityön tiivistelmä Tekijä Olavi Haapala Työn nimi Suurten verkkosivustojen suorituskyvyn analysointi ja parantaminen mobiililaitteilla Koulutusohjelma Master’s Programme in Computer, Communication and Information Sciences Pääaine Computer Science Pääaineen koodi SCI3042 Työn valvoja Prof. Petri Vuorimaa Työn ohjaaja DI Katri Selonen Päivämäärä 31.05.2018 Sivumäärä 51+4 Kieli Englanti Tiivistelmä Web on kehittynyt valtavasti viimeisten vuosien aikana. Alunperin se oli kokoelma dokumentteja, mutta sittemmin se on kehittynyt kokoelmaksi monimutkaisia web-sovelluksia. Modernien verkkosivujen monimutkaisuuden ja kasvaneen koon vuoksi käyttäjäkokemus tehottomammilla mobiililaitteilla ja hitaamilla verkkoyhteyksillä on huonontunut. Tämä työ keskittyy verkkosivustojen suorituskyvyn mittaamiseen ja parantamiseen. Olemassaolevien suorituskyvyn analysointityökalujen lisäksi luodaan suorituskyvyn mittaamiseen sopiva toteutus. Lisäksi tässä työssä esitellään progressiiviset web-sovellukset (PWA), moderni tapa rakentaa nopeita, suorituskykyisiä ja offline-tuella varustettuja web-sovelluksia. Tutkimuskohteena työssä on Sanoma News Delivery Platform (SNDP), joka on alusta, jolle Ilta-Sanomien ja Helsingin Sanomien verkkosivut rakentuvat. Työssä esitellään keinoja verkkosivustojen suorituskyvyn parantamiseen ja rakennetaan PWA prototyyppi, jonka avulla testataan parantaako lisätty välimuistin käyttö ja offline-tuen rakentaminen suorituskykyä. Tulokset osoittavat, että PWA itsessään ei merkittävästi paranna SNDP:n päälle rakennettujen sivustojen lataussuorituskykyä mobiililaitteilla. Työssä kuitenkin esitellään suorituskykyyn keskittyviä suositeltu- ja toimintatapoja, joilla suorituskykyä voidaan parantaa. Yhteenvetona voidaan todeta, että on tärkeää keskittyä verkkosivustojen suorituskykyyn mobiililaitteilla optimoimalla verkkosivun piirtämiseen liittyvää kriittistä polkua. Suorituskyvyn arviointityökalut antavat hyödyllisiä vinkkejä käyttäjäkokemuksen optimimoisiseen matalamman suorituskyvyn laitteilla ja hitaammilla verkköyhteyksillä. Avainsanat Verkkosivustojen suorituskyky, Progressiiviset web-sovellukset, Sivunlataussuorituskyky, Käyttäjän kokema suorituskyky v Preface First of all, I want to thank my advisor, Katri Selonen for all the support, feedback, and reviewing of this work. I also want to thank my thesis supervisor, Prof. Petri Vuorimaa for support and feedback during this work and earlier during my Bachelor’s Thesis work. Huge thanks goes also to my my employer Futurice for the possibility of attending the thesis camp. Thanks to our thesis camp advisor, Vilma Lehtinen for support and advices during the camp. It was of great help in getting the thesis done. I also want to thank all the amazing colleagues at Futurice who have been helping me and supporting me during this work. Special thanks to my mentor, Carita Niskanen for supporting me and pushing me through all this. I wish to thank my supervisor, Antti Vuorela for all the support, suggestions, and discussions especially during this work. I also want to thank our client, Sanoma, for giving me the opportunity and the topic to work on. Special thanks to Teemu Hauhia from Ilta-Sanomat for support and fruitful discussions. Finally, I wish to thank my family and friends for their support during all these years of studying. I could not have finished without the support I have received from you. P.S. I also want to mention developers at Google. Thank you for creating amazing tools for performance monitoring and evaluation as well as providing clear and detailed documentation and tips. Otaniemi, 31.05.2018 Olavi Haapala vi Contents Abstract iii Abstract (in Finnish) iv Prefacev Contents vi Abbreviations viii 1 Introduction1 1.1 Goals and Scope.............................2 1.2 Research Questions............................3 1.3 Thesis Structure..............................3 2 Background4 2.1 The Evolution of the Web........................4 2.2 Web Structure...............................5 2.3 Web Performance.............................6 2.3.1 Measuring Web Performance...................9 2.3.2 Improving Web Performance................... 14 2.4 Progressive Web Applications...................... 15 2.4.1 PWAs vs. Native Mobile Applications............. 16 2.4.2 Service Workers.......................... 18 2.4.3 Caching and Offline Support................... 19 2.4.4 Application Shell Architecture.................. 20 2.4.5 Other Features.......................... 21 2.4.6 Implementing a PWA....................... 23 vii 3 Methods 25 3.1 Evaluating Performance......................... 25 3.2 Optimizing JavaScript Delivery..................... 27 3.3 Custom Performance Testing Setup................... 27 3.4 Prototype PWA.............................. 28 4 Results 31 4.1 Selected Tools............................... 31 4.2 Initial Web Performance......................... 31 4.3 JavaScript Optimization Results..................... 34 4.4 Performance of the Prototype PWA................... 35 5 Discussion 41 5.1 Evaluating the Results.......................... 41 5.1.1 Performance Evaluation..................... 41 5.1.2 Performance Testing Setup.................... 42 5.1.3 Prototype PWA.......................... 43 5.2 Recommended Actions and Future Work................ 44 6 Conclusions 47 References 48 A Service Worker Registration 52 B An Example Service Worker File 54 viii Abbreviations AMP Accelerated Mobile Pages API Application Programming Interface CERN European Organization for Nuclear Research CPU Central processing unit CRP Critical Rendering Path CSS Cascading Style Sheet CSSOM CSS Object Model DOM Document Object Model HCI Human-Computer Interaction HTML Hypertext Markup Language HTTP Hypertext Transfer Protocol HTTPS HTTP Secure JS JavaScript JSON JavaScript Object Notation PWA Progressive Web Application RUM Real User Monitoring SEO Search Engine Optimization SNDP Sanoma News Delivery Platform SVG Scalable Vector Graphics UI User Interface URL Uniform Resource Locator WLAN Wireless Local Area Network WWW World Wide Web 1 Introduction The web has evolved from a collection of linked documents into large-scale web applications accessed with web browsers. Accessing the web from mobile or tablet devices has grown in popularity. According to the statistics by StatCounter(2018), the mobile market share has exceeded the desktop market share and is now more than 51% world wide and the tablet devices account for roughly 4% of the traffic. In Finland, the numbers are somewhat different with 34% of mobile traffic and7%of tablet traffic. In addition, network connection speeds and the performance ofmobile devices have improved over the past few years due to technological advancements and decreased hardware prices. Despite these advancements, in many cases the feeling of speed when browsing web- pages on mobile devices has not improved at a similar pace. A study by DoubleClick (2016) on 3G networks showed that 77% of mobile sites took longer than 10 seconds to load and that the average load time for webpages was 19 seconds.