I Wanna Go Fast - Website Performance
•
1 recomendación•1,248 vistas
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.
Recomendados
Recomendados
Más contenido relacionado
Último
Último (20)
Destacado
Destacado (20)
I Wanna Go Fast - Website Performance
- 1. WORLD Interactive Agency I WANNA GO FAST: WEBSITE PERFORMANCE May 30, 2013 PRESENTATION PHILADELPHIA AREA NEW MEDIA ASSOCIATION (PANMA) EVENT
- 6. 6 WHY DOES PERFORMANCE MATTER? #MakeItFast o 1 Second delay can cause 7% drop in conversions o Nearly 1/2 of users expect 2 second or less page load time o AND they tend to abandon if not loaded in 3 seconds o 79% of shoppers say they won’t return if performance is poor o 44% say they would tell a friend about their poor experience o Search Indexing -Bots can index more pages per visit http://bit.ly/zVcxsP, http://bit.ly/mHFVVX, http://mz.cm/W5Pkx7, http://bit.ly/xfvPMC,
- 7. 7 o Tablet Users Have Higher Conversion Rate & AVO o 70% Of Tablet Users Expect A Site To Load In 2 Sec. Or Less o 2/3’s Expect Site To Be Faster Than Desktop Or Laptop o 4 Out Of 10 Report Problems Browsing Websites • 66% report slow load times, 42% report formatting issues o 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! #MakeItFast WHY DOES PERFORMANCE MATTER? http://bit.ly/yOlHQv
- 8. 8 CONVERSION RATE VS. LOAD TIME - WALMART #MakeItFast http://bit.ly/xfvPMC
- 9. 9#MakeItFast CONVERSION RATE VS. LOAD TIME - GLASSES DIRECT http://bit.ly/13PJKAg
- 10. 10#MakeItFast TAGMAN’S CONVERSION LOSS CALCULATOR http://bit.ly/Pkn0pe
- 11. 11 WHO DOES PERFORMANCE MATTER TO? #MakeItFast
- 12. 12 WHO DOES PERFORMANCE MATTER TO? #MakeItFast SHOULD
- 13. 13 o UX Designers o Visual Designers o Front-end Developers o Back-end Developers o Sales and Marketing People o eCommerce Managers WHO SHOULD PERFORMANCE MATTER TO? #MakeItFast
- 14. 14 ““There’s a head-in-the-sand tendency to assume that just because our devices, browsers, and networks are more powerful than ever, end-user performance must also be getting better” Tammy Everts, Web Performance and UX Geek #MakeItFast
- 15. 15 DIFFERENCE BETWEEN WEIGHT AND SPEED #MakeItFast
- 16. 16 o Page weight is the total file size of all assets being downloaded to the page o Page speed is how quickly and efficiently the page is rendered DIFFERENCE BETWEEN WEIGHT AND SPEED #MakeItFast
- 17. 17 HOW FAST ARE YOU NOW? #MakeItFast
- 18. 18 HOW FAST ARE YOU NOW? #MakeItFast o Use tools to spot check load times o Google Analytics Site Speed Reports
- 19. 19#MakeItFast GOOGLE ANALYTICS SITE SPEED REPORTS - OVERVIEW
- 20. 20#MakeItFast GOOGLE ANALYTICS SITE SPEED REPORTS - PAGE TIMINGS
- 21. 21#MakeItFast o Use tools to spot check load times o Google Analytics Site Speed Reports • Only based on 1% of traffic by default • Add ’setSiteSpeedSampleRate()’to the GA tag to increase sample size o GTMetrix HOW FAST ARE YOU NOW?
- 22. 22 GTMetrix
- 23. 23#MakeItFast o Use tools to spot check load times o Google Analytics Site Speed Reports o GTMetrix o WebWait HOW FAST ARE YOU NOW?
- 25. 25#MakeItFast o Use tools to spot check load times o Google Analytics Site Speed Reports o GTMetrix o WebWait o Internet Supervision HOW FAST ARE YOU NOW?
- 27. 27 WHAT DO YOU DO?!? #MakeItFast
- 28. 28#MakeItFast
- 29. 29#MakeItFast 464 Requests | 85.9 MB Transferred | 2.1 Minutes
- 30. 30#MakeItFast AVERAGE PAGE WEIGHT MAY 2012 MAY 2013 http://bit.ly/18z7ZaJ
- 31. 31 o Tools o Back-end Architecture and Setup o Front-end Practices o Infrastructure and Delivery Mechanisms WHAT DO I DO?!? #MakeItFast
- 33. 33 o Page Weight o Render Speed o Asset Loading o Validation o Errors TOOLS #MakeItFast
- 34. 34#MakeItFast http://bit.ly/HH1zLC GOOGLE PAGE SPEED INSIGHTS
- 35. 35#MakeItFast http://bit.ly/HH1zLC GOOGLE PAGE SPEED INSIGHTS
- 36. 36#MakeItFast http://bit.ly/HH1zLC GOOGLE PAGE SPEED INSIGHTS
- 37. 37#MakeItFast http://bit.ly/HH1zLC GOOGLE PAGE SPEED INSIGHTS
- 40. 40 o Accessibility - check against W3C WCAG1, WCAG2 and Section 508 guidelines o Compatibility - check for browser specific code, script and image formats o Broken Links - check for broken links and other errors o Search Engine Optimization - check Google, Yahoo and Bing webmaster guidelines o Web Standards - validate HTML, XHTML and CSS POWERMAPPER SORTSITE #MakeItFast
- 42. 42 o 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 DB o CMS or System Selection • All aren’t created equally or for same purposes o Content Structure #MakeItFast BACK-END BEST PRACTICES
- 46. 46 MINIMIZE HTTP REQUESTS #MakeItFast THE INTERNETS
- 47. 47 MINIMIZE HTTP REQUESTS #MakeItFast THE INTERNETS
- 49. 49 CSS AND JAVASCRIPT ORGANIZATION
- 50. 50 CSS AND JAVASCRIPT ORGANIZATION #MakeItFast
- 51. 51 CSS AND JAVASCRIPT ORGANIZATION
- 52. 52 CSS AND JAVASCRIPT ORGANIZATION (EXCEPTIONS) #MakeItFast
- 56. 56 COMBINE AND MINIFY #MakeItFast BEFORE AFTER
- 60. 60 o For sites with heavy JavaScript use, the bulk of the code handles user- initiated events - not needed with the initial load o This doesn't reduce the total JavaScript weight, but can reduce the number of bytes needed to load the initial state DEFER PARSING OF JAVASCRIPT #MakeItFast http://bit.ly/J1K479
- 64. 64 o Choose the correct format for the image - JPG, GIF, PNG8, PNG24 o JPG is great for photographic images o GIF largely replaced by PNGs, but still sometimes a viable option for small patterns and textures o PNG combines some of the best qualities of both and with PNG24 supports true transparency IMAGE FORMAT AND COMPRESSION #MakeItFast
- 65. 65 IMAGE FORMAT AND COMPRESSION #MakeItFast Remove the unnecessary comments, meta information and color profiles that Photoshop’s “Save for Web” leaves in place
- 72. 72 CSS IMAGE DOWNLOADS #MakeItFast http://bit.ly/HwTCKQ Background Image Display None
- 73. 73 CSS IMAGE DOWNLOADS #MakeItFast http://bit.ly/HwTCKQ Background Image, Parent Object Set to Display None
- 74. 74 CSS IMAGE DOWNLOADS #MakeItFast http://bit.ly/HwTCKQ Cascade Override for High Resolution
- 76. 76 o High resolution displays are very quickly becoming the standard o Requires even more thought in the planning and delivery of visual assets o Important because you’re talking about substantial impact on how your site performs TAME RETINA IMAGES #MakeItFast
- 78. 78 TAME RETINA IMAGES #MakeItFast 426x428 | 10.2kb
- 79. 79 o HTTP Requests - as few as possible o Organization - CSS at the top, JavaScript at the bottom o CDN Hosted Libraries - tiny, CDN hosted and almost guaranteed to be cached o Combine and Minify - both for CSS and JavaScript o Defer Parsing of JavaScript - break up JavaScript into critical and interaction files o 3rd Party Plugins - pay to play o Image Format & Compression - use the right format & REALLY compress them o CSS Sprites - combine UI elements into a single sprite or as few as possible o CSS Image Downloads - it might be off, but make sure the user isn’t getting hit o Tame Retina Images - crank up the size and compression on JPGs FRONT-END BEST PRACTICES SUMMARY #MakeItFast
- 81. ENTERPRISE AUTHORITATIVE DNS HOSTING where is mydomain.com mydomain.com lives at 123.123.123.1 LOCAL DNS 81 LOCAL & AUTHORITATIVE DNS
- 82. 82 o DNS is extremely important - 1st step to your site o Local DNS takes it’s info from Authoritative DNS o Don’t use the free default from registrar o Reliable, redundant DNS is cheap o Direct access is key for controlling changes #MakeItFast HOSTING INFRASTRUCTURE - DNS
- 83. BASIC HOSTING SERVER Nginx (web server) - NOT Apache! or IIS - gzip compression enabled - 30 day TTL on client side cache for all objects ‘SQL DBs - Query Caching - Buffers Set - Temp Tables Set PHP Application Server Bytecode caching is enabled R.E.S.S. Detect and serve screen appropriate markup & assets Site Caching Reverse proxy, basic, and/or full page caching Web Memcached Web DB Web DB HIGH TRAFFIC / HIGH AVAILABILITY HOSTING OR OR ‘get’http://www.mydomain.com @123.123.123.1 gzip’d.htmlfilesarereturned MASSIVELY SCALABLE HOSTING HTML is semantic, standards compliant JS is async or deferred where possible 83 WEBSITE HOSTING
- 84. 84 o Basic hosting is becoming a commodity o Forget $1.99-$9.99/mo shared website & VPS hosting o Services like WPengine & Acquia can be perfect o Physical vs. VPS vs. Enterprise VMs o Easy scalability of computing resources is key o “Managed” servers and support, good o Support of the application, even better #MakeItFast BASIC HOSTING INFRASTRUCTURE
- 85. 85 o Nothing is “optimized” by default o Pick a better web server, like Nginx o Config web server for compression & client-side caching o Use bytecode/opcode caching if application is PHP based o ‘SQL Databases need tuning - MySQL especially o HUGE IMPACT ON SPEED o If you don’t have a SysAd, ask your hosting vendor o Never once and done, measure, tune, repeat #MakeItFast SERVER TUNING & TWEAKING
- 86. BASIC HOSTING SERVER CONTENT DELIVERY NETWORK (CDN) ‘get’http://www.mydomain.com @123.123.123.1 gzip’d.htmlfilesarereturned ‘get’ http://cdn.mydomain.com/... Files returned are gzip compressed with client side cache = 30 days /style.min.css /functionality.min.js /images/sprite_main.png /images/... Origin site caching to CDN automatically 86 CACHING AND CDNS
- 87. 87 o Key concept: memory I/O is faster than disk I/O o Basic objects vs. full page caching o Memcached - flexible, multi-purpose memory storage o Varnish Cache - web app accelerator, a.k.a - reverse proxy o Keep web server even needing to fulfill requests o Keep web server from needing application execution o Keep application from needing database transactions #MakeItFast CACHING, CACHING, AND MORE CACHING
- 88. 88 o Serve largest files from geographically closest server o Infrastructure highly tuned for speed o DNS alias setup for cdn.mysite.com o Files are compressed with client-side cache settings o Relieves load on origin host, increasing capacity o Origin caching keeps CDN in sync automatically o Most CMS/eComm systems have CDN support #MakeItFast CONTENT DELIVERY NETWORKS (CDNs)
- 90. 90 HOW DO YOU STAY FAST? #MakeItFast
- 91. 91 o Monitoring From Polling Stations • Simulated browsers all over the country, world • SmartBear’s AlertSite #MakeItFast CONTINUOUS MONITORING TO MAKE SURE YOU STAY FAST
- 93. 93 o Monitoring From Polling Stations • Simulated browsers all over the country, world • SmartBear’s AlertSite o 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 #MakeItFast CONTINUOUS MONITORING TO MAKE SURE YOU STAY FAST
- 94. 94#MakeItFast NEW RELIC - REAL USER MONITORING (RUM)
- 98. WORLD Interactive Agency I WANNA GO FAST: WEBSITE PERFORMANCE May 30, 2013 PRESENTATION PHILADELPHIA AREA NEW MEDIA ASSOCIATION (PANMA) EVENT KEITH MCGINNIS | @mcginniso3world PRESENTERS BRIAN CRUMLEY | @briancrumley