When Design Best Practices

Become Performance

Worst Practices

Tammy Everts Shop.org Online Merchandising Workshop

July 21-23, 2014

Slide 2

Performance matters.

Slide 3

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 6

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 9

Worst practice #1

Pages that are blank, then populate all at once…

Slide 10

…or pages that load nav elements first

and primary content last

Slide 11

Optimal load time 8-second delay

Jakob Nielsen: Website Response Times

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 13

Stylesheets are both a boon

and a curse for modern web pages.

Slide 14

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 16

Slide 17

Third-party calls are

the single greatest

potential point of failure

for web pages.

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 20

832ms 918ms 1.788s

New Relic: Are External Services Slowing You Down?

Slide 21

Slide 22

Original: 3.5s

SPOF: 22.7s

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 24

Images represent

the most fertile ground

for optimizing performance.

Slide 25

Slide 26

Slide 27

HTTP Archive, June 2014

Slide 28

Slide 29

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 31

Worst practice #2

Pages in which the CTA is the last thing to render.

Slide 32

Two long-held conventions

are innocently eroding

the user experience...

Slide 33

Convention #1: CTA at the bottom of feature image

Slide 34

Convention #2: Default baseline images

Slide 35

Slide 36

Solution

Move the CTA

Use progressive JPEGs

Implement other image optimization techniques

Slide 37

Worst practice #3

Pop-ups that block the rest of the page

Slide 38

Too early

Block the rest of the page from rendering

Disrupt the user experience

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 40

Practice #4

Designing and testing in an ivory tower

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

Slide 42

Slide 43

Thank You www.radware.com

Tammy Everts

@tameverts

webperformancetoday.com