Web Performance Optimization Essentials: Episerver Solutions

1. EpiserverPerformance A-Z EpiserverDeveloperMeetup Stockholm Sep 2018 Linus Ekström – EMVP Epinova

2. About me CEO for Epinova Sweden. Previously worked 13 years at Episerver with different roles in product development. Worked last 3.5 years in Episerver partner companies.

3. Why talk about web performance? It´s all aboutusability!

5. Source: https://blog.kissmetrics.com/loading-time/

6. Bad web performance = bad business “A 1 second delay in page response can result in a 7% reduction in conversions” If an e-commerce site is making $100,000 per day, this could potentially mean a loss of sales of $2.5 million every year. Source: https://blog.kissmetrics.com/loading-time/?wide=1

7. Average page size is growing Source: https://speedcurve.com/blog/web-performance-page-bloat/

8. Source: https://speedcurve.com/blog/web-performance-page-bloat/

9. Desktop vs mobile usage

10. Server vs Client side performance Add description

11. Traditional measurements Time To First Byte Page Load

12. Better measurements! Time to Interactive Hero Rendering Times First Meaningful Paint “Speed Index”

13. ” The best performance metric for measuring user experience is one that measures how long the user waits before seeing this critical content.” – Tammy Everts @ Speedcurve

14. Steps to render a page Download the main document. (TTFB) Parse the document and construct the DOM tree. Parse CSS and construct CSSOM tree. Execute JavaScript. Merge DOM and CSSOM into Render Tree. Run layout and paint. https://classroom.udacity.com/courses/ud884

15. Source: Fast By Default: Modern Loading Best Practices by Addy Osmani (Slide 10).

16. Technology to help you

17. What is a CDN? Content Distribution Network. Enables faster download of static content, for instance images and scripts Offloads the web server. Distrubutes content over regions.

18. CDN Distribution

19. How a CDN Works

21. Implementing a CDN – a case study Dropped the time to load a page with 12.5%, from about 8 to 7 seconds. Increased the amount of requests per second to about the double before the server started having issues.

22. HTTP 1 vs HTTP 2 A browser downloads 6-8 requests in paralell per domain for HTTP 1. If you are using HTTP 2, you can send multiple files on the same connection. There is still a slight overhead for each separate file. Bundling client resources still make sense, but make a few bundles.

23. HTTP 1 vs HTTP 2 CDNs aresupporting HTTP2 since a fewyears back. MS Azure web appsnow support HTTP 2 - which is what Episerver DXC is using. https://imagekit.io/demo/http2-vs-http1

24. Image optimization • Mobile devices becoming more and more used. • Having optimized images should be considered a basic NFR. • Image Resizer.

25. Image optimization – devicesize

26. Image optimization - Modern file formats Cloudflare support automaticalconversionsinceearly 2017.

27. How do we address performance?

28. Where in the process should performance happen? 1/2

29. Where in the process should performance happen? 2/2

30. How to address performance

31. Layers of caching • Browser cache • CDN • Output cache • Data Cache • Database/external • service

32. Async • Lazy loading of images. • Looking up current stock from an external service. • Non critical scripts, for instancetracking scripts. • Recommended products. • Items in stock. • Stuff not neededdirectly, for instancecontactus form.

33. Preloading external resources https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

35. What about Episerver?

36. Donut Cache

37. Burst Cache • Patternthatworkswell for highlytrafficed sites with lots ofcontentchanges. • When a cache item is about to be evicted, a threadfetches new content to be cached and the old cached item is returneduntil a new version is injectedinto the cache.

38. Episerver gotchas 1/2 Minimize database calls – Use Episervers caching layer. Episerver has support for cache invalidationbetween servers for in-memorycacheditems. Minimize external requests – and always cache the ones that you are doing when possible. (hint: microcaching) Personalization WILL affect performance. Thereare different ways to tacklethis.

39. Episerver gotchas 2/2 • Avoid frequent querying of the Dynamic Data Store. • Try to keep your content tree well balanced. • Prefer Lists over ContentArea where possible. • Avoid dynamic properties whenpossible (legacy). • Avoid having controllers for blocks when possible. • Use cache for Episerver Find queries.

40. Single Page Applications Server rendering starting to become a very common pattern for JavaScript frameworks. This pattern makes it much faster to load the initial page, though still enabling the enhanced user experience that a JS-framework can give. I predictthat the viewlayerof MVC willdie over time. Whyhavetwotechnologies for the frontentlayer?

41. How to measure

42. Monitoring Tools • Passive Tools – We can use these to manually test performance • Active Tools – We use these to automatically follow performance

43. Tools – Web Page Test

44. Tools – Google Lighthouse

45. Tools - Speedcurve • Automatic tracking using Web Speed Test. • Track performance over time. • Lots of performance measurements to choose from. • Also custom API for custom tracking, for instance checkout flow.

46. Speedcurve –Performance

47. Speedcurve - No of Content Requests