OWDMM

Why?

Why performance matters

  • Yahoo increased traffic by 9% for every 400ms of improvement
  • Amazon increased revenue by 1% for every 100ms of improvement
  • Mozilla had 60 million more Firefox downloads per year, by making their pages 2.2 seconds faster.
  • Google take page-speed into account when ranking.
  • A one second delay in mobile load times can impact mobile conversions by up to 20% >

How?

Images

Images

  • JPEG, PNG or GIF - all can be losslessly optimised
  • Don't scale images
  • Don't use PNG images for photos
  • Use 256-colour 8-bit PNGs instead of 24-bit
  • Correctly set your JPEG image quality (don't need max setting)
  • Use the correct format

ImageOptim (OS X) imageoptim.com

PNGGauntlet (Windows) pnggauntlet.com

CSS

Minify

  • /** AWESOME FONT ICON **/
    /** Will use on our awesome new kitten website! **/
    .glyphicon {
      position: relative;
      top: 1px;
      display: inline-block;
      font-family: 'Glyphicons Halflings';
      font-style: normal;
      font-weight: normal;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
  • 334 Bytes

CSS

Minify

  • .glyphicon{position:relative;top:1px;display:inline-block;font-family:'Glyphicons
    Halflings';font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:
    antialiased;-moz-osx-font-smoothing:grayscale}
    
  • 218 Bytes - Saved approx 35% filesize
  • Demo site: http://refresh-sf.com

CSS

Overview

  • Minify
  • Combine all
  • Remove unneeded attributes/rules

JavaScript

  • Minify
  •  /* ALERT PLUGIN DEFINITION
      * ======================= */
      var old = $.fn.alert
      $.fn.alert = function (option) {
        return this.each(function () {
          var $this = $(this)
            , data = $this.data('alert')
          if (!data) $this.data('alert', (data = new Alert(this)))
          if (typeof option == 'string') data[option].call($this)
        })
      }
      $.fn.alert.Constructor = Alert
    
  • 383 bytes:

JavaScript

  • Minify
  • var old=$.fn.alert;$.fn.alert=function(a){return this.each(function(){var c=$(this),b
    =c.data("alert");if(!b){c.data("alert",(b=new Alert(this)))}if(typeof a=="string"){b
    [a].call(c)}})};
    
  • 257 bytes: 53% smaller!
  • Demo site: http://refresh-sf.com

JavaScript

  • Minify
  • Combine
  • Use a CDN for common JS libraries such as Google Hosted Libraries
  • <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>window.jQuery || document.write
    ('<script src="js/jquery.min.js"><\/script>')</script>
             

Allow Browser Caching

  • Make sure caching is turned on! (check your server settings)
  • Allow long cache life (365 days)
  • If a file has a long cache life and you want to update it, add a ? after it

    <src="img/kittens.jpg?2018-04-28" alt="kittens" height="200" width="100">
                

Enable Compression

  • gZIP allows your assets to be sent 'zipped' to your browser which will automatically unzip them
  • Make sure compression is turned on for HTM, CSS, JSS, XML, SVG files
  • Don't use on already-compressed files such as raster images! (PNG, JPG)

Use a CDN

  • Akamai, MaxCDN, Amazon Cloudfront

Further reading:

Advanced Topics

Use GruntJS to Automate all of the things!

<Thank You!>