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

icons
Icons

Images

charts
Charts

Images

Kawaii Kittens

Images

  • Images account for 80% of a typical sites page weight
  • 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

Removed old unneeded vendor prefixed rules

  • .awesomeDIV {
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
         -o-border-radius: 3px;
            border-radius: 3px;
       -webkit-transition: ease-in 100ms;
          -moz-transition: ease-in 100ms;
            -o-transition: ease-in 100ms;
               transition: ease-in 100ms;
      }
    
  • Check Vendor Prefixes at caniuse.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://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>window.jQuery || document.write
    ('<script src="https://code.jquery.com/jquery-1.11.2.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, e.g. kittens.png?2018-04-28

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!

Use a CDN

  • Akamai, MaxCDN, Amazon Cloudfront

Further reading:

Advanced Topics

Use GruntJS to Automate all of the things!

<Thank You!>