Scribd Logo
Upload

Welcome to Scribd!

  • 28 views

    RWD Bloat

    Uploaded by

    vikasSVNIT
    This document discusses responsive web design (RWD) and performance. It describes how the author optimized a website using RWD techniques like SVG sprites and critical CSS to improve performance metrics like speed index. Various techniques are tested and the results show significant performance improvements, indicating that RWD does not inherently hurt performance and the issues come from poor implementations. The document advocates for a focus on performance from all roles in the development process.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    RWD Bloat

    Uploaded by

    vikasSVNIT
    28 views93 pages
    This document discusses responsive web design (RWD) and performance. It describes how the author optimized a website using RWD techniques like SVG sprites and critical CSS to improve performance metrics like speed index. Various techniques are tested and the results show significant performance improvements, indicating that RWD does not inherently hurt performance and the issues come from poor implementations. The document advocates for a focus on performance from all roles in the development process.

    Original Description:

    Responsive web design

    Original Title

    RWD_BLOAT

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document discusses responsive web design (RWD) and performance. It describes how the author optimized a website using RWD techniques like SVG sprites and critical CSS to improve performance metrics like speed index. Various techniques are tested and the results show significant performance improvements, indicating that RWD does not inherently hurt performance and the issues come from poor implementations. The document advocates for a focus on performance from all roles in the development process.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    28 views93 pages

    RWD Bloat

    Uploaded by

    vikasSVNIT
    This document discusses responsive web design (RWD) and performance. It describes how the author optimized a website using RWD techniques like SVG sprites and critical CSS to improve performance metrics like speed index. Various techniques are tested and the results show significant performance improvements, indicating that RWD does not inherently hurt performance and the issues come from poor implementations. The document advocates for a focus on performance from all roles in the development process.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 93

    RWD

    BLOAT
    Dave Rupert @davatron5000

    K
    C
    A
    T
    T
    A THE
    F
    O
    E
    T
    I
    S
    B
    E

    paravelinc.com

    retailmenot.com

    shoptalkshow.com

    RWD IS BAD FOR


    PERFORMANCE.

    IM KINDA
    POST-RWD

    POST EXPLAINING WHY RWD IS A


    PRETTY GREAT AND INEXPENSIVE
    MULTI-DEVICE WEB STRATEGY

    RWD IS BAD FOR


    PERFORMANCE.

    Okay. What
    problems are
    you having?

    Oh, you know

    Oh, you know


    jQuery

    Oh, you know


    jQuery
    uhh

    Oh, you know


    jQuery
    uhh
    web fonts

    Oh, you know


    jQuery
    uhh
    web fonts

    images

    Oh, you know


    jQuery

    images

    uhh

    uhh

    web fonts

    Oh, you know


    jQuery

    images

    uhh

    uhh

    web fonts

    web apps?

    NOT REALLY
    RWD SPECIFIC

    WEBSITES 2014
    2000

    Transfer KB

    1667

    1333

    Image KB
    1000
    12/2014 1/2015 2/2015 3/2015 4/2015 5/2015 6/2015 7/2015 8/2015 9/2015 10/2015 11/2015

    RWD IS BAD FOR


    PERFORMANCE.

    A WEBSITE IN 2014

    RWD IS BAD FOR


    PERFORMANCE.

    BLAME THE
    IMPLEMENTATION,
    NOT THE
    TECHNIQUE.
    Tim Kadlec

    FORDS ARENT MADE


    WELL, SO CARS ARENT
    A VIABLE MODE OF
    TRANSPORTATION

    but surely
    theres
    footprint

    So I examined the
    best website ever
    made

    FACTS

    Im p experienced with RWD


    I care about performance
    I have third-party ads
    I have third-party comments
    I have multiple web fonts
    Including an icon font!
    I use jQuery GASP! OH THE HORROR! THE SHAME!!!!!!!1

    TOTAL: 174kb
    16%

    3%
    14%

    24%

    24%

    18%

    HTML
    CSS
    JS
    Images
    Fonts
    Analytics & Ads

    CSS: 24kb
    Media Queries

    2.4kb

    10%

    Vendor Prefixes

    1.4kb

    6%

    JS: 41.2kb
    jQuery

    33.1kb

    78%

    Prism.js, Lettering,
    etc

    7kb

    17.3%

    FitVids, FitText

    2kb

    4.7%

    Images: 31.92kb

    Images: 31.92kb

    Fonts: 42.6kb
    Open Sans

    31.7kb

    54.1%

    Symbolset

    26.8kb

    45.8%

    TOTAL COST OF
    RESPONSIVE
    WEB DESIGN

    4.4KB

    SO, NOT RWD.

    LETS TAKE A
    DEEPER LOOK

    Home

    Article

    PageSpeed (Mobile)

    79

    78

    PageSpeed (Desktop)

    93

    91

    Start Render (3G)

    1.3s

    1.5s

    DOMContentLoaded

    1.77s

    1.83s

    Speed Index (3G)

    1446

    1749

    Speed Index (n) Some hippie math that tells


    you how fast it feels to load
    your website.

    HOW FAST IS FAST


    ENOUGH?

    http://timkadlec.com/2014/01/fast-enough/

    http://timkadlec.com/2014/01/fast-enough/

    #PROTIP

    IF PAUL IRISH FROM GOOGLE SAYS YOUR


    WEBSITE SHOULD LOAD WITH A SPEED
    INDEX UNDER 1000, YOUR WEBSITE
    SHOULD LOAD WITH A SPEED INDEX
    UNDER 1000.

    PROBLEMS
    No text until ~2.5 seconds
    Webfonts blocking type rendering?
    Sub-optimal image spriting (172 icon font)?
    Time to first-byte is ~500ms, has no CSS in it

    BASELINE
    Home

    Article

    PageSpeed (Mobile)

    79

    78

    PageSpeed (Desktop)

    93

    91

    Speed Index (3G)

    1446

    1749

    0. Normalize
    CSS Reset

    Normalize

    CSS Selectors

    679

    578

    Home Speed Index

    1446

    1376

    Article Speed Index

    1749

    1412

    1. Unblock fonts
    Fonts in <head>

    Fonts with
    loadCSS()

    Home Speed Index

    1376

    1327

    Article Speed Index

    1412

    1284

    function loadCSS( href, before, media ){


    "use strict";
    var ss = window.document.createElement( "link" );
    var ref = before || window.document.getElementsByTagName( "script" )[ 0 ];
    var sheets = window.document.styleSheets;
    ss.rel = "stylesheet";
    ss.href = href;
    ss.media = "only x";
    ref.parentNode.insertBefore( ss, ref );
    function toggleMedia(){
    var defined;
    for( var i = 0; i < sheets.length; i++ ){
    if( sheets[ i ].href && sheets[ i ].href.indexOf( href ) > -1 ){
    defined = true;
    }
    }
    if( defined ){
    ss.media = media || "all";
    }
    else {
    setTimeout( toggleMedia );
    }
    }
    toggleMedia();
    return ss;
    }

    2. No jQuery

    2. No jQuery

    3. SVG Sprites
    <svg title="Home">
    <use xlink:href="/images/spritemap.svg#icon-house"></use>
    </svg>

    http://css-tricks.com/svg-sprites-use-better-icon-fonts/

    3. SVG Sprites
    Icon Font

    SVG Sprite

    Home Speed Index

    1327

    1264

    Article Speed Index

    1284

    1222

    4. CSS Cleanup
    Icon Font

    SVG Sprite

    Home Speed Index

    1264

    938

    Article Speed Index

    1222

    1126

    300pts just for cleaning house!

    MAKE YOUR
    WEBSITE FASTER
    WITH THIS ONE
    WEIRD TRICK.

    THE NEED FOR


    PERCEIVED
    SPEED

    THE NEED FOR


    PERCEIVED
    SPEED

    5. CRITICAL CSS
    Calculate style rules that appear above the fold
    Print them in an inline <style> block in the <head>
    Lazyload your stylesheet at the bottom of the page

    <html>
    <head>
    <style>
    .blue{color:blue;}
    </style>
    </head>
    <body>
    <div class="blue">
    Hello, world!
    </div>
    <script>
    function loadCSS( file ) {
    // stuff
    }
    loadCSS('css/stylesheet.css');
    </script>
    </body>
    </html>

    PAINT WITH THE


    FIRST PACKET

    5. CRITICAL CSS
    Normal

    Critical CSS

    Home Speed Index

    938

    728

    Article Speed Index

    1126

    1065

    FINAL RESULTS
    Home

    Article

    PageSpeed (Mobile)

    79 98

    78 96

    PageSpeed (Desktop)

    93 98

    91 97

    Speed Index (3G)

    1446 728

    1749 1065

    Yeah, sure.
    Maybe on a tiny
    blog. What about
    a real website?

    47 HTTP Requests
    3.6MB
    Speed Index 1307

    DESIGN
    DIRECTION

    3 Webfonts
    38 images
    1.456MB in animated GIFs
    Chart.js
    Scroll-triggered animations
    and a Quiz with audio

    Two-color PNGs

    PERFORMANCE
    ANXIETY

    Enable GZIP
    Optimize images
    Minify and compress JS
    Lazyload images
    Setup Critical CSS
    Async/Defer Scripts
    More image optimization

    50 HTTP Requests
    2.4MB
    Speed Index 651

    HAS 5K RETINA MAC AND


    A 3MB CONNECTION

    TOOLS

    LESSON:
    THROTTLING IS SUPER IMPORTANT
    SINCE MOST OF THE WORLD WONT
    HAVE GOOGLE FIBER FOR A FEW MORE
    YEARS. FUCK YEAH, AUSTIN TX.

    PNGQuant

    LESSON:
    DESIGNERS, YOURE JOB IS NOT DONE
    UNTIL THE SITE SHIPS.

    LESSON:
    PERFORMANCE IS EVERYONES JOB.
    NOT JUST DEVELOPERS.

    THANKS
    Dave Rupert @davatron5000

    ONE MORE
    THING

    OVERUNDER
    Simple trivia for social people.
    Follow @overunderapp

    THANKS
    Dave Rupert @davatron5000

    You might also like