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

Transcript

  1. 2.

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

    to fully load a mobile landing page is 22 seconds.”
  2. 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
  3. 10.
  4. 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'} };
  5. 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" } }
  6. 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
  7. 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
  8. 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…