Gen Z demands instant gratification

Size: px

Start display at page:

Download "Gen Z demands instant gratification"

Rafe Arnold
6 years ago
Views:

1 1

2 After the Millennial Generation. There is no agreement on the name or exact range of birth dates. Some sources start it at the mid or late 1990s or the more widely used period starting from the mid 2000s to the present day Gen Z demands instant gratification 2

3 3

4 Chase mortage and credit card site was down for several hours on July 7 th I could not access the site for several hours and had to provide mortage info to a broker? 4

5 5

6 Do we care about our end users? Based on the amount of outages, it is concerning. 6

7 7

8 Modern applications dependent on JS do not follow the same path and the page is not loaded more than once. So initial OnLoad event completion which is used by many tools for Real user monitoring is not a good indication for response time on the page for your SPA. Many frameworks start doing activity only after the windows.onload event is triggered. We need to monitor the page for any and all network activity so that we capture any interactions(synchronous and asynchronous), but how accurate would it be? Not to reload the page is good for performance but the problem is how to measure it anymore? The browser will no longer tell you about soft navigations: SPA soft navigations may fetch: Templates Images CSS JavaScript XHRs Videos 8

9 9

10 Compression and Caching are key for Front-end optimization. And are still often missed surprisingly. 10

11 Page load was slow we started debugging the page with front-end tools on Chrome (F12 Development tools). You can also use Firebug 11

12 We can PageSpeed Insights in Chrome to find out the recommendations. We noted that compression was one of them as we had suspected 12

13 Page finish time is 9 seconds, DOM Load is 3 seconds now 13

14 14

15 You can add custom headers to check and see impact of compression Removing the accept-encoding (gzip) will bring back the uncompressed packet from the server even if the server has turned on compression. We tried this on the amazon site to see the impact next few slides 15

16 Content-Encoding = gzip 16

17 You can add custom headers to make sure the requests are getting the correct header attributes 17

18 Accept-encoding request header should accept gzip- compression. This can be setup in Firebug by adding a custom-header 18

19 290 ms with no compression 19

20 As you can see with the compression enabled you save 200 milliseconds Accept-Encoding: gzip;q=0,deflate;q=0 Key to be able to see the content-encoding response with gzip to validate response. 20

21 Minimized JS > 2 MB > 2 secs to download should have been compressed 21

22 Newyorktimes landing page has many uncompressed files why are people forgetting this? 22

23 As expected you see many uncompressed files. Again Back to basics - we cannot good performance if we forget the 2 main principles Cache and Compress! Third party domains need to be optimized makes sure your partners optimize as it would effect their business in the end. 23

24 How to enable compression Apache Web Server for various static content please include the above in your.htaccess file 24

25 Fliters to enable 25

26 Compression setup for NGINX 26

27 Tomcat will compress anything below 2 KB, but this requires more CPU cycles 27

28 28

29 When compressing caching should also be utilized as compression can be expensive. Memory may need to be enhanced as well. Calling.flush() on a compression stream will make zlib return as much output as currently possible. This may come at the cost of degraded compression quality, but can be useful when data needs to be available as soon as possible. Different compressions levels are also available: Default compression level (also zlib.z_default_compression). 0 - No compression (also zlib.z_no_compression). 1 - Fastest compression (also zlib.z_best_speed) (currently what zlib.z_default_compression points to) Best compression (also zlib.z_best_compression). The default value is zlib.z_default_compression, or

30 This specifies how much memory should be allocated for the internal compression state and is an integer in the range of 1(minimum level) and 9 (maximum level). The default value is zlib.z_default_memlevel, or 8 the higher the memory level the better the compression 29

31 30

32 31

33 "max-age" defines the amount of time a file should be cached for. The "max-age" response directive indicates that the response is to be considered stale after its age is greater than the specified number of seconds. 32

34 n above example the client automatically provides the ETag token within the If-None- Match HTTP request header, the server checks the token against the current resource, and if it has not changed returns a 304 Not Modified response which tells the browser that the response it has in cache has not changed and can be renewed for another 120 seconds. Note that we do not have to download the response once more - this saves time and bandwidth. 33

35 34

36 the choice of the right format for a particular image is a combination of desired visual results and functional requirements. As per google you need to be to select the correct image size and format for optimal performance 35

37 Do you need animation? If so, GIF is the only universal choice. GIF limits the color palette to at most 256 colors, which makes it a poor choice for most images. Further, PNG-8 delivers better compression for images with a small palette. As a result, GIF is the right answer only when animation is required. Do you need to preserve fine detail with highest resolution? Use PNG. PNG does not apply any lossy compression algorithms beyond the choice of the size of the color palette. As a result, it will produce the highest quality image, but at a cost of significantly higher filesize than other formats. Use judiciously. If the image asset contains imagery composed of geometric shapes, consider converting it to a vector (SVG) format! If the image asset contains text, stop and reconsider. Text in images is not selectable, searchable, or zoomable. If you need to convey a custom look (for branding or other reasons), use a web font instead. Are you optimizing a photo, screenshot, or a similar image asset? Use JPEG. 36

Prefer vector formats: vector images are resolution and scale independent, which makes them a perfect fit for the multi-device and high-resolution world.

38 Prefer vector formats: vector images are resolution and scale independent, which makes them a perfect fit for the multi-device and high-resolution world. Minify and compress SVG assets: XML markup produced by most drawing applications often contains unnecessary metadata which can be removed; ensure that your servers are configured to apply GZIP compression for SVG assets. Pick best raster image format: determine your functional requirements and select the one that suits each particular asset. Experiment with optimal quality settings for raster formats: don t be afraid to dial down the quality settings, the results are often very good and byte savings are significant. Remove unnecessary image metadata: many raster images contain unnecessary metadata about the asset: geo information, camera information, and so on. Use appropriate tools to strip this data. Serve scaled images: resize images on the server and ensure that the display size is as close as possible to the natural size of the image. Pay close to attention to large images in particular, as they account for largest overhead when resized! Automate, automate, automate: invest into automated tools and infrastructure that will ensure that all of your image assets are always optimized. 37

