Fast Sites FTW!

869402f85dcbabcef3da1ee61b88a45a?s=47 Reuben Cummings
April 09, 2019
Programming
1
11

Fast Sites FTW!

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

869402f85dcbabcef3da1ee61b88a45a?s=128

Reuben Cummings

April 09, 2019
Tweet

More Decks by Reuben Cummings

See All by Reuben Cummings
869402f85dcbabcef3da1ee61b88a45a?s=48 reubano
1
8
869402f85dcbabcef3da1ee61b88a45a?s=48 reubano
0
38
869402f85dcbabcef3da1ee61b88a45a?s=48 reubano
1
54
869402f85dcbabcef3da1ee61b88a45a?s=48 reubano
1
290
869402f85dcbabcef3da1ee61b88a45a?s=48 reubano
3
290
869402f85dcbabcef3da1ee61b88a45a?s=48 reubano
0
60
869402f85dcbabcef3da1ee61b88a45a?s=48 reubano
1
150
869402f85dcbabcef3da1ee61b88a45a?s=48 reubano
0
62
869402f85dcbabcef3da1ee61b88a45a?s=48 reubano
0
230

Other Decks in Programming

See All in Programming
4cd9f68f08d2200de34043e4ce049d03?s=48 yagieng
4
450
7d1521d950d9bc5697868830cb04ff2f?s=48 yimajo
0
110
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
0
130
8a6e58b272b266faf22d8a3b2927624f?s=48 j796160836
2
530
Acd2f6f7498ea41881e161e191aa7c02?s=48 yattom
3
440
C0e29dade6ec33081689ac135a269b45?s=48 crgarridos
1
150
20c5ddcad23304aed77ce8c3aa020562?s=48 tkmru
2
260
D331d219bbb80155f3687db8009984f0?s=48 kinkinkon1009
0
660
37b01da9150c1e789f35771b06d36890?s=48 morimorihoge
4
440
B1bddcb899ec3060fe9913f3cb70dbb6?s=48 lmt_swallow
9
2.6k
0eba807ea367a2b648480d20f52d3af3?s=48 haco
0
220
4ae5ae2c4411d41bd8c7e75830ed313d?s=48 myamagishi
1
210

Featured

See All Featured
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
286
110k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
320
53k
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
175
7.3k
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
585
200k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
683
180k
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
72
7.4k
7653c7c449918ff6542880a8c284f5e7?s=48 jponch
101
4.9k
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
113
25k
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
109
9.7k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
168
6.9k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
85
8.4k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
166
19k

Transcript

  1. FAST SITES FTW! Central Illinois Web Professionals User Group April

    9, 2019 by Reuben Cummings

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

    to fully load a mobile landing page is 22 seconds.”

  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. @reubano CASE STUDY: ICC https://icc.edu/

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

  6. Source: Walt Disney Pictures ASSET MINIFICATION

  7. @reubano 20 JAVASCRIPT FILES

  8. @reubano 10 CSS FILES

  9. WEBSITE BUNDLERS

  10. None

  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. 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. Source: https://www.flickr.com/photos/darkroses FONTS

  14. @reubano 5 REMOTE FONTS

  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. Source: https://www.flickr.com/photos/jim_belford IMAGES

  17. @reubano 25 IMAGES

  18. IMAGE OPTIMIZERS kraken.io OptiPNG

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

    Source: github.com/stawberri/imagemin-brunch

  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. INDEX.HTML <img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt=“yah" > Source:

    css-tricks.com

  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. @reubano BY THE NUMBERS Source: https://www.dareboost.com/en

  24. @reubano 6 TOTAL REQUESTS!

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

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

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

  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. @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. @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. THANKS! Reuben Cummings @reubano