Fast Sites FTW!

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

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