Slide 1
Slide 1 text
Beyond Breakpoints
@renettarenula Aysha Anggraini Rakuten Tech Conf ‘16
Improving performance for responsive sites
Slide 2
Slide 2 text
1. Optimize Web Fonts
2. Reduce Render-Blocking Scripts
3. Optimize Images
Slide 3
Slide 3 text
Optimize Web Fonts
Slide 4
Slide 4 text
@font-face {
font-family: 'Open Sans';
src: url('open-sans.woff2') format("woff2"),
url('open-sans.woff') format("woff");
}
CSS
Does not guarantee load of fonts
Slide 5
Slide 5 text
body {
font-family: 'Open Sans', sans-serif;
}
CSS
Will only load when font is specifically declared under a rule
Slide 6
Slide 6 text
Problem
Construct
DOM
Construct
CSSOM
Download
Fonts!
Web fonts are lazy loaded!
Slide 7
Slide 7 text
Problem
Image Credit: Bram Stein @ Smashing Magazine’s Real Life Responsive Web Design (Web Fonts Performance)
Results in FOUT or FOIT
Slide 8
Slide 8 text
Problem
Different browsers handles this differently
FOUT & FOIT
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Present Solution
Define fallback
& web fonts in
CSS
Basic Font Loading Strategy
Leverage
browser cache
Load fonts
dynamically &
use it
Slide 12
Slide 12 text
Define fallback & web fonts in CSS
@font-face {
font-family: 'Open Sans';
src: url('open-sans.woff2') format("woff2"),
url('open-sans.woff') format("woff");
}
CSS
Slide 13
Slide 13 text
Define fallback & web fonts in CSS
Detect specific
font loa
body {
font-family: sans-serif;
}
CSS
.fonts-loaded {
body {
font-family: 'Open Sans', sans-serif;
}
}
Slide 14
Slide 14 text
Present Solution
Define fallback
& web fonts in
CSS
Basic Font Loading Strategy
Leverage
browser cache
Load fonts
dynamically &
use it
Slide 15
Slide 15 text
Font Face Observer
by Bram Stein
https://github.com/bramstein/fontfaceobserver
Slide 16
Slide 16 text
Detect specific font load (Basic Font Load)
Detect
specific font
loa
font.load().then(function () {
// Font successfully loads; use webfont class
window.document.documentElement.className += " fonts-loaded";
});
JS
// Font Face Observer is written by Bram Stein:
// https://github.com/bramstein/fontfaceobserver
var font = new FontFaceObserver("Open Sans", {weight: 400});
Slide 17
Slide 17 text
Toggle class in order to use web fonts
Detect specific
font loa
body {
font-family: sans-serif;
}
.fonts-loaded {
body {
font-family: 'Open Sans', sans-serif;
}
}
CSS
Your content here
HTMLSlide 18
Slide 18 text
No content
Slide 19
Slide 19 text
Present Solution
Define fallback
& web fonts in
CSS
Basic Font Loading Strategy
Leverage
browser cache
Load fonts
dynamically &
use it
Slide 20
Slide 20 text
Leverage browser cache
Detect
specific font
loa
HTML
Set a cookie!
Slide 21
Slide 21 text
Leverage Browser Cache
Detect
specific font
loa
// do not do anything if class is set
if (w.document.documentElement.className.indexOf("fonts-loaded") > -1) {
return;
}
var font = new FontFaceObserver("Open Sans", {weight: 400});
font.load().then(function () {
window.document.documentElement.className += " fonts-loaded";
// Set cookie to optimize for repeat views
document.cookie = "fonts_loaded=true; domain=" + viki.com + "; path=/";
});
JS
Slide 22
Slide 22 text
Problem
Image Credit: Bram Stein @ Smashing Magazine’s Real Life Responsive Web Design (Web Fonts Performance)
Slide 23
Slide 23 text
Future Solution
Give ability to define custom loading logic
Preload
Slide 24
Slide 24 text
Future Solution
FOUT and FOIT can be reduced!
Image Credit: https://www.bramstein.com/writing/preload-hints-for-web-fonts.html
Slide 25
Slide 25 text
Future Solution
HTML
Important in
order to set
priority
Slide 26
Slide 26 text
Future Solution
Source: http://caniuse.com/#search=preload
Slide 27
Slide 27 text
Future Solution
Determines how a font-face is displayed when it
is downloading & once it is downloaded
Font-Display
Slide 28
Slide 28 text
Future Solution
@font-face {
font-family: 'Open Sans';
font-display: 'auto';
src: local('Open Sans Light'), local('OpenSans-Light'),
url('open-sans-v13-latin-300.woff2') format('woff2');
}
CSS
Slide 29
Slide 29 text
Future Solution
@font-face {
font-display: auto | block | swap | fallback | optional;
} Determine by user
agent
Invisible text & swap
once fonts is loaded
(FOIT)
Show fallback & swap
once fonts is loaded
(FOUT)
Same as swap but
will show fallback
when font fails to
load
Font is used if it is
already downloaded;
else fallback is used
Source: https://tabatkins.github.io/specs/css-font-display/#font-display-desc
Slide 30
Slide 30 text
Font Display Spec
by Tab Atkins
https://tabatkins.github.io/specs/css-font-display/#font-display-desc
Slide 31
Slide 31 text
Future Solution
Detect specific
font loa
@font-face {
font-family: 'Open Sans';
font-display: 'fallback';
src: local('Open Sans'), local('OpenSans-Light'),
url('open-sans.woff2') format('woff2');
}
CSS
HTML
Can be combined to make font loading efficient
Slide 32
Slide 32 text
Comprehensive Guide to Font
Loading Strategy
by Zach Leatherman
https://www.zachleat.com/web/comprehensive-webfonts/
Slide 33
Slide 33 text
Web Font Loading Patterns
by Bram Stein
https://www.bramstein.com/writing/web-font-loading-patterns.html
Slide 34
Slide 34 text
Reduce Render-Blocking
Scripts
Slide 35
Slide 35 text
Problem
Document
Object Model
(DOM)
CSS Object
Model
(CSSOM)
Render Tree Layout Paint
CSS is render
blocking!
Contains both
content & style
information
Browser calculates
the size & position of
elements
Browser picks up
layout results and
paint pixels to the
screen
Slide 36
Slide 36 text
Problem
HTML Parser
Script Download
Parser Paused
Script Execute
HTML Parser
Script
Source: http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
Slide 37
Slide 37 text
Document
Object Model
(DOM)
CSS Object
Model
(CSSOM)
Render Tree Layout Paint
CSS is render
blocking!
Contains both
content & style
information
Browser calculates
the size & position
of elements
Browser picks up
layout results and
paint pixels to the
screen
Time spent on each process should be minimize!
HTML Parser
Script Download
Parser Paused
Script Execute
HTML Parser
Script
Slide 38
Slide 38 text
Present Solution
HTML
Slide 39
Slide 39 text
Present Solution
HTML Parser
Script Download
Parser Paused
Script Execute
HTML Parser
Async
Defer
HTML Parser
Script Download
Script Execute
Source: http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
Slide 40
Slide 40 text
Present Solution
Async — Scripts with no dependencies
Execution order
implementation is
buggy in IE < 10
Removing dependencies completely or inline them
Only applies to
small JS code
Defer — Scripts with dependencies; Execution order matters
Slide 41
Slide 41 text
loadCSS
by Filament Group
https://github.com/filamentgroup/loadCSS
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
Size of inline scripts & CSS < 14KB
“...server can send up to 10 TCP packets on a new connection (~14KB) in first
roundtrip, and then it must wait for the client to acknowledge this data before it
can grow its congestion window and proceed to deliver more data.”
“Due to this TCP behavior, it is important to optimize your content to minimize the
number of roundtrips required to deliver the necessary data to perform the first
render of the page. Ideally, the ATF (above the fold) content should fit under
14KB — this allows the browser to paint the page after just one roundtrip…”
Source: https://developers.google.com/speed/docs/insights/mobile#delivering-the-sub-one-second-rendering-experience
Slide 44
Slide 44 text
Limitations of HTTP/1.x
No compression of response headers
No effective resource prioritization
Multiple connections instead of one
Slide 45
Slide 45 text
HTTP/2
Awesome extension to HTTP/1.x
Future Solution
Slide 46
Slide 46 text
“HTTP/2 modifies how the data is formatted
(framed) and transported between the client
and server, both of whom manage the entire
process, and hides all the complexity from
our applications within the new framing
layer.” - Ilya Grigorik
Source: https://hpbn.co/http2/
Slide 47
Slide 47 text
HTTP/1.x
No compression of response
headers
No effective resource
prioritization
Multiple connections instead
of one
HTTP/2
Compress response headers
Allow prioritization of request
One connection for multiple
concurrent exchange
(multiplexing)
Slide 48
Slide 48 text
Source: https://hpbn.co/http2/#request-and-response-multiplexing
Future Solution
Slide 49
Slide 49 text
Future Solution
Server Push
Allows push of resources to client without client
requesting for it
Slide 50
Slide 50 text
High Performance Browser Networking
by Ilya Grigorik
https://hpbn.co/
Slide 51
Slide 51 text
Optimize Images
Slide 52
Slide 52 text
Problem
Verbose syntax
W-descriptors -
describe width of
image
Decide display
dimension
Verbose syntax
W-descriptors -
describe width of
image
Decide display
dimension
Slide 53
Slide 53 text
Problem
Browser
Download
Fonts!
Construct
DOM
Request for
image
Browser do not know the
image dimension & display
dimension
Slide 54
Slide 54 text
Variable
Width Images
Present Solution
Art Direction
Fixed Width
Images
Dimension remains the
same in other viewport.
E.g. Logo; Profile Picture
Dimensions vary based on
viewport. E.g. Header
images, thumbnails, etc.
Customize image based on
specific breakpoints.
Image varies based on
quality & crop area
Slide 55
Slide 55 text
Present Solution
Fallback - DPR
of 1x
X descriptors:
Pixel density of
screen
Fixed Width Images
Fallback - DPR
of 1x
X descriptors:
Pixel density of
screen
Fixed Width Images
Slide 56
Slide 56 text
Example - Variable width images
Slide 57
Slide 57 text
Present Solution
VW is viewport width
100vw = 100% of viewport width
75vw = 75% of the viewport width
Browser will use srcset and sizes to serve
image that match the condition
Variable Width Images
VW is viewport width
100vw = 100% of viewport width
75vw = 75% of the viewport width
Browser will use srcset and sizes to serve
image that match the condition
Variable Width Images
Slide 58
Slide 58 text
Browser Viewport: 900px
900 * 0.50 =
450
Retina display with DPR of 2 will
load (450 * 2) px of image
Slide 59
Slide 59 text
Image Credit: Yoav Weiss @ Smashing Magazine’s Real Life Responsive Web Design (Responsive Images)
Example - Art Direction
Slide 60
Slide 60 text
Present Solution
Must have img tag for
fallback & must appear
after all sources
You can have as many
sources as you want &
it will be obeyed
Must have img tag for
fallback & must appear
after all sources
You can have as many
sources as you want &
it will be obeyed
Slide 61
Slide 61 text
Future Solution
Missing link between server & client for layout
information
Client Hints
Slide 62
Slide 62 text
Server
DPR / Viewport-Width / Width
Perfect fit image!
Future Solution
Browser
Slide 63
Slide 63 text
Make markup simpler!
Future Solution
No longer need srcset
since image resizing will
be done server side
Slide 64
Slide 64 text
Future Solution
Enable Client Hints
Slide 65
Slide 65 text
Future Solution
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
Automating resource selection with
Client Hints
by Ilya Grigorik
https://developers.google.com/web/updates/2015/09/automating-resou
rce-selection-with-client-hints
Slide 68
Slide 68 text
The Anatomy of Responsive Images
by Jake Archibald
https://jakearchibald.com/2015/anatomy-of-responsive-images/
Slide 69
Slide 69 text
Responsive Images
by Yoav Weiss
Smashing Magazine Book 5: Real-Life Responsive Web Design
Slide 70
Slide 70 text
Thank You!
renaysha.me codepen.io/rrenula @renettarenula