際際滷

際際滷Share a Scribd company logo
CloudOpsGuys Your Software | Our Service TM
1
CloudOpsGuys
Your Software | Our Service TM
WPO  Lessons from the Field
CloudOpsGuys Your Software | Our Service TM
(1) Some quick & dirty ways to do a WPO
PoC using automation
(2) 5 reasons why having your own
WebPageTest instance rocks!
(3) The most common WPO mistakes I see
(time and time again)
(4) Why I love APM tools and you're nuts if
you don't use one!
Agenda
3
CloudOpsGuys Your Software | Our Service TM
PoC - Do a quick example video
 There are two easy ways to get a rough
before/after web optimisation video
 Using WebPageTest Compare
 http://www.webpagetest.org/compare
 Use PageSpeedInsights
 https://developers.google.com/speed/pagespeed/in
sights
 (yes, I know one uses the other!)
CloudOpsGuys Your Software | Our Service TM
Pagespeed Insights
CloudOpsGuys Your Software | Our Service TM
And you can watch a video
https://developers.google.com/speed/pagespeed/insights#url=http_3A_2F_2Fwww.marksandspencer.com_2FFormal
-Shirts-Shirts-Mens_2Fb_2F2559784031_3Fie_3DUTF8_26intid_3Dgnav__men__formal-shirts&mobile=false
CloudOpsGuys Your Software | Our Service TM
WPT Compare
CloudOpsGuys Your Software | Our Service TM
Page Speed Service
CloudOpsGuys Your Software | Our Service TM
Build your own
 Ive been building my own PoC tool using
Riverbed Stingray Aptimizer and aiCache.com
 Cache static and dynamic optimise resources
 Just use CNAMES and some header re-
writing to glue it together
Browser
aiCache
Dynamic
Stingray
Aptimizer
Origin
Server
CloudOpsGuys Your Software | Our Service TM
Some gotchas
 Multiple levels of caching
 Browser cache
 aiCache
 Aptimizer cache (optimized static objects)
 Making sure that you send the right headers at each
hop
 Right user-agent
 Right hostname
 Right GZIP / Deflate headers
 FQDN names in source (particularly in top/side nav)
 FFS whats wrong with a relative /link?
CloudOpsGuys Your Software | Our Service TM
Other lessons
 Load time is useless
 Render start is useless
 Filmstrip, Video or Visual Progress is KEY
 More on this later
