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.

Reuben Cummings

April 09, 2019
Tweet

More Decks by Reuben Cummings

Other Decks in Programming

Transcript

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

    to fully load a mobile landing page is 22 seconds.”
  2. 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
  3. 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'} };
  4. PACKAGE.JSON { … "devDependencies": { "brunch": "^2", "babel-brunch": "^6", "postcss-brunch":

    "^2", "sass-brunch": "^2", "uglify-js-brunch": "^2", "autoprefixer": "^6", "babel-preset-latest": “^6" } }
  5. 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
  6. 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
  7. @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…