Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Fast Sites FTW!

Fast Sites FTW!

Tips and tricks to make your website load faster than 90% of those found on the web.

Reuben Cummings

April 09, 2019
Tweet

More Decks by Reuben Cummings

Other Decks in Programming

Transcript

  1. FAST SITES FTW!
    Central Illinois Web Professionals User Group
    April 9, 2019
    by Reuben Cummings

    View full-size slide

  2. @reubano
    – Google Research/webpagetest.org, 2017
    “The average time it takes to
    fully load a mobile landing
    page is 22 seconds.”

    View full-size slide

  3. PAGE SPEED EFFECT ON
    BOUNCE RATE
    Bounce rate
    0
    0.5
    1
    1.5
    2
    2.5
    Page load time (s)
    1 3 5 6 10
    Source: Google/SOASTA Research, 2017

    View full-size slide

  4. @reubano
    CASE STUDY:
    ICC
    https://icc.edu/

    View full-size slide

  5. @reubano
    BY THE NUMBERS
    Source: https://www.dareboost.com/en

    View full-size slide

  6. Source: Walt Disney Pictures
    ASSET
    MINIFICATION

    View full-size slide

  7. @reubano
    20 JAVASCRIPT FILES

    View full-size slide

  8. @reubano
    10 CSS FILES

    View full-size slide

  9. WEBSITE BUNDLERS

    View full-size slide

  10. BRUNCH-CONFIG.JS
    exports.plugins = {
    babel: {presets: ['latest']},
    postcss: {processors: [require('autoprefixer')]}
    };
    exports.files = {
    javascripts: {
    joinTo: {
    'vendor.js': /^(?!app)/,
    'app.js': /^app/
    }
    },
    stylesheets: {joinTo: 'app.css'}
    };

    View full-size slide

  11. PACKAGE.JSON
    {

    "devDependencies": {
    "brunch": "^2",
    "babel-brunch": "^6",
    "postcss-brunch": "^2",
    "sass-brunch": "^2",
    "uglify-js-brunch": "^2",
    "autoprefixer": "^6",
    "babel-preset-latest": “^6"
    }
    }

    View full-size slide

  12. Source: https://www.flickr.com/photos/darkroses
    FONTS

    View full-size slide

  13. @reubano
    5 REMOTE FONTS

    View full-size slide

  14. GITHUB.CSS
    @font-face {
    font-family: system;
    font-style: normal;
    font-weight: 300;
    src: local("Ubuntu Light"), local("Segoe UI
    Light"), local("Roboto-Light"), local("DroidSans"),
    local("Tahoma");
    }
    body {
    font-family: "system";
    }
    Source: css-tricks.com

    View full-size slide

  15. Source: https://www.flickr.com/photos/jim_belford
    IMAGES

    View full-size slide

  16. @reubano
    25 IMAGES

    View full-size slide

  17. IMAGE OPTIMIZERS
    kraken.io OptiPNG

    View full-size slide

  18. IMAGEMIN-BRUNCH
    $ npm install --save-dev imagemin-brunch
    $ brunch build --production
    Source: github.com/stawberri/imagemin-brunch

    View full-size slide

  19. IMAGEMIN-BRUNCH
    $ npm install --save-dev imagemin-brunch
    $ brunch build --production
    compiled 6 files into 2 files, copied 14 in 2.3 sec
    minified 9 images to save 334 kB in 5.3 sec
    Source: github.com/stawberri/imagemin-brunch

    View full-size slide

  20. INDEX.HTML
    src="small.jpg"
    srcset="medium.jpg 1000w, large.jpg 2000w"
    alt=“yah"
    >
    Source: css-tricks.com

    View full-size slide

  21. @reubano
    • Enable gzip compression
    • Utilize browser caching
    • Serve static files from a CDN
    • Use static site generators
    • Load javascript using “async”
    • Remove trackers
    BUT WAIT, THERE’S MORE…

    View full-size slide

  22. @reubano
    BY THE NUMBERS
    Source: https://www.dareboost.com/en

    View full-size slide

  23. @reubano
    6 TOTAL REQUESTS!

    View full-size slide

  24. @reubano
    HEAD TO HEAD
    Source: https://www.dareboost.com/en

    View full-size slide

  25. @reubano Source: https://www.dareboost.com/en

    View full-size slide

  26. @reubano Source: https://www.dareboost.com/en

    View full-size slide

  27. @reubano
    RESOURCES
    • https://think.storage.googleapis.com/docs/mobile-page-
    speed-new-industry-benchmarks.pdf
    • https://www.dareboost.com/en/report/
    d_5cabb8d5e967904c6f44082f
    • https://www.webpagetest.org
    • https://tools.pingdom.com/
    • http://brunch.io/

    View full-size slide

  28. @reubano
    RESOURCES
    • https://css-tricks.com/snippets/css/system-font-stack/
    • https://cloudinary.com/
    • https://kraken.io/
    • http://optipng.sourceforge.net/
    • https://pngquant.org/
    • https://github.com/stawberri/imagemin-brunch

    View full-size slide

  29. @reubano
    RESOURCES
    • https://css-tricks.com/responsive-images-youre-just-
    changing-resolutions-use-srcset/
    • https://www.staticgen.com/
    • https://staticsitegenerators.net/
    • https://www.netlify.com/

    View full-size slide

  30. THANKS!
    Reuben Cummings
    @reubano

    View full-size slide