CloudOpsGuys Your Software | Our Service TM
Video example
CloudOpsGuys Your Software | Our Service TM
5 reasons why WPT Private
instance rocks!
1. NO QUEUE!
2. Bulk Testing Mode
3. Its private
4. Its inside your firewall
5. Easier access to history of testing
6. You will learn more about features!
1. Visual Progress
2. Connection View
3. Scripting etc etc
CloudOpsGuys Your Software | Our Service TM
Bulk Testing!
CloudOpsGuys Your Software | Our Service TM
Give it a list of URLs
CloudOpsGuys Your Software | Our Service TM
Visual Progress  KEY!
CloudOpsGuys Your Software | Our Service TM
Connection view
Relatively good
CloudOpsGuys Your Software | Our Service TM
Connection view
Relatively bad connection resets after 2 requests
CloudOpsGuys Your Software | Our Service TM
LESSON LEARNT FROM
CONSULTING
What I see day in, day out
CloudOpsGuys Your Software | Our Service TM
Lessons learnt from consulting
20/06/2013 19
Generic Description
Reduce Page
Size
Reduce Number of
Requests
Implement
GZIP
Compression
Optimise
Loading of
external files
Defer
JavaScript
loading
Optimise
images
Optimize
HTTP Caching
Domain
Sharding
Cookie-
free
Domains
Back-end
performance
tuning
Remove
Unnecessary
CSS
High Street Retailer Yes Yes No No No No Yes No Yes No Yes
Budget Hotel Chain No Yes No No No Yes Yes Yes Yes Yes No
Professional Body No Yes Yes Yes Yes Yes Yes Yes No Yes No
High Street Retailer No Yes No Yes Yes Yes Yes Yes Yes Yes No
VOD provider No Yes No No Yes Yes Yes Yes Yes Yes Yes
Consumer Electronics Brand Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Fashion Retailer No Yes No No Yes Yes Yes No Yes Yes Yes
Travel Sector No Yes Yes Yes Yes no Yes Yes Yes Yes No
Fashion Retailer Yes Yes Yes Yes Yes No Yes Yes No Yes No
Fashion Retailer Yes Yes No No Yes No Yes Yes Yes Yes No
Home Improvement Retail No Yes No No Yes No Yes Yes Yes Yes Yes
Electrical Retailer Yes Yes no Yes Yes No Yes No Yes Yes No
Electrical Retailer Yes Yes No No Yes Yes Yes Yes No Yes No
Online Gambling Yes Yes Yes Yes No Yes Yes No Yes Yes Yes
Mobile Phone Retailer Yes Yes No Yes Yes Yes Yes Yes Yes No Yes
Insurance Provider No Yes No No Yes No Yes Yes No Yes Yes
Emergency Repair Service No Yes No Yes No Yes Yes Yes No Yes Yes
Mobile Phone Retailer Yes Yes No Yes Yes Yes Yes Yes No Yes Yes
Car Manufacturer No Yes No No No Yes Yes Yes Yes Yes Yes
Financial Services No Yes Yes No Yes No Yes Yes No Yes Yes
Travel Sector Yes Yes No No Yes No Yes Yes No No No
Publisher No Yes Yes No Yes Yes Yes Yes No No Yes
Publisher No Yes No No Yes No Yes Yes Yes No Yes
High Street Retailer Yes Yes No Yes Yes Yes Yes Yes No No Yes
Newspaper Yes Yes No Yes Yes Yes Yes No Yes Yes Yes
48% 100% 28% 48% 80% 60% 100% 80% 60% 76% 64%
CloudOpsGuys Your Software | Our Service TM20/06/2013 20
Performance Rule
Frequency
Recommended
Reduce Number of Requests 100%
Optimize HTTP Caching 100%
Defer JavaScript loading 80%
Domain Sharding 80%
-Back end performance tuning 76%
Remove Unnecessary CSS 64%
Optimise images 60%
-Cookie free Domains 60%
Reduce Page Size 48%
Optimise Loading of external
files
48%
Implement GZIP Compression 28%
CloudOpsGuys Your Software | Our Service TM
What else?
 It takes ages for anything to change
 (hence why I am focussing on automation stuff)
 Videos are a killer tool
 Analysis of synthetic monitoring can tell you
an lot about back-end performance
 Use analogies (I wrote a whole whitepaper
using shopping at Tesco as an analogy for web
performance)
CloudOpsGuys Your Software | Our Service TM
WHY I LOVE APM TOOLS
Deeper insights into back-end performance
CloudOpsGuys Your Software | Our Service TM
4 quick examples
 Know your dependencies!
 And dont assume its your code that sucks
 You can focus on application transactions
 How many transactions to load a page?
 And why ORMs can suck
 And classic Application metrics
 The heap is doing WHAT?
CloudOpsGuys Your Software | Our Service TM
Know your dependencies
CloudOpsGuys Your Software | Our Service TM
Focus on Application Transactions
CloudOpsGuys Your Software | Our Service TM
How many calls?
Query Avg. Time (ms) Count Tot.
Time
(ms)
%
Time
server=83.231.201.82;database=e6-goshcc;uid=e6-
goshcc;pwd=<snip>
0.26 1542 408 1.6
ESModule_EShop_SelectPrice 6.9 1216 8387 32.8
ESModule_EShop_SelectOrderItems 7.43 394 2929 11.5
ESCore_Lookup_Countries_Select 9.4 391 3676 14.4
ESModule_EShop_SelectAddress 10.15 285 2893 11.3
ESCore_Admin_LoadUserDetails 15.62 86 1343 5.3
ESModule_EShop_SelectOrderLineExtendedRecord 15.69 65 1020 4
ESCore_Data_GetNavigation 27.89 9 251 1
ESCore_Data_GetObjectDetails 3.44 9 31 0.1
ESCore_Data_IsObjectChildOfObject 0 8 0 0
CloudOpsGuys Your Software | Our Service TM
I think you have a memory leak
CloudOpsGuys Your Software | Our Service TM
Bonus question! Something unusual?
 GET /HTTP/1.1
 Host: www.cloudopsguys.com
 Connection: keep-alive
 Accept:
