PRESENTATION I WANNA GO FAST: WEBSITE...
74
WORLD Interactive Agency I WANNA GO FAST: WEBSITE PERFORMANCE July 24, 2013 PRESENTATION MAGENTO WEBINAR EVENT
Transcript of PRESENTATION I WANNA GO FAST: WEBSITE...
WORLD Interactive Agency
I WANNA GO FAST: WEBSITE PERFORMANCEJuly 24, 2013
PRESENTATION
MAGENTO WEBINAREVENT
2
HOWIEROSSDEVELOPMENT MANAGER@O3WORLD
WWW.O3WORLD.COM@HOWDIZ
3
BRIANCRUMLEYLEAD FRONT-END DEVELOPER@O3WORLD
WWW.O3WORLD.COM@BRIANCRUMLEY
#MakeItFast
4
5
WHY DOES PERFORMANCE MATTER?
#MakeItFast
6
WHY DOES PERFORMANCE MATTER?
#MakeItFast
o 1 Second delay can cause 7% drop in conversionso Nearly 1/2 of users expect 2 second or less page load time 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 visit 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!
http://bit.ly/zVcxsP, http://bit.ly/mHFVVX, http://mz.cm/W5Pkx7, http://bit.ly/xfvPMC, http://bit.ly/yOlHQv
7
CONVERSION RATE VS. LOAD TIME - WALMART
#MakeItFast http://bit.ly/xfvPMC
8#MakeItFast
TAGMAN’S CONVERSION LOSS CALCULATOR
http://bit.ly/Pkn0pe
9
WHO DOES PERFORMANCE MATTER TO?
#MakeItFast
10
WHO DOES PERFORMANCE MATTER TO?
#MakeItFast
SHOULD
11
o Designers and Developerso Sales and Marketing Peopleo eCommerce Managers
WHO SHOULD PERFORMANCE MATTER TO?
#MakeItFast
12
““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
13
DIFFERENCE BETWEEN WEIGHT AND SPEED
#MakeItFast
14
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
15
HOW PERFORMANT ARE YOU NOW?
#MakeItFast
16
HOW PERFORMANT ARE YOU NOW?
#MakeItFast
o Use tools to spot check load timeso Google Analytics Site Speed Reports
17#MakeItFast
GOOGLE ANALYTICS SITE SPEED REPORTS - OVERVIEW
18#MakeItFast
GOOGLE ANALYTICS SITE SPEED REPORTS - PAGE TIMINGS
19#MakeItFast
o 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 to
increase sample size
HOW FAST ARE YOU NOW?
20
GTMetrix
21#MakeItFast
o Use tools to spot check load timeso Google Analytics Site Speed Reportso GTMetrixo WebWait
HOW FAST ARE YOU NOW?
WebWait
#MakeItFast
23#MakeItFast
o Use tools to spot check load timeso Google Analytics Site Speed Reportso GTMetrixo WebWaito PingDomo AlertBot
HOW FAST ARE YOU NOW?
24
WHAT DO YOU DO?!?
#MakeItFast
25#MakeItFast
26#MakeItFast
464 Requests | 85.9 MB Transferred | 2.1 Minutes
27#MakeItFast
AVERAGE PAGE WEIGHT
JULY 2012 JULY 2013
http://bit.ly/15dh1ZZ
28
o Toolso Back-end Architecture and Setupo Front-end Practiceso Infrastructure and Delivery Mechanisms
WHAT DO I DO?!?
#MakeItFast
29
TOOLS
#MakeItFast
30#MakeItFast http://bit.ly/HH1zLC
GOOGLE PAGE SPEED INSIGHTS
31#MakeItFast http://bit.ly/HH1zLC
GOOGLE PAGE SPEED INSIGHTS
34
o 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 webmaster
guidelineso Web Standards - validate HTML, XHTML and CSS
POWERMAPPER SORTSITE
#MakeItFast
35
BACK-END BEST PRACTICES
#MakeItFast
36
o Application Architecture• Magento is purpose built for e-commerce• Built with PHP and Zend Framework• Designed for linux and Mysql
o Implementation and deployment• Best bet is a Magento Solution Partner
o Extension / Module Selection and Integration• Look to Magento Industry Partners
#MakeItFast
BACK-END BEST PRACTICES
#MakeItFast 37
http://www.hark.com/top-gun/i-feel-the-need-the-need-for-speed
38
FRONT-ENDBEST PRACTICES
#MakeItFast
39#MakeItFast
MINIMIZE HTTP REQUESTS
40
MINIMIZE HTTP REQUESTS
#MakeItFast
THE INTERNETS
41
MINIMIZE HTTP REQUESTS
#MakeItFast
THE INTERNETS
42#MakeItFast
CSS AND JAVASCRIPTORGANIZATION
43
CSS AND JAVASCRIPT ORGANIZATION
44
CSS AND JAVASCRIPT ORGANIZATION
#MakeItFast
45#MakeItFast
CDN HOSTED LIBRARIES
47#MakeItFast
COMBINE AND MINIFY
48
COMBINE AND MINIFY
#MakeItFast
BEFORE AFTER
http://bit.ly/bV0o9
49#MakeItFast
3RD PARTY LIBRARIES
51#MakeItFast
IMAGE FORMAT AND COMPRESSION
52
o 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 small
patterns and textureso PNG combines some of the best qualities of both and with PNG24 supports
true transparency
IMAGE FORMAT AND COMPRESSION
#MakeItFast
53
IMAGE FORMAT AND COMPRESSION
#MakeItFast
Remove the unnecessary comments, meta information and color profiles that Photoshop’s
“Save for Web” leaves in place
56#MakeItFast
CSS SPRITES
57
CSS SPRITES
#MakeItFast
58#MakeItFast
CSS IMAGE DOWNLOADS
59
o Determining if your images are downloading when not displayed is critical - especially when considering Responsive Web Design
o There’s a lot of different circumstances for when images may or may not be downloaded
CSS IMAGE DOWNLOADS
#MakeItFast http://bit.ly/HwTCKQ
60
o HTTP Requests - as few as possibleo Organization - CSS at the top, JavaScript at the bottomo CDN Hosted Libraries - decreased latency and likely to be cachedo Combine and Minify - both for CSS and JavaScripto 3rd Party Plugins - pay to playo Image Format & Compression - use the right format & REALLY compress themo CSS Sprites - combine UI elements into as few as possibleo CSS Image Downloads - it might not be displayed, but make sure the user isn’t getting hit
FRONT-END BEST PRACTICES SUMMARY
#MakeItFast
61
INFRASTRUCTURE, CACHING & TUNING
#MakeItFast
ENTERPRISE AUTHORITATIVE DNS HOSTINGwhere is mydomain.com
mydomain.com lives at 123.123.123.1
LOCAL DNS
62
LOCAL & AUTHORITATIVE DNS
63
o 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
#MakeItFast
HOSTING INFRASTRUCTURE - DNS
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 ServerBytecode caching is enabled
R.E.S.S. Detect and serve screen
appropriate markup & assets
Site CachingReverse proxy, basic, and/or
full page caching
Web Memcached
Web DB
Web DBHIGH TRAFFIC /HIGH AVAILABILITY
HOSTING
OR
OR
‘get’ http://www.mydomain.com
@ 123.123.123.1
gzip’d .html files are returned
MASSIVELY SCALABLE HOSTING
HTML is semantic, standards compliant
JS is async or deferred where possible
64
WEBSITE HOSTING
65
o Basic hosting is becoming a commodityo Forget inexpensive shared website & VPS hosting o Use a Magento Certified Hosting Partner o Physical vs. VPS vs. Enterprise VMso Easy scalability of computing resources is keyo “Managed” servers and support, goodo Support of the application, even better
#MakeItFast
BASIC HOSTING INFRASTRUCTURE
66
o Nothing is “optimized” by defaulto Pick a better web server, like Nginxo Config web server for compression & client-side cachingo Use bytecode/opcode caching like APCo MySQL Databases need tuning o HUGE IMPACT ON SPEEDo If you don’t have a SysAd, ask your hosting vendoro Never once and done, measure, tune, repeat
#MakeItFast
SERVER TUNING & TWEAKING
BASIC HOSTING SERVERCONTENT DELIVERY NETWORK (CDN)
‘get’ http://www.mydomain.com
@ 123.123.123.1
gzip’d .html files are returned
‘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
67
CACHING AND CDNS
68
o Key concept: memory I/O is faster than disk I/Oo Enable all Magento 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
#MakeItFast
CACHING, CACHING, AND MORE CACHING
69
o 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
#MakeItFast
CONTENT DELIVERY NETWORKS (CDNs)
71
RESOURCES
#MakeItFast
72#MakeItFast
ADDITIONAL RESOURCEShttp://www.compuware.com/d/release/656820/poor-web-performance-results-in-tablet-users-less-likely-to-make-purchases-online
http://www.icrossing.co.uk/slow-pages-lose-users
http://blog.kissmetrics.com/loading-time
https://developers.google.com/speed
http://creativeoverflow.net/20-tools-to-check-your-web-sites-performance
http://www.seomoz.org/ugc/why-site-speed-optimisation-should-be-part-of-your-seo-strategy
http://blog.tagman.com/2012/03/just-one-second-delay-in-page-load-can-cause-7-loss-in-customer-conversions
http://www.tagman.com/conversion-loss-calculator
http://www.seomoz.org/blog/15-tips-to-speed-up-your-website
http://www.seomoz.org/ugc/13-questions-and-answers-about-google-site-speed-and-seo
73
QUESTIONS?
#MakeItFast
WORLD Interactive Agency
I WANNA GO FAST: WEBSITE PERFORMANCE
July 24, 2013
PRESENTATION
MAGENTO WEBINAREVENT
HOWIE ROSS @HOWDIZPRESENTERS
BRIAN CRUMLEY @BRIANCRUMLEY
O3 WORLD [email protected] (215) 592-4739
