Beyond Breakpoints - Improving Performance for Responsive Web

Beyond Breakpoints @renettarenula Aysha Anggraini Rakuten Tech Conf ‘16 Improving
performance for responsive sites

1. Optimize Web Fonts 2. Reduce Render-Blocking Scripts 3. Optimize
Images

Optimize Web Fonts

@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

body { font-family: 'Open Sans', sans-serif; } CSS Will only
load when font is specifically declared under a rule

Problem Construct DOM Construct CSSOM Download Fonts! Web fonts are
lazy loaded!

Problem Image Credit: Bram Stein @ Smashing Magazine’s Real Life
Responsive Web Design (Web Fonts Performance) Results in FOUT or FOIT

Problem Different browsers handles this differently FOUT & FOIT

Present Solution Define fallback & web fonts in CSS Basic
Font Loading Strategy Leverage browser cache Load fonts dynamically & use it

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

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; } }

Font Face Observer by Bram Stein https://github.com/bramstein/fontfaceobserver

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});

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 <html class="fonts-loaded"> <body>  <p>Your content here</p> </body> </html> HTML

Leverage browser cache Detect specific font loa 
<html class="fonts-loaded">  <html>  HTML Set a cookie!

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

Problem Image Credit: Bram Stein @ Smashing Magazine’s Real Life
Responsive Web Design (Web Fonts Performance)

Future Solution Give ability to define custom loading logic Preload

Future Solution FOUT and FOIT can be reduced! Image Credit:
https://www.bramstein.com/writing/preload-hints-for-web-fonts.html

Future Solution <link rel="preload" href="assets/opensans.woff2" as="font" type="font/woff2" crossorigin> HTML Important
in order to set priority

Future Solution Source: http://caniuse.com/#search=preload

Future Solution Determines how a font-face is displayed when it
is downloading & once it is downloaded Font-Display

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

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

Font Display Spec by Tab Atkins https://tabatkins.github.io/specs/css-font-display/#font-display-desc

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 <link rel="preload" href="open-sans.woff2" as="font" type="font/woff2"> HTML Can be combined to make font loading efficient

Comprehensive Guide to Font Loading Strategy by Zach Leatherman https://www.zachleat.com/web/comprehensive-webfonts/

Web Font Loading Patterns by Bram Stein https://www.bramstein.com/writing/web-font-loading-patterns.html

Reduce Render-Blocking Scripts

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

Problem HTML Parser Script Download Parser Paused Script Execute HTML
Parser Script Source: http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

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

Present Solution HTML <script src="script.js" async></script> <script src="script.js" defer></script>

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

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

loadCSS by Filament Group https://github.com/filamentgroup/loadCSS

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

Limitations of HTTP/1.x No compression of response headers No effective
resource prioritization Multiple connections instead of one

HTTP/2 Awesome extension to HTTP/1.x Future Solution

“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/

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)

Source: https://hpbn.co/http2/#request-and-response-multiplexing Future Solution

Future Solution Server Push Allows push of resources to client
without client requesting for it

High Performance Browser Networking by Ilya Grigorik https://hpbn.co/

Optimize Images

Problem <img srcset="image_400.jpg 400w, image_600.jpg 600w, image_900.jpg 900w, image_1200.jpg 1200w"
sizes="(min-width: 840px) 50vw, (min-width: 450px) 75vw, 100vw" src="image_600.jpg" alt="Some image for example’s sake"> Verbose syntax W-descriptors - describe width of image Decide display dimension

Problem Browser Download Fonts! Construct DOM Request for image Browser
do not know the image dimension & display dimension

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

Present Solution <img src="logo_500px.jpg" srcset="logo_700px.jpg 1.5x, logo_1000px.jpg 2x, logo_1500px.jpg 3x"
width="500" alt="logo image"> Fallback - DPR of 1x X descriptors: Pixel density of screen Fixed Width Images

Example - Variable width images

Present Solution <img srcset="image_400.jpg 400w, image_600.jpg 600w, image_900.jpg 900w, image_1200.jpg
1200w" sizes="(min-width: 840px) 50vw, (min-width: 450px) 75vw, 100vw" src="image_600.jpg" alt="Some image for example’s sake"> 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

<img srcset="image_450.jpg 450w, image_600.jpg 600w, image_900.jpg 900w, image_1200.jpg 1200w" sizes="(min-width:
840px) 50vw, (min-width: 600px) 75vw, 100vw" src="image_600.jpg" alt="Some image for example’s sake"> Browser Viewport: 900px 900 * 0.50 = 450 Retina display with DPR of 2 will load (450 * 2) px of image

Image Credit: Yoav Weiss @ Smashing Magazine’s Real Life Responsive
Web Design (Responsive Images) Example - Art Direction

Present Solution <picture> <source media="(min-width: 840px)" srcset="image-large.jpg"> <source media="(min-width: 600px)"
srcset="image-medium.jpg"> <img src="image-small.jpg" alt="Art directions"> </picture> Must have img tag for fallback & must appear after all sources You can have as many sources as you want & it will be obeyed

Future Solution Missing link between server & client for layout
information Client Hints

Server DPR / Viewport-Width / Width Perfect fit image! Future
Solution Browser

<img srcset="image_400.jpg 400w, image_600.jpg 600w, image_900.jpg 900w, image_1200.jpg 1200w" sizes="(min-width:
840px) 50vw, (min-width: 450px) 75vw, 100vw" src="image.jpg" alt="Example"> <img src="image.jpg" sizes="(min-width: 840px) 50vw, (min-width: 450px) 75vw, 100vw" alt="Example"> Make markup simpler! Future Solution No longer need srcset since image resizing will be done server side

Future Solution <meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width"> Enable Client Hints

<img src="sunset.png" alt="Beautiful Sunset" sizes="50vw"/> Future Solution

Automating resource selection with Client Hints by Ilya Grigorik https://developers.google.com/web/updates/2015/09/automating-resou
rce-selection-with-client-hints

The Anatomy of Responsive Images by Jake Archibald https://jakearchibald.com/2015/anatomy-of-responsive-images/

Responsive Images by Yoav Weiss Smashing Magazine Book 5: Real-Life
Responsive Web Design

Thank You! renaysha.me codepen.io/rrenula @renettarenula

Beyond Breakpoints - Improving Performance for ...

Beyond Breakpoints - Improving Performance for Responsive Web

More Decks by Ren Aysha

Other Decks in Technology

Featured

Transcript