1. Episerver Performance A-Z
Episerver Developer Meetup 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 about usability!
Will be replaced with another image.

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:

7. Average page size is growing
Image from
Source:

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

9. Desktop vs mobile usage
Add image over market share

10. Server vs Client side performance
Add description
Source: New Relic Add pointers to the server and client parts

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 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.

15. JavaScript parsing costs can differ significantly
JavaScript parsing costs can differ significantly. From Fast By Default: Modern Loading Best Practices by Addy Osmani (Slide 10).
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.
Add data for Hansapost CDN test?

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 are supporting HTTP2 since a few years back.
MS Azure web apps now support HTTP 2 - which is what Episerver DXC is using.
p2-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 – device size

26. Image optimization - Modern file formats
Cloudflare support automatical conversion since early 2017.

27. How do we address performance?

28. Where in the process should performance happen? 1/2
Add image showing performance in every step

29. Where in the process should performance happen? 2/2
Add image showing performance in every step

30. How to address performance
Create image?

31. Layers of caching Browser cache CDN Output cache Data Cache
Database/external
service
Replace with image

32. Async Lazy loading of images.
Looking up current stock from an external service.
Non critical scripts, for instance tracking scripts.
Recommended products.
Items in stock.
Stuff not needed directly, for instance contact us form.

33. Preloading external resources
US/docs/Web/HTML/Preloading_content
Improve slide

35. What about Episerver?

36. Donut Cache

37. Burst Cache
Pattern that works well for highly trafficed sites with lots of content changes.
When a cache item is about to be evicted, a thread fetches new content to be cached and the old cached item is returned until a new version is injected into the cache.

38. Episerver gotchas 1/2
Minimize database calls – Use Episervers caching layer.
Episerver has support for cache invalidation between servers for in- memory cached items.
Minimize external requests – and always cache the ones that you are doing when possible. (hint: microcaching)
Personalization WILL affect performance. There are different ways to tackle this.

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 when possible (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 predict that the view layer of MVC will die over time. Why have two technologies for the frontent layer?

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

52. New Relic

53. New Relic

54. Key take aways Good Performance does not happen by itself
Performance bottlenecks is moving more and more to the client

55. Resources https://classroom.udacity.com/courses/ud884
guides/CMS/caching/
guide/episerver-caching/episerver-caching-the-output-cache-explained
guides/CMS/initialization/

56. Some Twitter accounts worth following
@igrigorik

57. Thank you! Linus.ekstrom@epinova.se @linusekstrom