• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
A 3-screen approach to Web performance optimization
 

A 3-screen approach to Web performance optimization

on

  • 574 views

Users are now browsing the Web across smartphones, tablets and the desktop. Find out how performance differs for each screen and what to consider in order to deliver a great online experience.

Users are now browsing the Web across smartphones, tablets and the desktop. Find out how performance differs for each screen and what to consider in order to deliver a great online experience.

Statistics

Views

Total Views
574
Views on SlideShare
573
Embed Views
1

Actions

Likes
0
Downloads
4
Comments
0

1 Embed 1

https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    A 3-screen approach to Web performance optimization A 3-screen approach to Web performance optimization Presentation Transcript

    • A 3-Screen Approach to Website Performance Optimization Robert Castley Anthony Drewery Keynote Systems Hotels.com
    • The 3-screen Web is here, now
    • Source: Keynote Mobile User Study, 2012
    • Source: Keynote Mobile User Study, 2012
    • Source: Keynote Mobile User Study, 2012. Internet Retailer Mobile Commerce Guide, 2012.
    • DESKTOP SMARTPHONE TABLET Source: Yankee Group and Keynote Systems, 2012 Verizon and AT&T wireless connections were used for the smartphone and tablet device measurements
    • Site performance across 3-screens varies… Dramatically Desktop performance does not carry over to smartphones and tablets No website was in the top 3 across all the different screens Most websites send the same content to smartphones and tablets Source: Yankee Group and Keynote Systems, 2012 Verizon and AT&T wireless connections were used for the smartphone and tablet device measurements
    • Site performance across 3-screens varies… Dramatically Desktop performance does not carry over to smartphones and tablets No website was in the top 3 across all the different screens Most websites send the same content to smartphones and tablets Source: Yankee Group and Keynote Systems, 2012 Verizon and AT&T wireless connections were used for the smartphone and tablet device measurements
    • Smartphones & tablets: Why so much difference? Source: Yankee Group and Keynote Systems, 2012
    • 3-screen approach: Optimize with mobile in mind Connection - Assume 3G, not PC… even for tablets Design - Screen size and touch Page Construction - Minimize HTTP requests - Data URIs - Minimize redirects - Manage third parties carefully
    • Responsive design, custom sites… which one? Custom sites / progressive enhancement approach Responsive approach
    • Be direct Latency of mobile is 5X to 10X Web - TCP connection 100MS -300MS - First Packet 300MS to 700MS - Each roundtrip really counts! Avoid redirections whenever possible (exception: HTTP to HTTPS) Limit DNS lookup per page to 1 Always use HTTP Keep Alive CVS improved their load time 13% by eliminating 2 redirects
    • Keep it light Try to limit number of elements per page to <10 new HTTP requests Audit image content for appropriate resolution, quality settings and compression Bytes downloaded 97 KB Bytes downloaded 2318 KB Images 15 Images 32 Page elements 20 Page elements 57
    • Data URIs: Caution Embedded content strategy Good solution for reducing HTTP requests/round-trips Bad for content used in subsequent pages (not cached) Results may vary! Test and monitor. Page “1” Page “2” Data URIs improve performance …but subsequent page impacted after change… due to images not cached Keynote Performance Consulting case study
    • Watch third parties More requests/round trips Load after point of initial render Asynchronous loading Limit to 1 – 2 calls per page… at most Audit continuously
    • Find your own path There is NO one-size-fits-all solution Commit to accurately & consistently measure performance - Baseline and compare Optimize based on where you have issues/latency Acknowledge and work within your technical constraints Learn from the Hotels.com journey Top of the World by Izzard, on Flickr
    • Thank you keynote.com/kms