Transcript
Responsive Web Design and Responsive Server Side
©2015 AKAMAI | FASTER FORWARDTM
Agenda
• Design Strategies
• What are common problems with RWD?
• Solving these issues with Akamai
©2015 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the
security perimeter outside the data-center and
protect from increasing frequency, scale and
sophistication of web attacks.
1/3 of Mobile Traffic is from Mobile Devices
Source: KPCB Internet Trends, 2014
©2015 AKAMAI | FASTER FORWARDTM
The Browser/Client Landscape has become very diverse!
AOLNetscape
IE
Chrome
iPhone iPad
Android
Phones and
Tablets
FireFox
Windows Mac OSiOS
AndroidWindows 8Windows
Phones and
Tablets
www.www.
m.
www.
m.
t.
TodayDevice x
Version x
Screen Sizes x
OS x
Browsers x
Connectivity
TomorrowDevice x
Version x
Screen Sizes x
OS x
Browsers x
Connectivity x
The next big thing
Responsive Web DesignBack to www.
time
Facebook reports
7,000 different
devices (2012)
Massive
proliferation of
devices
begins
©2015 AKAMAI | FASTER FORWARDTM
Responsive Web Design
• Web site design aimed at provide an optimal viewing
experience independent of the device.
• Provides easy reading and navigation with a minimum of
resizing, panning and scrolling across a wide range of
devices.
• “One Web”
• Preserve the User Experience
• Focus dev efforts; reduce duplication
• “Future Friendly”
Design Strategies
©2015 AKAMAI | FASTER FORWARDTM
RWD Strategies
• Adaptive Delivery
• Multiple origins (m., www) served from one URL
• Using CDN/Edge to serve appropriate site origin to the client
• Relatively easy to implement if you have m., www sites already created
www-origin.example.com
m-origin.example.com
www.example.com
©2015 AKAMAI | FASTER FORWARDTM
RWD Strategies
• Responsive Client Side (RWD)
• A single website that responds to the current client and changes its design
according to the device/client
• Three primary building blocks
• Fluid grids - page element sizing to be in relative units like percentages, rather
than absolutes like pixels.
• Flexible images – are sized using relative units or percentages to prevent them
from displaying outside of their container element
• Media queries - Media queries allow the page to use different CSS style rules
based on display characteristics of the device the site is being rendered on.
©2015 AKAMAI | FASTER FORWARDTM
RWD Strategies
• Responsive with Server Side (RESS)
• Serving different content to different clients
• Content delivered to device/client is specific to that client type
• For example, www.example.com sends a mobile layout to an android phone and
client side script sizes elements appropriate to dimensions of the device. A
desktop application would receive code appropriate for that representation
Mobile
ContentDesktop
Content
©2015 AKAMAI | FASTER FORWARDTM
RWD Strategies
• Server Side (RESS)
Performance Issues with RWD
©2015 AKAMAI | FASTER FORWARDTM
Over-Downloading
• Average site has 120 reqs/page
• display: none only hides images but bytes still
transferred
• All permutations are downloaded
(jpg/css/js/html)
• Only 6% of Fluid/Flex RWD sites tackle Over-
Downloading
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
©2015 AKAMAI | FASTER FORWARDTM
Over-Downloading: Bytes Per Pixel Served
Average RWD Bytes Served Per PixelFrom testing ~500 live RWD sites
Source: http://goo.gl/0C0tLD
©2015 AKAMAI | FASTER FORWARDTM
Image Related Issues
• Images are handled a number of ways in RWD, not all of which are
optimal
• Sharing large images between representation types
• Resizing images client-side
• Hiding images non-relevant to the current layout
• Downloading large of images for mobile
• Downloading images at a much higher quality than is necessary for a small screen
©2015 AKAMAI | FASTER FORWARDTM
Problem: Same Image, Different Size
http://c.s-microsoft.com/en-us/CMSImages/SpringPromo_LastFrameBG_1600x540_EN_US.jpg?version=f77413db-c3db-675e-1ff8-faa31c3d5c30
©2015 AKAMAI | FASTER FORWARDTM
Problem: Images Below the Fold Not Shown
©2015 AKAMAI | FASTER FORWARDTM
Media queries do not prevent CSS downloads
Resolution:
320x480
“Wrong” CSS loaded
“Right” CSS loaded
©2015 AKAMAI | FASTER FORWARDTM
DOM/CSS/JS Bloating
• RWD websites contain client side code directing the client on what
representation to show, how to size elements, code for how each
element should work with each representation, and widgets that may
only appear in certain representations.
©2015 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the
security perimeter outside the data-center and
protect from increasing frequency, scale and
sophistication of web attacks.
Problem: Hidden DOM impacts download
RWD and Akamai SolutionsION Features
©2015 AKAMAI | FASTER FORWARDTM
Akamai Solutions – Adaptive Delivery
•Edge Device Characterization• Akamai maintains the device/network database
•Forward Rewriting• Change the destination server based on device
• Or add or remove the /m/ or m.
•Flexible Cache Key• Add other facets to the URL
• example.com/path/to/site.html?id=123 [device=phone]
©2015 AKAMAI | FASTER FORWARDTM
Akamai Solutions – Just In Time Images
• Prevents downloading of images
not visible in the browser window.
• Prevents downloading of hidden
images.
• Images only downloaded when
they become visible.
©2015 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the
security perimeter outside the data-center and
protect from increasing frequency, scale and
sophistication of web attacks.
Akamai Solutions – Browser Specific Image Formats
WebP
JXR
Jpg2000
Jpg
Jpg
©2015 AKAMAI | FASTER FORWARDTM
Akamai Solutions – Adaptive Images
• Adaptive Image Compression (AIC)
• Converting images based on network conditions
• Applies to JPEG images
• Configured through Akamai Portal.
• No code changes required.
Example
Quality:
100%
Size: 101KB
Average
Throughput: HighSize: 85KB (Q: 90)
Throughput: MedSize: 35KB (Q: 40)
Throughput: LowSize: 13KB (Q: 20)
©2015 AKAMAI | FASTER FORWARDTM
Akamai Solutions – Adaptive Images
• Image Converter
• APIs are available to assist with image management
• Customers implementing adaptive image strategies can utilize this API
• Deliver a browser specific version of a requested image
• Resize images to the screen
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source media="(min-width: 801px)” srcset=“2880411400_2_1_1.jpg?resize=600:*"/>
<source media="(min-width: 641px)” srcset=“2880411400_2_1_1.jpg?resize=500:*">
<!--[if IE 9]></video><![endif]-->
<img id="image-main" class="gallery-image visible"
src="2880411400_2_1_1.jpg?resize=400:*" alt="Linen Blazer" title="Linen Blazer” data-
zoom-image="2880411400_2_1_1.jpg?resize=1200:*" />
</picture>
©2015 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the
security perimeter outside the data-center and
protect from increasing frequency, scale and
sophistication of web attacks.
Akamai Solutions – Responsive Images
©2015 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the
security perimeter outside the data-center and
protect from increasing frequency, scale and
sophistication of web attacks.
Akamai Solutions – Responsive Images
©2015 AKAMAI | FASTER FORWARDTM
Akamai Solutions - RESS
• Edge Server Includes (ESI)
• conditionally assembles (remove / add) design response
• Device Characterization
• Allows you to detect devices and characteristics at the edge
• http://edc.edgesuite.net
• Use this with ESI and other Akamai features to define behaviors
©2015 AKAMAI | FASTER FORWARDTM
ESI Blog Post by Colin Bendell
For more information and detailed technical examples:
https://community.akamai.com/blogs/colin/2014/10/22/ress-with-esi-and-
device-characteristics
©2015 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the
security perimeter outside the data-center and
protect from increasing frequency, scale and
sophistication of web attacks.
The result - RESS can reduce DOM complexity
©2015 AKAMAI | FASTER FORWARDTM
The Result - RESS User Experience difference
RESS
Doc Complete: 10.1s
Fully Loaded: 17s
Original
Doc Complete: 18.9s
Fully Loaded: 28s
RESS
Original
©2015 AKAMAI | FASTER FORWARDTM
Akamai Solutions – Edge Start
• Akamai Intelligent Platform responds immediately with HTML head & select
assets
• Idle browser threads begin processing CSS & JavaScript
• Akamai Intelligent Platform sends rest of response once received from originBefore
TTFB = 987ms
Start Render = 2.264s
After
TTFB = 43ms
Start Render = 1.468s
top related