Tips and tricks to make your website load faster than 90% of those found on the web.
FAST SITES FTW!Central Illinois Web Professionals User GroupApril 9, 2019by Reuben Cummings
View Slide
@reubano– Google Research/webpagetest.org, 2017“The average time it takes tofully load a mobile landingpage is 22 seconds.”
PAGE SPEED EFFECT ONBOUNCE RATEBounce rate00.511.522.5Page load time (s)1 3 5 6 10Source: Google/SOASTA Research, 2017
@reubanoCASE STUDY:ICChttps://icc.edu/
@reubanoBY THE NUMBERSSource: https://www.dareboost.com/en
Source: Walt Disney PicturesASSETMINIFICATION
@reubano20 JAVASCRIPT FILES
@reubano10 CSS FILES
WEBSITE BUNDLERS
BRUNCH-CONFIG.JSexports.plugins = {babel: {presets: ['latest']},postcss: {processors: [require('autoprefixer')]}};exports.files = {javascripts: {joinTo: {'vendor.js': /^(?!app)/,'app.js': /^app/}},stylesheets: {joinTo: 'app.css'}};
PACKAGE.JSON{…"devDependencies": {"brunch": "^2","babel-brunch": "^6","postcss-brunch": "^2","sass-brunch": "^2","uglify-js-brunch": "^2","autoprefixer": "^6","babel-preset-latest": “^6"}}
Source: https://www.flickr.com/photos/darkrosesFONTS
@reubano5 REMOTE FONTS
GITHUB.CSS@font-face {font-family: system;font-style: normal;font-weight: 300;src: local("Ubuntu Light"), local("Segoe UILight"), local("Roboto-Light"), local("DroidSans"),local("Tahoma");}body {font-family: "system";}Source: css-tricks.com
Source: https://www.flickr.com/photos/jim_belfordIMAGES
@reubano25 IMAGES
IMAGE OPTIMIZERSkraken.io OptiPNG
IMAGEMIN-BRUNCH$ npm install --save-dev imagemin-brunch$ brunch build --productionSource: github.com/stawberri/imagemin-brunch
IMAGEMIN-BRUNCH$ npm install --save-dev imagemin-brunch$ brunch build --productioncompiled 6 files into 2 files, copied 14 in 2.3 secminified 9 images to save 334 kB in 5.3 secSource: github.com/stawberri/imagemin-brunch
INDEX.HTMLsrc="small.jpg"srcset="medium.jpg 1000w, large.jpg 2000w"alt=“yah">Source: css-tricks.com
@reubano• Enable gzip compression• Utilize browser caching• Serve static files from a CDN• Use static site generators• Load javascript using “async”• Remove trackersBUT WAIT, THERE’S MORE…
@reubano6 TOTAL REQUESTS!
@reubanoHEAD TO HEADSource: https://www.dareboost.com/en
@reubano Source: https://www.dareboost.com/en
@reubanoRESOURCES• 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/
@reubanoRESOURCES• 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
@reubanoRESOURCES• https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/• https://www.staticgen.com/• https://staticsitegenerators.net/• https://www.netlify.com/
THANKS!Reuben Cummings@reubano