39 Single Page apps are getting more popular with the popularity comes the challenges of optimizing the applications Some of the frameworks are heavy to load (always use minified version). They can be harder to debug often as your desktop browser may be competing with resources with other apps on your system along with Anti virus scans, security scanners. 38

40 39

41 Bad experience on the first page is enough to turn off the user. Need to be careful implementing the frameworks. 40

42 As you see the angular download took 630 ms which is significant and would cause issues for end user front end performance. Below can be typed in the console to get the digest loop times, the lower the number in milliseconds the better angular.element(document.queryselector('[ngapp]')).injector().invoke(function($rootscope) { var a = performance.now(); $rootscope.$apply(); console.log(performance.now()-a); }) 41

43 From github - comparison of the most common javascript frameworks today : 42

44 43

45 44

46 Use Mutation Observers Mutation Event Listeners are very slow buggy. Mutation Observers return one callback for many changes selected nodes and elements can be listened too. 45

47 46

48 47

49 48

50 49

51 All the nodes are stored in a stream, changes are compared to last know value for updation. Depending on number of elements that need updation this could be expensive to search through the stream O(n^2) time. 50

52 51

53 52

54 HTTP/2 works over a single HTTP connection - saving on resources and time to create a new connection/destroy which makes TCP very slow. Header compression also helps with performance Server push technology also helps replacing long-polling more efficiently and providing greater security due to working over a single secure channel HTTP/2 has a caveat applications may need to redesigned rewritten to use it more effectively 53

55 54

56 Angular/SPA monitoring tools available today 55

57 Heap Dumps in Chrome can be used to debug CPU Profiler will tell most expensive methods/functions Thanks to Manuel from Akamai for these tips 56

58 Dynatrace provides a sensor for monitoring the Angular 57

59 58

60 Putting your app in the cloud does not give us autonomy to solve its performance issues. AutoScale is a misnomer as you it takes your system to scale up, and that time could be enough to break your application. It can take significant amount of time to get autoscaling setup Automation is recommended Below is the definition from wifipedia: Autoscaling, also spelled auto scaling or auto-scaling, and sometimes also called automatic scaling, is a method used in cloud computing, whereby the amount of computational resources in a server farm, typically measured in terms of the number of active servers, scales automatically based on the load on the farm. Let s say a startup has a traffic peak at 5:00PM. That traffic peak requires twelve EC2 instances, but for the most part they can get by with just two EC2 instances. They decide that in order to save costs and take advantage of their cloud s auto scaling feature, they will put their instances in an auto scaling group with a maximum size of fifteen and a minimum size of two. However, one day they get a huge peak of traffic around 10:00AM that is as high as their 5:00PM traffic but it only lasts for 3 minutes. Whether that traffic is legitimate or not, their website and application goes down. Why does their website go down if they have auto scaling? There are a number of factors. First, their auto scaling group can only add instances every five minutes by default, and it can take 3-5 minutes for a new instance to be in service. Obviously, 59

61 their extra capacity will be too late to meet their 10:00AM spike Cloud Watch is free and needs to configured with dashboards, many other commercial tools are available in AWS Also, you need to make sure you have enough load balancing capacity assuming you are using EC2 load balancing. 59

62 60

63 61

64 62

65 63

66 JSFInspector comes as a JAR that simply needs to be placed in your applications classpath. Once the JAR is available in your application, the inspector component can be used by declaring the JSFInspector namespace. The inspector component may be placed anywhere in a facelet or template It will output the number of component each type, Composite Components and also provide the lifecycle times. It can be integrated with MAVEN. 64

67 65

68 66

69 67

70 Ebay has a great success with AMP, with the below: Smart buttons These enable us to do actions like Add To Cart and Buy It Now with authentication support. Input elements User interactive elements are critical to ecommerce experiences, be they simple search text boxes or checkboxes. A/B Testing This will enable experimentation on AMP. 68

71 69

72 Courtesy of Google. Great model to provide to the developers to follow and implement as much as possible. Also be aware of Google SLOW tag for mobile searches which may deviate the users to a different website and lose market share Response (respond in < 100 ms to keep things instant) Animation 30 fps Idle - maximize main thread idle time Load - < 1 sec to keep user attention 70

73 Provides RUM as well as the synthetic monitoring. Integrates with Business Service management from the AppPulse Mobile SAAS Install SDK in the IDE and application and it will monitor app behavior with all key performance indicators of the mobile app Existing mobile app monitoring tools only measure parts of the user experience and often require time consuming code. Mobile APM with AppPulse Mobile is your answer. It measures what matters app performance in actual UI response time then gives you a single score FunDex that rates your user experience on a scale of The end result: you know where you stand and what you need to do. 71

74 72

75 Google allows you emulate multiple speeds and devices to help the testers and frontend engineers understand performance concerns over the myriad number of devices 73

76 The Waterfall diagram gives you page load times and also details on where time is spent most and can help the performance engineer debug front-end issues 74

77 75

78 76

Website Acceleration with mod_pagespeed

Website Acceleration with mod_pagespeed Joshua Marantz Google June 15, 2011 @jmarantz www.modpagespeed.com 2011 Google, Inc. All rights reserved. Velocity 2011: Faster By Default 2 Velocity 2011: Faster