I Wanna Go Fast - Website Performance

966 views

Published on

The assumption is that because devices, browsers, and data are faster and more powerful, performance must naturally be better for the user as well.

To the detriment of not only their business but also their users, many companies' operate under this assumption. When you consider the fact that Google is now including page load time in search rankings and that studies show mobile users will leave a website if it takes more than 4 seconds to load, is this an assumption you can afford to make?

Good website performance doesn't just happen because technology advances and it doesn't stop just because a site launches. It's a transparent and ongoing element in a users web experience when done right. When done wrong, it has a far reaching negative impact on a users experience and your marketing efforts. People simply won't see your content because they will have left and that equates to dollars lost.

In this talk, Keith McGinnis and Brian Crumley of O3 World explore best practices in performance tuning your website. Whether kicking off, mid-development, or already launched they cover tools, techniques, and considerations to help make your site go fast. They demonstrate the idea that performance is an essential feature that everybody from design, to development, and marketing should understand and why, as a team, everybody must demand high performance and budget accordingly.

This talk was given at the Philadelphia Area New Media Association (PANMA) May event.

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
966
On SlideShare
0
From Embeds
0
Number of Embeds
65
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

I Wanna Go Fast - Website Performance

  1. 1. WORLD Interactive AgencyI WANNA GO FAST: WEBSITE PERFORMANCEMay 30, 2013PRESENTATIONPHILADELPHIA AREA NEW MEDIA ASSOCIATION (PANMA)EVENT
  2. 2. 2KEITHMcGINNISDIRECTOR OF TECHNOLOGY@O3WORLDWWW.O3WORLD.COM@MCGINNISO3WORLD
  3. 3. 3BRIANCRUMLEYLEAD FRONT-END DEVELOPER@O3WORLDWWW.O3WORLD.COM@BRIANCRUMLEY
  4. 4. #MakeItFast4
  5. 5. 5WHY DOESPERFORMANCE MATTER?#MakeItFast
  6. 6. 6WHY DOES PERFORMANCE MATTER?#MakeItFasto 1 Second delay can cause 7% drop in conversionso Nearly 1/2 of users expect 2 second or less page load timeo AND they tend to abandon if not loaded in 3 secondso 79% of shoppers say they won’t return if performance is pooro 44% say they would tell a friend about their poor experienceo Search Indexing -Bots can index more pages per visithttp://bit.ly/zVcxsP, http://bit.ly/mHFVVX, http://mz.cm/W5Pkx7, http://bit.ly/xfvPMC,
  7. 7. 7o Tablet Users Have Higher Conversion Rate & AVOo 70% Of Tablet Users Expect A Site To Load In 2 Sec. Or Lesso 2/3’s Expect Site To Be Faster Than Desktop Or Laptopo 4 Out Of 10 Report Problems Browsing Websites• 66% report slow load times, 42% report formatting issueso A Bad Experience Will Drive• 46% of users to competitive sites• 35% are less likely to visit a problem site on ANY platform• 33% are less likely to purchase from that company!#MakeItFastWHY DOES PERFORMANCE MATTER?http://bit.ly/yOlHQv
  8. 8. 8CONVERSION RATE VS. LOAD TIME - WALMART#MakeItFasthttp://bit.ly/xfvPMC
  9. 9. 9#MakeItFastCONVERSION RATE VS. LOAD TIME - GLASSES DIRECThttp://bit.ly/13PJKAg
  10. 10. 10#MakeItFastTAGMAN’S CONVERSION LOSS CALCULATORhttp://bit.ly/Pkn0pe
  11. 11. 11WHO DOES PERFORMANCEMATTER TO?#MakeItFast
  12. 12. 12WHO DOES PERFORMANCEMATTER TO?#MakeItFastSHOULD
  13. 13. 13o UX Designerso Visual Designerso Front-end Developerso Back-end Developerso Sales and Marketing Peopleo eCommerce ManagersWHO SHOULD PERFORMANCE MATTER TO?#MakeItFast
  14. 14. 14““There’s a head-in-the-sand tendency to assumethat just because our devices, browsers, andnetworks are more powerful than ever, end-userperformance must also be getting better”Tammy Everts, Web Performance and UX Geek#MakeItFast
  15. 15. 15DIFFERENCE BETWEENWEIGHT AND SPEED#MakeItFast
  16. 16. 16o Page weight is the total file size of all assets beingdownloaded to the pageo Page speed is how quickly and efficiently the page isrenderedDIFFERENCE BETWEEN WEIGHT AND SPEED#MakeItFast
  17. 17. 17HOW FAST ARE YOUNOW?#MakeItFast
  18. 18. 18HOW FAST ARE YOU NOW?#MakeItFasto Use tools to spot check load timeso Google Analytics Site Speed Reports
  19. 19. 19#MakeItFastGOOGLE ANALYTICS SITE SPEED REPORTS - OVERVIEW
  20. 20. 20#MakeItFastGOOGLE ANALYTICS SITE SPEED REPORTS - PAGE TIMINGS
  21. 21. 21#MakeItFasto Use tools to spot check load timeso Google Analytics Site Speed Reports• Only based on 1% of traffic by default• Add ’setSiteSpeedSampleRate()’to the GA tag toincrease sample sizeo GTMetrixHOW FAST ARE YOU NOW?
  22. 22. 22GTMetrix
  23. 23. 23#MakeItFasto Use tools to spot check load timeso Google Analytics Site Speed Reportso GTMetrixo WebWaitHOW FAST ARE YOU NOW?
  24. 24. WebWait#MakeItFast
  25. 25. 25#MakeItFasto Use tools to spot check load timeso Google Analytics Site Speed Reportso GTMetrixo WebWaito Internet SupervisionHOW FAST ARE YOU NOW?
  26. 26. 26INTERNET SUPERVISION
  27. 27. 27WHAT DO YOU DO?!?#MakeItFast
  28. 28. 28#MakeItFast
  29. 29. 29#MakeItFast464 Requests | 85.9 MB Transferred | 2.1 Minutes
  30. 30. 30#MakeItFastAVERAGE PAGE WEIGHTMAY 2012 MAY 2013http://bit.ly/18z7ZaJ
  31. 31. 31o Toolso Back-end Architecture and Setupo Front-end Practiceso Infrastructure and Delivery MechanismsWHAT DO I DO?!?#MakeItFast
  32. 32. 32TOOLS#MakeItFast
  33. 33. 33o Page Weighto Render Speedo Asset Loadingo Validationo ErrorsTOOLS#MakeItFast
  34. 34. 34#MakeItFasthttp://bit.ly/HH1zLCGOOGLE PAGE SPEED INSIGHTS
  35. 35. 35#MakeItFasthttp://bit.ly/HH1zLCGOOGLE PAGE SPEED INSIGHTS
  36. 36. 36#MakeItFasthttp://bit.ly/HH1zLCGOOGLE PAGE SPEED INSIGHTS
  37. 37. 37#MakeItFasthttp://bit.ly/HH1zLCGOOGLE PAGE SPEED INSIGHTS
  38. 38. 38#MakeItFasthttp://www.webpagetest.orgWebPageTest.org
  39. 39. 39#MakeItFasthttp://bit.ly/4PtePOWERMAPPER SORTSITE
  40. 40. 40o Accessibility - check against W3C WCAG1, WCAG2 and Section 508 guidelineso Compatibility - check for browser specific code, script and image formatso Broken Links - check for broken links and other errorso Search Engine Optimization - check Google, Yahoo and Bing webmasterguidelineso Web Standards - validate HTML, XHTML and CSSPOWERMAPPER SORTSITE#MakeItFast
  41. 41. 41BACK-END BESTPRACTICES#MakeItFast
  42. 42. 42o Application Architecture• Purpose, business logic, language and framework...o Database Architecture• DB technology, table structure, indexes...o Query Efficiency• How effectively the application talks to the DBo CMS or System Selection• All aren’t created equally or for same purposeso Content Structure#MakeItFastBACK-END BEST PRACTICES
  43. 43. #MakeItFast 43http://www.hark.com/top-gun/i-feel-the-need-the-need-for-speed
  44. 44. 44FRONT-ENDBEST PRACTICES#MakeItFast
  45. 45. 45#MakeItFastMINIMIZE HTTPREQUESTS
  46. 46. 46MINIMIZE HTTP REQUESTS#MakeItFastTHE INTERNETS
  47. 47. 47MINIMIZE HTTP REQUESTS#MakeItFastTHE INTERNETS
  48. 48. 48#MakeItFastCSS AND JAVASCRIPTORGANIZATION
  49. 49. 49CSS AND JAVASCRIPT ORGANIZATION
  50. 50. 50CSS AND JAVASCRIPT ORGANIZATION#MakeItFast
  51. 51. 51CSS AND JAVASCRIPT ORGANIZATION
  52. 52. 52CSS AND JAVASCRIPT ORGANIZATION(EXCEPTIONS)#MakeItFast
  53. 53. 53#MakeItFastCDN HOSTED LIBRARIES
  54. 54. 54CDN HOSTED LIBRARIES#MakeItFasthttp://bit.ly/Iz0DcO
  55. 55. 55#MakeItFastCOMBINE AND MINIFY
  56. 56. 56COMBINE AND MINIFY#MakeItFastBEFORE AFTER
  57. 57. 57#MakeItFasthttp://bit.ly/bV0o9YUI COMPRESSION TOOLS
  58. 58. 58#MakeItFasthttp://bit.ly/vIH7mxCODEKIT
  59. 59. 59#MakeItFastDEFER PARSING OFJAVASCRIPT
  60. 60. 60o For sites with heavy JavaScript use, the bulk of the code handles user-initiated events - not needed with the initial loado This doesnt reduce the total JavaScript weight, but can reduce the number ofbytes needed to load the initial stateDEFER PARSING OF JAVASCRIPT#MakeItFasthttp://bit.ly/J1K479
  61. 61. 61#MakeItFast3RD PARTY LIBRARIES
  62. 62. 623RD PARTY LIBRARIES#MakeItFasthttp://bit.ly/dvJTgr
  63. 63. 63#MakeItFastIMAGE FORMAT ANDCOMPRESSION
  64. 64. 64o Choose the correct format for the image - JPG, GIF, PNG8, PNG24o JPG is great for photographic imageso GIF largely replaced by PNGs, but still sometimes a viable option for smallpatterns and textureso PNG combines some of the best qualities of both and with PNG24 supportstrue transparencyIMAGE FORMAT AND COMPRESSION#MakeItFast
  65. 65. 65IMAGE FORMAT AND COMPRESSION#MakeItFastRemove the unnecessary comments, metainformation and color profiles that Photoshop’s“Save for Web” leaves in place
  66. 66. 66#MakeItFasthttp://bit.ly/H6jkPeYAHOO! SMUSH.IT
  67. 67. 67#MakeItFasthttp://bit.ly/wozOidIMAGEOPTIM
  68. 68. 68#MakeItFastCSS SPRITES
  69. 69. 69CSS SPRITES#MakeItFast
  70. 70. 70#MakeItFasthttp://bit.ly/w7x9EMSPRITEPAD
  71. 71. 71#MakeItFastCSS IMAGE DOWNLOADS
  72. 72. 72CSS IMAGE DOWNLOADS#MakeItFasthttp://bit.ly/HwTCKQBackground Image Display None
  73. 73. 73CSS IMAGE DOWNLOADS#MakeItFasthttp://bit.ly/HwTCKQBackground Image, Parent Object Set to Display None
  74. 74. 74CSS IMAGE DOWNLOADS#MakeItFasthttp://bit.ly/HwTCKQCascade Override for High Resolution
  75. 75. 75#MakeItFastTAME RETINA IMAGES
  76. 76. 76o High resolution displays are very quickly becoming thestandardo Requires even more thought in the planning and deliveryof visual assetso Important because you’re talking about substantialimpact on how your site performsTAME RETINA IMAGES#MakeItFast
  77. 77. 77#MakeItFasthttp://bit.ly/SAq93CRETINAFY.ME
  78. 78. 78TAME RETINA IMAGES#MakeItFast426x428 | 10.2kb
  79. 79. 79o HTTP Requests - as few as possibleo Organization - CSS at the top, JavaScript at the bottomo CDN Hosted Libraries - tiny, CDN hosted and almost guaranteed to be cachedo Combine and Minify - both for CSS and JavaScripto Defer Parsing of JavaScript - break up JavaScript into critical and interaction fileso 3rd Party Plugins - pay to playo Image Format & Compression - use the right format & REALLY compress themo CSS Sprites - combine UI elements into a single sprite or as few as possibleo CSS Image Downloads - it might be off, but make sure the user isn’t getting hito Tame Retina Images - crank up the size and compression on JPGsFRONT-END BEST PRACTICES SUMMARY#MakeItFast
  80. 80. 80INFRASTRUCTURE,CACHING & TUNING#MakeItFast
  81. 81. ENTERPRISE AUTHORITATIVE DNS HOSTINGwhere is mydomain.commydomain.com lives at 123.123.123.1LOCAL DNS81LOCAL & AUTHORITATIVE DNS
  82. 82. 82o DNS is extremely important - 1st step to your siteo Local DNS takes it’s info from Authoritative DNSo Don’t use the free default from registraro Reliable, redundant DNS is cheapo Direct access is key for controlling changes#MakeItFastHOSTING INFRASTRUCTURE - DNS
  83. 83. BASIC HOSTING SERVERNginx (web server)- NOT Apache! or IIS- gzip compression enabled- 30 day TTL on client side cachefor all objects‘SQL DBs- Query Caching- Buffers Set- Temp Tables SetPHP Application ServerBytecode caching is enabledR.E.S.S.Detect and serve screenappropriate markup & assetsSite CachingReverse proxy, basic, and/orfull page cachingWeb MemcachedWeb DBWeb DBHIGH TRAFFIC /HIGH AVAILABILITYHOSTINGOROR‘get’http://www.mydomain.com@123.123.123.1gzip’d.htmlfilesarereturnedMASSIVELY SCALABLE HOSTINGHTML is semantic,standards compliantJS is async or deferredwhere possible83WEBSITE HOSTING
  84. 84. 84o Basic hosting is becoming a commodityo Forget $1.99-$9.99/mo shared website & VPS hostingo Services like WPengine & Acquia can be perfecto Physical vs. VPS vs. Enterprise VMso Easy scalability of computing resources is keyo “Managed” servers and support, goodo Support of the application, even better#MakeItFastBASIC HOSTING INFRASTRUCTURE
  85. 85. 85o Nothing is “optimized” by defaulto Pick a better web server, like Nginxo Config web server for compression & client-side cachingo Use bytecode/opcode caching if application is PHP basedo ‘SQL Databases need tuning - MySQL especiallyo HUGE IMPACT ON SPEEDo If you don’t have a SysAd, ask your hosting vendoro Never once and done, measure, tune, repeat#MakeItFastSERVER TUNING & TWEAKING
  86. 86. BASIC HOSTING SERVERCONTENT DELIVERY NETWORK (CDN)‘get’http://www.mydomain.com@123.123.123.1gzip’d.htmlfilesarereturned‘get’ http://cdn.mydomain.com/...Files returned are gzip compressedwith client side cache = 30 days/style.min.css/functionality.min.js/images/sprite_main.png/images/...Origin site caching to CDN automatically86CACHING AND CDNS
  87. 87. 87o Key concept: memory I/O is faster than disk I/Oo Basic objects vs. full page cachingo Memcached - flexible, multi-purpose memory storageo Varnish Cache - web app accelerator, a.k.a - reverse proxyo Keep web server even needing to fulfill requestso Keep web server from needing application executiono Keep application from needing database transactions#MakeItFastCACHING, CACHING, AND MORE CACHING
  88. 88. 88o Serve largest files from geographically closest servero Infrastructure highly tuned for speedo DNS alias setup for cdn.mysite.como Files are compressed with client-side cache settingso Relieves load on origin host, increasing capacityo Origin caching keeps CDN in sync automaticallyo Most CMS/eComm systems have CDN support#MakeItFastCONTENT DELIVERY NETWORKS (CDNs)
  89. 89. 90HOW DO YOU STAY FAST?#MakeItFast
  90. 90. 91o Monitoring From Polling Stations• Simulated browsers all over the country, world• SmartBear’s AlertSite#MakeItFastCONTINUOUS MONITORING TO MAKE SUREYOU STAY FAST
  91. 91. 92#MakeItFastSITEBEAR’S ALERTSITE DASHBOARD
  92. 92. 93o Monitoring From Polling Stations• Simulated browsers all over the country, world• SmartBear’s AlertSiteo Real User Monitoring (RUM)• Data from real users actual browsers• Injects Javascript into page• Passive - does not impact page load time in any way• New Relic#MakeItFastCONTINUOUS MONITORING TO MAKE SUREYOU STAY FAST
  93. 93. 94#MakeItFastNEW RELIC - REAL USER MONITORING (RUM)
  94. 94. 95RESOURCES#MakeItFast
  95. 95. 96#MakeItFastADDITIONAL RESOURCEShttp://www.compuware.com/d/release/656820/poor-web-performance-results-in-tablet-users-less-likely-to-make-purchases-onlinehttp://www.icrossing.co.uk/slow-pages-lose-usershttp://blog.kissmetrics.com/loading-timehttps://developers.google.com/speedhttp://creativeoverflow.net/20-tools-to-check-your-web-sites-performancehttp://www.seomoz.org/ugc/why-site-speed-optimisation-should-be-part-of-your-seo-strategyhttp://blog.tagman.com/2012/03/just-one-second-delay-in-page-load-can-cause-7-loss-in-customer-conversionshttp://www.tagman.com/conversion-loss-calculatorhttp://www.seomoz.org/blog/15-tips-to-speed-up-your-websitehttp://www.seomoz.org/ugc/13-questions-and-answers-about-google-site-speed-and-seo
  96. 96. 97QUESTIONS?#MakeItFast
  97. 97. WORLD Interactive AgencyI WANNA GO FAST: WEBSITE PERFORMANCEMay 30, 2013PRESENTATIONPHILADELPHIA AREA NEW MEDIA ASSOCIATION (PANMA)EVENTKEITH MCGINNIS | @mcginniso3worldPRESENTERSBRIAN CRUMLEY | @briancrumley

×