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.

869402f85dcbabcef3da1ee61b88a45a?s=128

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