makingweb: great front end performance starts on the server
DESCRIPTION
How mobile connectivity is different, issues reviled and how the server can help fix them.TRANSCRIPT
![Page 1: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/1.jpg)
John Arne SæteråsTwitter : @jonarnesHead of innovation at Mobiletechhttp://www.slideshare.net/jonarnes/
August 18, 2010
YEP, WEB ON MOBILE IS SLOW
torsdag 24. oktober 13
![Page 2: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/2.jpg)
THESE TWO GUYS.......are really impatient
torsdag 24. oktober 13
![Page 3: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/3.jpg)
100 ms faster :1% increased revenue
1 sec delay:2.8% drop in revenue
http://www.slideshare.net/stubbornella/designing-fast-websites-presentationhttp://slideshare.net/markstanton/speed-matters
SLOW IS NOT COOL...even less cool on mobile
torsdag 24. oktober 13
![Page 4: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/4.jpg)
THE VALUE CHAIN
developer server internet telco network device
Doesn’t really make things more difficult, but reveal a few issues
browser
torsdag 24. oktober 13
![Page 5: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/5.jpg)
WHY IS MOBILE SLOWER?
• Network Latency• Available Bandwidth
• The Implementation
• Processing Power• Browser • Battery Preserving Strategies
torsdag 24. oktober 13
![Page 6: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/6.jpg)
CURRENT STATE OF THE WEB AND MOBILE
torsdag 24. oktober 13
![Page 7: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/7.jpg)
1.6 MB4%9%
6%3%
17% 63%
Images ScriptsCSS FlashOther HTML
in 94 requests on average
http://httparchive.org/
torsdag 24. oktober 13
![Page 8: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/8.jpg)
ASIDE...
• In 2030• Average web site is
320MB
• Average (mobile) bandwidth is 93Mbps
http://mpulp.mobi/2013/06/page-weight-and-mobile-bandwidth-in-year-2030/
torsdag 24. oktober 13
![Page 9: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/9.jpg)
1.6 MBin 94 requests on average
• Avg. speed: 2Mbps (cisco)• 1 Mbps = 0.12 MB/s• 1.6 / 0.24 = 6,7s
6,7Secondsdownload
time
Hold that thought...
more on this later.http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html
torsdag 24. oktober 13
![Page 10: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/10.jpg)
1.6 MBin 94 requests on average
• 100-200 ms pr roundtrip• Depends....(DNS, pipelining,
concurrent TCP connections etc.)
9,4Secondslatency in
total
Hold that thought...
torsdag 24. oktober 13
![Page 11: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/11.jpg)
MOBILE NETWORKS ARE
FREAKING MAGIC!
a quick look on how they work
torsdag 24. oktober 13
![Page 12: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/12.jpg)
.01 s.
User opens app. Wakes the radio. Device sends a request to the cell tower to use the network
Tower signaling. Device promoted to full power state. Process takes about 2 seconds
2.1 s.
Only needed when device is idle
App is “on line”App does a DNS lookup. Roundtrip is 100-200 ms.
2.2 s.
torsdag 24. oktober 13
![Page 13: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/13.jpg)
Latency, anything from 100 - >500ms
TCP connectionHTML document returned
2.4 s.
2.4 s, the HTML page is downloaded
Browser renderingFetches linked resources. More DNS lookups (one for each unique domain) and TCP connections.
2.6 s.
Page displayedPuh...
3-60 s.
http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient?fbid=YmB5ErqPR7btorsdag 24. oktober 13
![Page 14: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/14.jpg)
1.6 MBin 94 requests on average
• Wake up radio (one time)• TCP and DNS (one time)• 94 round trips (6 req pr conn.)• Downloading 1.6 mb over 2Mbps
10,6Secondstotal
+ rendering time in the browser+ server response time
Disclaimer: lots of assumptions in this calculation!
torsdag 24. oktober 13
![Page 15: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/15.jpg)
GOOGLE: 10.2 S.
http://analytics.blogspot.nl/2012/04/global-site-speed-overview-how-fast-are.htmltorsdag 24. oktober 13
![Page 16: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/16.jpg)
MAKINGWEB.NO
• Load event fired: 12,77 s.
• 1 MB
• 58 requests
torsdag 24. oktober 13
![Page 17: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/17.jpg)
SERVE A PAGE TO A MOBILE DEVICE IN
LESS THAN 1 SECOND?
A great overview by Ilya Grigorik bit.ly/mobile-barrier
torsdag 24. oktober 13
![Page 18: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/18.jpg)
WHO CARES?The users care!
Telco Network53,53 %
Other46,47 %
How users connect. Page views per connection type. (Scandinavian Countries).
Source: Mobiletech
torsdag 24. oktober 13
![Page 19: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/19.jpg)
WHY USERS CARE?
http://mobiforge.com/designing/blog/performance-money-part-1-end-users-wallet
➜European Vodafone
account roaming in US
torsdag 24. oktober 13
![Page 20: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/20.jpg)
SO, WHAT IS OUR CURRENT APPROACH TO THIS?
torsdag 24. oktober 13
![Page 21: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/21.jpg)
ENTER RESPONSIVE WEB DESIGN
Yay!
torsdag 24. oktober 13
![Page 22: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/22.jpg)
RESPONSIVE WEB DESIGN
Doh...Much smaller
6%
Same size72%
Smaller22%
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
Also about the same
number of
HTTP requests
torsdag 24. oktober 13
![Page 23: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/23.jpg)
RWD IS A TECHNIQUENothing wrong with the technique! It is brilliant!
The famous Iceberg: @brad_frosttorsdag 24. oktober 13
![Page 24: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/24.jpg)
RWD != MOBILE FRIENDLYbut an important step in the right direction
torsdag 24. oktober 13
![Page 25: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/25.jpg)
Load time: 9.07s *Size: 288.14 kb
Load time: 2.36 s *Size: 36.59 kb
*) Load event fired. - More on how the built the new BBC News site: http://slidesha.re/14IYNOO torsdag 24. oktober 13
![Page 26: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/26.jpg)
http://www.bbc.co.uk/blogs/bbcinternet/2012/03/bbc_news_mobile_site_refresh.htmltorsdag 24. oktober 13
![Page 27: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/27.jpg)
PRIMARY ISSUES
• Over downloading
• Unused assets
• Large images
• Stuff...
• Network issues
• High Latency
• Bandwidth
• Flaky connection
torsdag 24. oktober 13
![Page 28: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/28.jpg)
PARET0 PRINCIPLE
Responsive Design is 20% of the work, and might get you 80% of the way
the “80/20 rule”
torsdag 24. oktober 13
![Page 29: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/29.jpg)
THE LAST 20%will improve performance by 80%
Our example: Shaving
80%off 10,6 s. gives a
load time of 2,1s
torsdag 24. oktober 13
![Page 30: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/30.jpg)
SOMETIMES IT MAKES SENSE TO MULTI-SERVE...or at least do layout adjustments to components
torsdag 24. oktober 13
![Page 31: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/31.jpg)
When all you have is a hammer,every problem looks like a nail
RWD
device or browser
torsdag 24. oktober 13
![Page 32: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/32.jpg)
HOW CAN WE FIX THIS?
What can we do to help front end developers make
use of server side stuff?
torsdag 24. oktober 13
![Page 33: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/33.jpg)
THE VALUE CHAIN
Adaptive Responsive
developer server internet telco network device browser
torsdag 24. oktober 13
![Page 34: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/34.jpg)
RANTThere is a web server. A very capable one, too.
Use it!torsdag 24. oktober 13
![Page 35: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/35.jpg)
SERVER?How to make the server side
available to front end devs
torsdag 24. oktober 13
![Page 36: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/36.jpg)
torsdag 24. oktober 13
![Page 37: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/37.jpg)
http://mobile.smashingmagazine.com/2013/04/09/improve-mobile-support-with-server-side-enhanced-responsive-design/torsdag 24. oktober 13
![Page 38: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/38.jpg)
RESSREsponsive design with Server
Side components
torsdag 24. oktober 13
![Page 39: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/39.jpg)
A BALANCING ACTno right answer
torsdag 24. oktober 13
![Page 40: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/40.jpg)
PURPOSE OF RESS
• Reduce need for client side processing
• Eliminate “over downloading”
• Let the server do the work instead of the browser
torsdag 24. oktober 13
![Page 41: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/41.jpg)
RESS IN A NUT SHELL
•RWD provide a sensible default or fallback
•The server does the optimization
Reduce asset size
Selective markup
Ad serving
Social networks
Minify
zip
Cache
etc.
torsdag 24. oktober 13
![Page 42: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/42.jpg)
INGREDIENTS OF RESS
Hello, I know exactly how to make you shine!
Information about the requesting device, network, etc.
Request/Response
torsdag 24. oktober 13
![Page 43: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/43.jpg)
No, this is NOT what I mean...
torsdag 24. oktober 13
![Page 44: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/44.jpg)
NOT A CRIME!82% of top 100 Alexa sites
use Device Detection
In the case of Mashable, we also detect the type of
device and change the site’s behavior
accordingly.
“
”
http://www.circleid.com/posts/20120111_analysis_of_server_side_mobile_web_detection/http://mashable.com/2012/12/11/responsive-web-design/
torsdag 24. oktober 13
![Page 45: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/45.jpg)
THERE IS A DIFFERENCE
User-Agent sniffingvar isiPhone = /iPhone/i.test(navigator.userAgent);
Feature Detectionvar appCache= function() { return !!window.applicationCache;};
Device DetectionGET http://ddr.demo.wew.io/c/dual_orientation
Using the User-Agent (++) as a key to look up in a data base.torsdag 24. oktober 13
![Page 46: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/46.jpg)
NYTIMESvar ua = navigator.userAgent;window.BBDevice = { isOldBB: false, indexOfVersion: ua.indexOf("Version/"), indexOfBB: ua.indexOf("BlackBerry"), fullVersion: null, version: null};if (window.BBDevice.indexOfBB >= 0) { existingClasses = document.body.className = existingClasses + " bb"; if (ua.indexOf("WebKit") < 0) { existingClasses = document.body.className = existingClasses + " oldbb"; window.BBDevice.isOldBB = true; window.BBDevice.fullVersion = ua.substr(window.BBDevice.indexOfBB); window.BBDevice.fullVersion = window.BBDevice.fullVersion.substr(window.BBDevice.fullVersion.indexOf("/") + 1, window.BBDevice.fullVersion.indexOf(" ")); window.BBDevice.version = window.BBDevice.fullVersion.substr(0, window.BBDevice.fullVersion.indexOf(".")); } else { if (window.BBDevice.indexOfVersion >= 0) { window.BBDevice.indexOfVersion = window.BBDevice.indexOfVersion + 8; window.BBDevice.fullVersion = ua.substr(window.BBDevice.indexOfVersion); window.BBDevice.fullVersion = window.BBDevice.fullVersion.substr(0, window.BBDevice.fullVersion.indexOf(" ")); window.BBDevice.version = window.BBDevice.fullVersion.substr(0, window.BBDevice.fullVersion.indexOf(".")); } }} else if (ua.indexOf("MSIE 9.0") >= 0 || ua.indexOf("IEMobile/9.0") >= 0) { existingClasses = document.body.className = existingClasses + " win75";}
http://mpulp.mobi/2013/05/user-agent-sniffing-on-the-new-nyt-mobile-site/
http://mobile.nytimes.com
torsdag 24. oktober 13
![Page 47: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/47.jpg)
FEATURES OF A DDR
• Nice place to store custom stuff• “Business rules”• Specifics to your site
• Override feature detected features• If a feature works, but not well enough to make it useable
• False positives (not a HUGE issue, but still)
• Available server side too• Adapt and optimize stuff before sending to client
Device Descri
ption
Repository
torsdag 24. oktober 13
![Page 48: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/48.jpg)
EXAMPLE
if ($type_of_device == ”smartTV”)include(TVnav.php);
elseinclude(nav.php);
http://www.circleid.com/posts/20120111_analysis_of_server_side_mobile_web_detection/
torsdag 24. oktober 13
![Page 49: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/49.jpg)
EXAMPLE
if ($supports_h264)echo ‘<video .../>’;
elseecho ‘<a href=”...”>Download</a>’;
torsdag 24. oktober 13
![Page 50: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/50.jpg)
WHAT WE ENDED UP WITH
torsdag 24. oktober 13
![Page 51: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/51.jpg)
DEVICE DETECTIONSingle Capability
RequestGET http://ddr.demo.wew.io/c/model_name
Response{"model_name":"iPhone"}
Capability SetsRequestGET http://ddr.demo.wew.io/cset/mySet
Response{"capa1":"first capa value","capa2":"second capa value" ...}
Examples and documentation: https://github.com/whateverweb/device-detection
torsdag 24. oktober 13
![Page 52: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/52.jpg)
EXAMPLE
var http = new XMLHttpRequest();http.open("GET", "http://ddr.demo.wew.io/c/brand_name", true);http.onreadystatechange = function() {
if (http.readyState == 4)console.log(http.responseText);
}http.send();
torsdag 24. oktober 13
![Page 53: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/53.jpg)
EXAMPLE
public function get($capa){ foreach(getallheaders() as $key => $value) { if ($key !="Host") $this-‐>headers[] = $key . ': ' . $value; } $url = $this-‐>service . $capa; $curl = curl_init($url); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); curl_setopt($curl, CURLOPT_HTTPHEADER, $this-‐>headers); $this-‐>response = curl_exec($curl); curl_close($curl); return json_decode($this-‐>response)-‐>$capa;}
torsdag 24. oktober 13
![Page 54: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/54.jpg)
IMAGE OPTIMIZING
<img src="http://img.demo.wew.io/http://example.com/image.jpg"/>
Simple Usage
Advanced Usage<img src=”http://img.demo.wew.io/vpw_1024/bp_w/pc/w_31/m_48/n_98/http://example.com/img.png”/>
Examples and documentation: https://github.com/whateverweb/Image-Server
torsdag 24. oktober 13
![Page 55: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/55.jpg)
EXAMPLE
<div data-‐picture data-‐alt="A beautiful butterfly"> <div data-‐src="http://img.demo.wew.io/px_100/http://exampe.com/image.png"></div> <div data-‐src="http://img.demo.wew.io/px_320/http://exampe.com/image.png"
data-‐media="(min-‐width: 320px)"></div> <div data-‐src="http://img.demo.wew.io/px_320/@_2/http://exampe.com/image.png"
data-‐media="(min-‐width: 320px) and (-‐webkit-‐min-‐device-‐pixel-‐ratio: 2.0)"></div>
<noscript> <img src="http://img.demo.wew.io/px_10/http://exampe.com/image.png"> </noscript></div>
Picturefill: https://github.com/scottjehl/picturefill. Full example: https://github.com/whateverweb/Image-Server/blob/master/examples/picturefill/index.html
Using Picturefill
torsdag 24. oktober 13
![Page 56: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/56.jpg)
CSS OPTIMIZATION
Device Capabilities as Media Features
Removing overhead and excess styles
Examples and documentation: https://github.com/whateverweb/CSS-processor
@media (-‐wew-‐pointing-‐method: touchscreen){ a {
padding: 10px;}
}
@media all and (min-‐width: 1500px){ //removed for devices where 1500px is impossible. e.g. iPhones body{color: green;} }
Server S
ide renderi
ng
torsdag 24. oktober 13
![Page 57: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/57.jpg)
EXAMPLE
@import url('http://demo.wew.io/styles/iPadStyles.css') all and (-‐wew-‐model-‐name: iPad);
@import url(http://demo.wew.io/CSS-‐processor/examples/inlining/right.css) all and (min-‐device-‐width: 480px);
torsdag 24. oktober 13
![Page 58: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/58.jpg)
EXAMPLE<!doctype html><html><head>
<link rel="stylesheet" href="//css.demo.wew.io/http://example.com/style.css”/>
</head><body>
<img src="http://img.demo.wew.io/http://example.com/image.jpg"/>
<script> var w=new wew(); w.getSet("myset",cb);</script>
</body></html>
• Markup lives anywhere• CSS and images are proxied,
optimized and cached• Device data available client side
torsdag 24. oktober 13
![Page 59: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/59.jpg)
FTW?Does adaptive design have a
positive impact on performance?
torsdag 24. oktober 13
![Page 60: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/60.jpg)
EFFECT
0108215323430
Size
No WeW With WeW
01 0002 0003 0004 000
Time0
5751 1501 7252 300
Latency
20% less data transfer
50% faster download
73% reduced latency
torsdag 24. oktober 13
![Page 61: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/61.jpg)
BUT...
torsdag 24. oktober 13
![Page 62: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/62.jpg)
CAN’T DO MAGIC
0
975
1 950
2 925
3 900
Onload
no WeW with WeW
Only 4% faster in total
Due to lazy loading of assetsand repaints etc.
Lazy loading good
or bad? Depends...
torsdag 24. oktober 13
![Page 63: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/63.jpg)
MARSHALLHEADPHONES.COM
• Down from 1.6MB to 432KB
• Load time down from 6,1s to 1,9s
torsdag 24. oktober 13
![Page 64: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/64.jpg)
FUN-FACTLoading apple.com consume
1.41% of battery life.
http://www2012.wwwconference.org/proceedings/proceedings/p41.pdf
Not so
12 - 4% in 8 mins of web surfing
torsdag 24. oktober 13
![Page 65: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/65.jpg)
PERFORMANCE FRONT END STARTS WITH THE BACK END
Too much is left to the browser to figure out.
torsdag 24. oktober 13
![Page 66: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/66.jpg)
SUMMING UP
developer server internet telco network device browser
We......must do
stuff here...
...to relieve...
...and......to make life easier for...
...and...
torsdag 24. oktober 13
![Page 67: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/67.jpg)
THE RULES
1. Make Fewer HTTP Requests2. Use a Content Delivery Network3. Add an Expires Header4. Gzip Components5. Put Stylesheets at the Top6. Put Scripts at the Bottom7. Avoid CSS Expressions8. Make JavaScript and CSS External9. Reduce DNS Lookups10.Minify JavaScript11.Avoid Redirects12.Remove Duplicate Scripts13.Configure ETags14.Make AJAX Cacheable
By Steve Souders: http://stevesouders.com/hpws/rules.php
Most of these are implemented server side.
torsdag 24. oktober 13
![Page 68: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/68.jpg)
POOR IMPLEMENTATION SLOWS RENDERING DOWN, BUT SPEED IS REALLY ABOUT HOW FAST THE USER CAN
ACHIEVE HIS GOALS
WHAT IS SPEED, ANYWAY?
torsdag 24. oktober 13
![Page 69: Makingweb: Great front end performance starts on the server](https://reader034.vdocuments.mx/reader034/viewer/2022051817/5481114ab4af9fea158b5e37/html5/thumbnails/69.jpg)
John Arne Sæteråstwitter : @jonarnes
http://www.slideshare.net/jonarnes/
THANK YOU
?
torsdag 24. oktober 13