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 Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

  6. Source: Walt Disney Pictures
    ASSET
    MINIFICATION

    View Slide

  7. @reubano
    20 JAVASCRIPT FILES

    View Slide

  8. @reubano
    10 CSS FILES

    View Slide

  9. WEBSITE BUNDLERS

    View Slide

  10. View Slide

  11. 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 Slide

  12. 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 Slide

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

    View Slide

  14. @reubano
    5 REMOTE FONTS

    View Slide

  15. 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 Slide

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

    View Slide

  17. @reubano
    25 IMAGES

    View Slide

  18. IMAGE OPTIMIZERS
    kraken.io OptiPNG

    View Slide

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

    View Slide

  20. 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 Slide

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

    View Slide

  22. @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 Slide

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

    View Slide

  24. @reubano
    6 TOTAL REQUESTS!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  28. @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 Slide

  29. @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 Slide

  30. @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 Slide

  31. THANKS!
    Reuben Cummings
    @reubano

    View Slide