When Design Best Practices
Become Performance
Worst Practices
Tammy Everts Shop.org Online Merchandising Workshop
July 21-23, 2014
Slide 4
Radware SOTU for ecommerce performance
Every quarter since 2010
Home pages for top 100 & top 500 retail sites
Real-world performance over a DSL connection
Measure page size & composition
Measure load time & other metrics
Analyze changes over time
Slide 5
Radware SOTU for Ecommerce Web Performance, June 2014
Slide 7
Performance measurement terms
Response time
Start render
Above-the-fold time
Load time
Time to interact (TTI)
Slide 8
Time to interact (TTI)
The moment that the primary content
and call-to-action are rendered
in the browser
Slide 12
Why does it happen?
Poorly executed stylesheets
e.g. carousels, sliders, RWD, custom fonts
Blocking JavaScript
e.g. third-party scripts
Massive page resources
e.g. high-resolution hero images
Slide 15
Solution
Move stylesheets to the document HEAD
Avoid document embedded styles
Avoid inline styles
Avoid using complicated selectors
And more…
Chris Love: CSS Web Performance Optimizations
Slide 18
Third-party calls can make up >50% of page requests.
Steve Souders on High Performance Web Components
Slide 19
Increase page weight
Increase number of hosts and connections
Introduce additional latency
Can block page rendering
Prevent pages from loading
Slide 23
Solution
Defer scripts
Use asynchronous scripts (when possible)
Know your scripts and their performance penalties
Monitor constantly
Web Performance Today: Can Third-Party Scripts Take Down Your Entire Site?
Slide 30
Solutions (beyond “save for web”)
>70% acceleration gain
Reformat
Sprite/consolidate
Compression
Deferral/lazy load
Adaptive images
Progressive image
rendering
Auto-preloading
Slide 39
Solution
Optimize pop-up script
Ensure cross-browser functionality
Delay for at least 10 seconds
A/B test for effectiveness
(e.g. conversions/bounce rate)
Slide 41
Performance must be the responsibility of everyone who touches a page.
Design
Usability test
Build
Plan and implement third-party scripts
Launch
Post-launch