1.
When Design Best Practices
Become Performance
Worst Practices
Tammy Everts
Shop.org Online Merchandising Workshop
July 21-23, 2014

2.
Slide 2
Performance matters.

3.
Slide 3

4.
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

5.
Slide 5
Radware SOTU for Ecommerce Web Performance, June 2014

6.
Slide 6

7.
Slide 7
Performance measurement terms
Response time
Start render
Above-the-fold time
Load time
Time to interact (TTI)

8.
Slide 8
Time to interact (TTI)
The moment that the primary content
and call-to-action are rendered
in the browser

9.
Slide 9
Worst practice #1
Pages that are blank, then populate all at once…

10.
Slide 10
…or pages that load nav elements first
and primary content last

11.
Slide 11
Optimal load time 8-second delay
Jakob Nielsen: Website Response Times

12.
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

13.
Slide 13
Stylesheets are both a boon
and a curse for modern web pages.

14.
Slide 14

15.
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

16.
Slide 16

17.
Slide 17
Third-party calls are
the single greatest
potential point of failure
for web pages.

18.
Slide 18
Third-party calls can make up
>50% of page requests.
Steve Souders on High Performance Web Components

19.
Slide 19
Increase page weight
Increase number of hosts and connections
Introduce additional latency
Can block page rendering
Prevent pages from loading

20.
Slide 20
832ms 918ms 1.788s
New Relic: Are External Services Slowing You Down?

21.
Slide 21

22.
Slide 22
Original: 3.5s
SPOF: 22.7s

23.
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?

24.
Slide 24
Images represent
the most fertile ground
for optimizing performance.

25.
Slide 25

26.
Slide 26

27.
Slide 27
HTTP Archive, June 2014

28.
Slide 28

29.
Slide 29

30.
Slide 30
Solutions (beyond “save for web”)
>70% acceleration gain
Reformat
Sprite/consolidate
Compression
Deferral/lazy load
Adaptive images
Progressive image
rendering
Auto-preloading

31.
Slide 31
Worst practice #2
Pages in which the CTA is the last thing to render.

32.
Slide 32
Two long-held conventions
are innocently eroding
the user experience...

33.
Slide 33
Convention #1: CTA at the bottom of feature image

34.
Slide 34
Convention #2: Default baseline images

35.
Slide 35

36.
Slide 36
Solution
Move the CTA
Use progressive JPEGs
Implement other image optimization techniques

37.
Slide 37
Worst practice #3
Pop-ups that block the rest of the page

38.
Slide 38
Too early
Block the rest of the page from rendering
Disrupt the user experience

39.
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)

40.
Slide 40
Practice #4
Designing and testing in an ivory tower

41.
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

42.
Slide 42

43.
Slide 43

44.
Thank You
www.radware.com
Tammy Everts
@tameverts
webperformancetoday.com