Faster Loading of Websites Strategies for optimizing loading of webpage components MIKAEL RYDMARK Master’s Thesis at CSC Supervisor: Olof Hagsand Examiner: Stefan Arnborg Abstract When loading a webpage on the Internet it is desirable that it loads as quickly as possible. This master thesis presents several strategies to try and improve the response time of a webpage by optimizing the loading of its component. The tests conducted in this master thesis showed that using compression will significantly improve the response time of a webpage and using caching for static components will greatly improve the response time for repeated visits of a webpage. Referat Snabbare Laddning av Webbsidor När en webbsida laddas på Internet är det önskvärt att det går så fort som möjligt att ladda sidan. Den här rapporten redovisar flera strategier för att försöka förbättra laddningstiden för en webbsida genom att opti- mera laddningen av en webbsidas komponenter. Testen som genomförts och redovisas i rapporten visade att man kan minska laddningstiden för en webbsida signifikant genom att tillämpa komprimering. Testen visade också att man genom att cacha statiska komponenter kan spara mycket tid för återkommande besök av webbsidan. Contents 1 Introduction 1 1.1 Background . 1 1.2 Problem Statement . 2 1.3 Purpose . 2 1.4 Method . 2 1.5 Limitations . 3 1.6 Thesis Outline . 3 2 Background 5 2.1 Previous work . 5 2.2 Quality of Service . 6 2.3 HTTP - Hypertext Transfer Protocol . 6 2.3.1 Overview . 6 2.3.2 Caching . 7 2.3.3 Persistent Connections . 9 2.3.4 Compression . 10 2.3.5 Cookies . 10 2.4 Webpage Components . 11 2.4.1 HTML . 11 2.4.2 Stylesheets . 11 2.4.3 Javascript . 11 2.4.4 Images & Flash . 12 2.5 Web Browsers . 12 2.5.1 Connections . 12 2.5.2 Script Downloading Behavior . 12 2.5.3 Heuristic Expiration in Firefox . 13 2.6 Response Time . 14 2.6.1 Webpage . 14 2.6.2 Components . 14 2.7 Performance Golden Rule . 15 2.8 Loading of a Webpage . 15 3 Strategies 17 3.1 Overview . 17 3.2 Reduce the number of HTTP requests . 18 3.2.1 Image maps . 19 3.2.2 CSS sprites . 19 3.2.3 Inline images . 20 3.2.4 Combining scripts and style sheets . 20 3.3 Optimize Caching . 20 3.3.1 Use a Cache-Control or Expires header . 20 3.3.2 Make Scripts and CSS external . 21 3.3.3 Use ETags with care . 21 3.4 Reduce the size of the HTTP response . 21 3.4.1 Gzip components . 21 3.4.2 Minify JavaScript, CSS & HTML . 21 3.4.3 Optimize images . 22 3.5 Reduce the time spent waiting . 23 3.5.1 Use a Content Delivery Network . 23 3.5.2 Avoid redirects . 24 3.5.3 Flush the document early . 24 3.5.4 Reduce the number of DNS lookups . 24 3.6 Other . 24 3.6.1 Use cookie free domains when serving static content . 24 3.6.2 Put style sheets at the top . 24 3.6.3 Put scripts at the bottom . 25 3.6.4 Remove duplicate scripts . 25 4 Design of Experiment 27 4.1 Strategies Tested . 27 4.2 Test Environment . 28 4.2.1 Experimental Setup . 28 4.2.2 Test Settings . 28 4.3 Websites . 29 5 Implementation 35 5.1 CSS Sprites . 35 5.2 Combining scripts and style sheets . 35 5.3 Use a Cache-Control or Expires header . 36 5.4 Gzip Components . 36 5.5 Minify JavaScript, CSS & HTML . 36 5.6 Use cookie free domains when serving static content . 36 6 Results 37 6.1 CSS Sprites . 38 6.2 Combining scripts and style sheets . 38 6.3 Use a Cache-Control or Expires header . 39 6.4 Gzip Components . 39 6.5 Minify JavaScript, CSS & HTML . 40 6.6 Use cookie free domains when serving static content . 40 7 Evaluation & Discussion 41 7.1 CSS Sprites . 41 7.2 Combining scripts and style sheets . 41 7.3 Use a Cache-Control or Expires header . 42 7.4 Gzip Components . 42 7.5 Minify JavaScript, CSS & HTML . 42 7.6 Use cookie free domains when serving static content . 42 8 Conclusion & Future Work 45 8.1 Recommendation . 46 8.2 Future Work . 46 Bibliography 47 Appendices 50 A Mathematical statistics 51 A.1 Formulas . 51 B Complete results 53 B.1 No strategies applied . 53 B.1.1 tre.se . 53 B.1.2 3.dk . 53 B.1.3 ncc.se . 54 B.1.4 svenskaturistforeningen.se . 55 B.1.5 vasakronan.se . 55 B.2 CSS Sprites . 56 B.2.1 tre.se . 56 B.2.2 3.dk . 56 B.2.3 ncc.se . 56 B.2.4 svenskaturistforeningen.se . 57 B.2.5 vasakronan.se . 57 B.3 Combining scripts and style sheets . 58 B.3.1 tre.se . 58 B.3.2 3.dk . 58 B.3.3 ncc.se . 58 B.3.4 svenskaturistforeningen.se . 59 B.3.5 vasakronan.se . 59 B.4 Use a Cache-Control or Expires header . 60 B.4.1 tre.se . 60 B.4.2 3.dk . 60 B.4.3 ncc.se . 60 B.4.4 svenskaturistforeningen.se . 61 B.4.5 vasakronan.se . 61 B.5 Gzip Components . 62 B.5.1 tre.se . 62 B.5.2 3.dk . 62 B.5.3 ncc.se . 62 B.5.4 svenskaturistforeningen.se . 63 B.5.5 vasakronan.se . 63 B.6 Minify JavaScript, CSS & HTML . 64 B.6.1 tre.se . 64 B.6.2 3.dk . 64 B.6.3 ncc.se . 64 B.6.4 svenskaturistforeningen.se ..