text/html,application/xhtml+xml,application/xml;q=0.
9,*/*;q=0.8
 User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64)
AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/27.0.1453.110 Safari/537.36 PTST/101
 Accept-Encoding: gzip,deflate,sdch
 Accept-Language: en-GB,en-US;q=0.8,en;q=0.6
CloudOpsGuys Your Software | Our Service TM
Bonus question! Something unusual?
 GET /HTTP/1.1
 Host: www.cloudopsguys.com
 Connection: keep-alive
 Accept:
text/html,application/xhtml+xml,application/xml;q=0.
9,*/*;q=0.8
 User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64)
AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/27.0.1453.110 Safari/537.36 PTST/101
 Accept-Encoding: gzip,deflate,sdch
 Accept-Language: en-GB,en-US;q=0.8,en;q=0.6
CloudOpsGuys Your Software | Our Service TM
Shared Dictionary Compression
over HTTP
CloudOpsGuys Your Software | Our Service TM
THANKYOU
www.cloudopsguys.com
CloudOpsGuys
Your Software | Our Service TM
20
CloudOpsGuys Your Software | Our Service TM
Get in Touch www.CloudOpsGuys.com
0208 798 3079info@cloudopsguys.com
twitter.com/cloudopsguys
facebook.com/cloudopsguysskype: cloudopsguys
plus.google.com/cloudopsguys
Social Media Social Media

More Related Content

