Improve Your UX via Better Front-End Performance

My notes on an article by Etsy’s Lara Swanson posted to A List Apart, Improving UX Through Front-End Performance 

Adding a half-second to a search results page can decrease traffic and ad revenue by 20%, according to Google research

Amazon’s research indicates that an additional 100 milliseconds of load time decreases sales by 1%

Users expect pages to load in 2 seconds; after 3 seconds, 40% of users leave

Lara ran a test on Etsy with a new design that took twice as long to load–and she immediately saw a much higher exit rate and lower conversion rate. But it was good to be proven wrong–it provided a benchmark for the future

Dyn.com added a thumbnail image section with 26 images built as a single sprite. It increased page size by 60k with CSS, Javascript and the sprite image. BUT it decreased the number of requests by 21% and cut page load time by 35%!

Creating 1 sprite for several icons saved Lara 16.6% load time.

Keep CSS clean, using non-semantic names in HTML–this can reduce page load by about 6%. Cleaning up existing CSS can reduce its size by a significant percentage.

Minimize Javascript requests by loading it only when absolutely necessary. Load Javascript asynchronously so it doesn’t block other content from rendering. Replace social scripts with simple links.

Optimize those images! Try ImageOptim. Try using Base63 encode to embed images into CSS instead of calling a separate URL–but it does make your CSS larger so it’s worth testing both ways.

Use Google’s PageSpeed and Yahoo’s YSLow for suggestions on improving page load time.

WebPageTest.org is a great benchmarking tool.

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s