Fast Sites FTW!

Transcript

1. 1.

   FAST SITES FTW! Central Illinois Web Professionals User Group April

   9, 2019 by Reuben Cummings
2. 2.

   @reubano – Google Research/webpagetest.org, 2017 “The average time it takes

   to fully load a mobile landing page is 22 seconds.”
3. 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
4. 4.

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

5. 5.

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

6. 6.

   Source: Walt Disney Pictures ASSET MINIFICATION

7. 7.

   @reubano 20 JAVASCRIPT FILES

8. 8.

   @reubano 10 CSS FILES

9. 9.

   WEBSITE BUNDLERS

10. 10.

    None
11. 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'} };
12. 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" } }
13. 13.

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

14. 14.

    @reubano 5 REMOTE FONTS

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

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

17. 17.

    @reubano 25 IMAGES

18. 18.

    IMAGE OPTIMIZERS kraken.io OptiPNG

19. 19.

    IMAGEMIN-BRUNCH $ npm install --save-dev imagemin-brunch $ brunch build --production

    Source: github.com/stawberri/imagemin-brunch
20. 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
21. 21.

    INDEX.HTML <img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt=“yah" > Source:

    css-tricks.com
22. 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…
23. 23.

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

24. 24.

    @reubano 6 TOTAL REQUESTS!

25. 25.

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

26. 26.

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

27. 27.

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

28. 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/
29. 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
30. 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/
31. 31.

    THANKS! Reuben Cummings @reubano