London web performance WPO Lessons from the field June 2013

  • 1. CloudOpsGuys Your Software | Our Service TM 1 CloudOpsGuys Your Software | Our Service TM WPO Lessons from the Field
  • 2. CloudOpsGuys Your Software | Our Service TM (1) Some quick & dirty ways to do a WPO PoC using automation (2) 5 reasons why having your own WebPageTest instance rocks! (3) The most common WPO mistakes I see (time and time again) (4) Why I love APM tools and you're nuts if you don't use one! Agenda 3
  • 3. CloudOpsGuys Your Software | Our Service TM PoC - Do a quick example video There are two easy ways to get a rough before/after web optimisation video Using WebPageTest Compare http://www.webpagetest.org/compare Use PageSpeedInsights https://developers.google.com/speed/pagespeed/in sights (yes, I know one uses the other!)
  • 4. CloudOpsGuys Your Software | Our Service TM Pagespeed Insights
  • 5. CloudOpsGuys Your Software | Our Service TM And you can watch a video https://developers.google.com/speed/pagespeed/insights#url=http_3A_2F_2Fwww.marksandspencer.com_2FFormal -Shirts-Shirts-Mens_2Fb_2F2559784031_3Fie_3DUTF8_26intid_3Dgnav__men__formal-shirts&mobile=false
  • 6. CloudOpsGuys Your Software | Our Service TM WPT Compare
  • 7. CloudOpsGuys Your Software | Our Service TM Page Speed Service
  • 8. CloudOpsGuys Your Software | Our Service TM Build your own Ive been building my own PoC tool using Riverbed Stingray Aptimizer and aiCache.com Cache static and dynamic optimise resources Just use CNAMES and some header re- writing to glue it together Browser aiCache Dynamic Stingray Aptimizer Origin Server
  • 9. CloudOpsGuys Your Software | Our Service TM Some gotchas Multiple levels of caching Browser cache aiCache Aptimizer cache (optimized static objects) Making sure that you send the right headers at each hop Right user-agent Right hostname Right GZIP / Deflate headers FQDN names in source (particularly in top/side nav) FFS whats wrong with a relative /link?
  • 10. CloudOpsGuys Your Software | Our Service TM Other lessons Load time is useless Render start is useless Filmstrip, Video or Visual Progress is KEY More on this later
  • 11. CloudOpsGuys Your Software | Our Service TM Video example
  • 12. CloudOpsGuys Your Software | Our Service TM 5 reasons why WPT Private instance rocks! 1. NO QUEUE! 2. Bulk Testing Mode 3. Its private 4. Its inside your firewall 5. Easier access to history of testing 6. You will learn more about features! 1. Visual Progress 2. Connection View 3. Scripting etc etc
  • 13. CloudOpsGuys Your Software | Our Service TM Bulk Testing!
  • 14. CloudOpsGuys Your Software | Our Service TM Give it a list of URLs
  • 15. CloudOpsGuys Your Software | Our Service TM Visual Progress KEY!
  • 16. CloudOpsGuys Your Software | Our Service TM Connection view Relatively good
  • 17. CloudOpsGuys Your Software | Our Service TM Connection view Relatively bad connection resets after 2 requests
  • 18. CloudOpsGuys Your Software | Our Service TM LESSON LEARNT FROM CONSULTING What I see day in, day out
  • 19. CloudOpsGuys Your Software | Our Service TM Lessons learnt from consulting 20/06/2013 19 Generic Description Reduce Page Size Reduce Number of Requests Implement GZIP Compression Optimise Loading of external files Defer JavaScript loading Optimise images Optimize HTTP Caching Domain Sharding Cookie- free Domains Back-end performance tuning Remove Unnecessary CSS High Street Retailer Yes Yes No No No No Yes No Yes No Yes Budget Hotel Chain No Yes No No No Yes Yes Yes Yes Yes No Professional Body No Yes Yes Yes Yes Yes Yes Yes No Yes No High Street Retailer No Yes No Yes Yes Yes Yes Yes Yes Yes No VOD provider No Yes No No Yes Yes Yes Yes Yes Yes Yes Consumer Electronics Brand Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Fashion Retailer No Yes No No Yes Yes Yes No Yes Yes Yes Travel Sector No Yes Yes Yes Yes no Yes Yes Yes Yes No Fashion Retailer Yes Yes Yes Yes Yes No Yes Yes No Yes No Fashion Retailer Yes Yes No No Yes No Yes Yes Yes Yes No Home Improvement Retail No Yes No No Yes No Yes Yes Yes Yes Yes Electrical Retailer Yes Yes no Yes Yes No Yes No Yes Yes No Electrical Retailer Yes Yes No No Yes Yes Yes Yes No Yes No Online Gambling Yes Yes Yes Yes No Yes Yes No Yes Yes Yes Mobile Phone Retailer Yes Yes No Yes Yes Yes Yes Yes Yes No Yes Insurance Provider No Yes No No Yes No Yes Yes No Yes Yes Emergency Repair Service No Yes No Yes No Yes Yes Yes No Yes Yes Mobile Phone Retailer Yes Yes No Yes Yes Yes Yes Yes No Yes Yes Car Manufacturer No Yes No No No Yes Yes Yes Yes Yes Yes Financial Services No Yes Yes No Yes No Yes Yes No Yes Yes Travel Sector Yes Yes No No Yes No Yes Yes No No No Publisher No Yes Yes No Yes Yes Yes Yes No No Yes Publisher No Yes No No Yes No Yes Yes Yes No Yes High Street Retailer Yes Yes No Yes Yes Yes Yes Yes No No Yes Newspaper Yes Yes No Yes Yes Yes Yes No Yes Yes Yes 48% 100% 28% 48% 80% 60% 100% 80% 60% 76% 64%
  • 20. CloudOpsGuys Your Software | Our Service TM20/06/2013 20 Performance Rule Frequency Recommended Reduce Number of Requests 100% Optimize HTTP Caching 100% Defer JavaScript loading 80% Domain Sharding 80% -Back end performance tuning 76% Remove Unnecessary CSS 64% Optimise images 60% -Cookie free Domains 60% Reduce Page Size 48% Optimise Loading of external files 48% Implement GZIP Compression 28%
  • 21. CloudOpsGuys Your Software | Our Service TM What else? It takes ages for anything to change (hence why I am focussing on automation stuff) Videos are a killer tool Analysis of synthetic monitoring can tell you an lot about back-end performance Use analogies (I wrote a whole whitepaper using shopping at Tesco as an analogy for web performance)
  • 22. CloudOpsGuys Your Software | Our Service TM WHY I LOVE APM TOOLS Deeper insights into back-end performance
  • 23. CloudOpsGuys Your Software | Our Service TM 4 quick examples Know your dependencies! And dont assume its your code that sucks You can focus on application transactions How many transactions to load a page? And why ORMs can suck And classic Application metrics The heap is doing WHAT?
  • 24. CloudOpsGuys Your Software | Our Service TM Know your dependencies
  • 25. CloudOpsGuys Your Software | Our Service TM Focus on Application Transactions
  • 26. CloudOpsGuys Your Software | Our Service TM How many calls? Query Avg. Time (ms) Count Tot. Time (ms) % Time server=83.231.201.82;database=e6-goshcc;uid=e6- goshcc;pwd=<snip> 0.26 1542 408 1.6 ESModule_EShop_SelectPrice 6.9 1216 8387 32.8 ESModule_EShop_SelectOrderItems 7.43 394 2929 11.5 ESCore_Lookup_Countries_Select 9.4 391 3676 14.4 ESModule_EShop_SelectAddress 10.15 285 2893 11.3 ESCore_Admin_LoadUserDetails 15.62 86 1343 5.3 ESModule_EShop_SelectOrderLineExtendedRecord 15.69 65 1020 4 ESCore_Data_GetNavigation 27.89 9 251 1 ESCore_Data_GetObjectDetails 3.44 9 31 0.1 ESCore_Data_IsObjectChildOfObject 0 8 0 0
  • 27. CloudOpsGuys Your Software | Our Service TM I think you have a memory leak
  • 28. CloudOpsGuys Your Software | Our Service TM Bonus question! Something unusual? GET /HTTP/1.1 Host: www.cloudopsguys.com Connection: keep-alive Accept: text/html,application/xhtml+xml,application/xml;q=0. 9,*/*;q=0.8 User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36 PTST/101 Accept-Encoding: gzip,deflate,sdch Accept-Language: en-GB,en-US;q=0.8,en;q=0.6
  • 29. CloudOpsGuys Your Software | Our Service TM Bonus question! Something unusual? GET /HTTP/1.1 Host: www.cloudopsguys.com Connection: keep-alive Accept: text/html,application/xhtml+xml,application/xml;q=0. 9,*/*;q=0.8 User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36 PTST/101 Accept-Encoding: gzip,deflate,sdch Accept-Language: en-GB,en-US;q=0.8,en;q=0.6
  • 30. CloudOpsGuys Your Software | Our Service TM Shared Dictionary Compression over HTTP
  • 31. CloudOpsGuys Your Software | Our Service TM THANKYOU www.cloudopsguys.com CloudOpsGuys Your Software | Our Service TM 20
  • 32. CloudOpsGuys Your Software | Our Service TM Get in Touch www.CloudOpsGuys.com 0208 798 3079info@cloudopsguys.com twitter.com/cloudopsguys facebook.com/cloudopsguysskype: cloudopsguys plus.google.com/cloudopsguys Social Media Social Media

Editor's Notes

  1. Based on 25 consulting reports across a wide range of e-commerce and publishing sites
  2. 100% of the time there were too many requests100% of the time they werent using caching to its full advantage, and hence repeat visits were slower than they needed to be76% of the sites exhibited noticable slowing down during peak time of day/week~50% of the time the pages were bloated (often due to images that on average can be optimised ~15%) Frighteningly 村 of the sites analysed either didnt have Gzip compression enabled or it had problems e.g. failing under load!