7/22/2014

1

When Design Best Practices

Become Performance Worst Practices

Tammy Everts

Radware

Performance matters.

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

7/22/2014

2

Radware SOTU for Ecommerce Web Performance, June 2015

Performance measurement terms

Response time

Start render

Above-the-fold time

Load time

Time to interact (TTI)

Time to interact (TTI)

The moment that the primary content

and call-to-action are rendered

in the browser

7/22/2014

3

Worst practice #1

Pages that are blank, then populate all at once……or pages that load nav elements first

and primary content last

Optimal load time 8-second delay

Jakob Nielsen, Website Response Times

Why does it happen?

Poorly executed stylesheetse.g. carousels, sliders, RWD, custom fonts

Blocking JavaScript e.g. third-party scripts

Massive page resources

e.g. high-resolution hero images

7/22/2014

4

Stylesheets are both a boon

and a curse for modern web pages.

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

7/22/2014

5

Third-party calls are

the single greatest

potential point of failure

for web pages. Third-party calls can make up

>50% of page requests.

Increase page weight

Increase number of hosts and connections

Introduce additional latency

Can block page rendering

Prevent pages from loading832ms 1.788s918ms

7/22/2014

6

SPOF: 22.7s

Original: 3.5s

Solution

Defer scripts

Use asynchronous scripts (when possible)

Know your scripts and their performance

penalties

Monitor constantly

Images represent

the most fertile ground

for optimizing performance.

7/22/2014

7

HTTP Archive, June 2014

7/22/2014

8

Solutions (beyond “save for web”)

Reformat

Sprite/consolidate

Compression

Deferral/lazy load

Adaptive images

Progressive image rendering

Auto-preloading

>70% acceleration gain

Practice #2

Pages in which the CTA is the last thing to render.Two long-held conventions

are innocently eroding

the user experience...

7/22/2014

9

Convention #1: Design “best practice” Convention #2: Default baseline images

Solution

Move the CTA

Use progressive JPEGs

Implement other image optimization techniques

7/22/2014

10

Practice #3

Pop-ups that block the rest of the page Too early

Block the rest of the page from rendering

Disrupt the user experience

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)

Practice #4Designing and testing in an ivory tower

7/22/2014

11

Performance must be the responsibility of everyone who touches a page.

Design

Usability test

Build

Plan and implement third-party scripts

Launch

Post-launch

Thank you.

Tammy Everts

@tameverts

radware.com

webperformancetoday.com