Different browsers offer different performance 8 Source: Gomez Real-User Monitoring > Real users around the world > Broadband > 466M pages over 30 days > 200+ sites
Response time components 9 Critical for Web 2.0 application Server side Content delivery Rendering Outside the application - still part of our responsibility 80-90% of the end-user response time is spent on the frontend
- People stay on website longer and view more pages - People perceive business to be more trustworthy - Significantly decreased visitor frustration levels - Google uses site speed in web search ranking
- Faster responses keep users more attentive and concentrated - Some business processes require extremely fast interactions
12 End user experience 1 Automated web performance testing 2 In-depth performance analysis 3 Effective content delivery and transformation 4 Optimization examples 5 Conclusion 6
Performance metrics 13 There are two basic approaches to performance estimation
Time-driven testing – measuring absolute load time
- Time to first byte - Time to first impression - onLoad time - Fully loaded time
These tools vary in functionality, flexibility and advantages, but together provide amazing capabilities
21 Performance Ranking It’s possible just to grade web pages total performance with any general rating system or KPI’s.
22 HTTP waterfall charts Sometimes it is not unlikely to notice a problem at a glance – just with HTTP waterfall charts. Blocking issues, non-existent elements, too long requests could be found within a minute.
23 Timeline analysis Understanding of what is really going on inside of browser is a key point of page speed analysis.
25 CSS Usage Analysis Not only JS-scripts but style spreadsheets lead to performance issues. Additional analysis features provide an ability to controls the effectiveness of CSS usage
26 Optimization advices The most delicious feature of these tools is a strong possibility to get an instantaneous advice based on diverse best practices
27 End user experience 1 Automated web performance testing 2 In-depth performance analysis 3 Effective content delivery and transformation 4 Optimization examples 5 Conclusion 6
29 Available best practices Google, Yahoo! and dynaTrace specialists provide and constantly update best practices on Cache optimization Round-trip times minimization Components size minimization Parsing and rendering optimization 29
Inserting a redirect between the user and the final HTML document delays everything on the page since nothing on the page can be rendered and no components can be downloaded until the HTML document arrives.
Reference to missing resources is a time wasting process
XHR calls minimization 33
When the user navigates to the next page we request the next page via an AJAX call and refresh the DOM. This avoids a full round-trip and avoids the browser reloading the whole page.
A mistake that is often made is that too much information is fetched dynamically with too many calls.
Component size minimization 34
Gzip is the most popular and effective compression method currently available and generally reduces the response size by about 70%.
Component size minimization 35
Minification removes unnecessary characters from a file to reduce its size, thereby improving load times.
When a file is minified, comments and unneeded white space characters (spaces, newlines, and tabs) are removed. This improves response time since the size of the download files is reduced.
Properly formatting and compressing images can save many bytes of data.
Rendering optimization 36
Moving stylesheetsto the document headelement helps pages appear to load quicker since this allows pages to render progressively.
Specifying a width and height for all images allows for faster rendering by eliminating the need for unnecessary reflows and repaints.
Effective DOM manipulation 37
Where most of these frameworks do a good job on sample web sites, some of them do not perform well on real life pages with large DOMs.
It is important to analyze the impact of visual effects on the browser’s CPU, the rendering engine and the overall web site performance.
Traditional performance testing techniques cover only smallest part of the end user experience
There are methods and tools to test, analyze and optimize websites speed
These methods don’t contradict common performance testing approaches but complement them
Do not ignore front-ends!
47 Tools Google Page Speed Tools Family http://code.google.com/speed/page-speed/ dynaTrace AJAX Edition http://ajax.dynatrace.com/ajax/en/ Yahoo! YSlow http://developer.yahoo.com/yslow/ WebPagetest http://www.webpagetest.org/ Show Slow http://www.showslow.com/ Let's Make the Web Faster http://code.google.com/intl/en-EN/speed/tools.html