Front end performance for the lazy

(in a good way)

Front end performance

• Involves getting the markup and assets to the user and getting it rendered ASAP
• Based around optimisation; size of assets, order in which they are loaded and/or executed
• Especially important on mobile - devices are low powered & networks flaky - but users expect snappy performance
• Has an impact on user experience (£$£$), and consequently search engine rankings

in Drupal specifically

• Used on drupal.org
• Combines CSS and JS files intelligently
• Fewer HTTP requests, good for performance
• Core does this but at a per-page level
• Advagg based on rules that decrease chance of the user needing to download many aggregate files

Adv. CSS/JS Aggregation

• Compresses JS using a Google service
• Sends files to their API or use a local Java library
• Savings made by rewriting vars & removing whitespace
• Savings are ~ 20%

• The advanced compilation level breaks core JS - go for the medium option

   

GOOGLE CLOSURE COMPILER

more general tools

Grunt

• Automates boring repetitive stuff and is great
• Most used for minification, Sass etc but huge ecosystem
• Modernizr
  • Reduces file size
  • Reduces JS running
  • Removes manual task
• Uncss
  • Removes bloat
  • Great for frameworks

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    modernizr: {
      dist: {
        // [REQUIRED] Path to the build you're using for development.
        "devFile": "lib/modernizr-dev.js",
        // Path to save out the built file.
        "outputFile": "build/modernizr-custom.js",
        // Based on default settings on http://modernizr.com/download/
        "extra": {
          "shiv": true,
          "printshiv": false,
          "load": true,
          "mq": false,
          "cssclasses": true
        },
        // Based on default settings on http://modernizr.com/download/
        "extensibility": {
          "addtest": false,
          "prefixed": false,
          "teststyles": false,
          "testprops": false,
          "testallprops": false,
          "hasevents": false,
          "prefixes": false,
          "domprefixes": false,
          "cssclassprefix": ""
        },
        // By default, source is uglified before saving
        "uglify": true,
        // Define any tests you want to implicitly include.
        "tests": [],
        // By default, this task will crawl your project for references to Modernizr tests.
        // Set to false to disable.
        "parseFiles": true,
        // When parseFiles = true, this task will crawl all *.js, *.css, *.scss and *.sass files,
        // except files that are in node_modules/.
        // You can override this by defining a "files" array below.
        // "files" : {
        // "src": []
        // },
        // This handler will be passed an array of all the test names passed to the Modernizr API, and will run after the API call has returned
        // "handler": function (tests) {},
        // When parseFiles = true, matchCommunityTests = true will attempt to
        // match user-contributed tests.
        "matchCommunityTests": false,
        // Have custom Modernizr tests? Add paths to their location here.
        "customTests": []
      }
    },
    concat: {
      dist: {
        src: ['src/js/jquery.js', 'src/js/intro.js', 'src/js/main.js',
          'src/js/outro.js'
        ],
        dest: 'dist/build.js',
      }
    },
    uglify: {
      dist: {
        files: {
          'dist/build.min.js': ['dist/build.js']
        }
      }
    },
    imagemin: {
      options: {
        cache: false
      },
      dist: {
        files: [{
          expand: true,
          cwd: 'src/',
          src: ['**/*.{png,jpg,gif}'],
          dest: 'dist/'
        }]
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-imagemin');
  grunt.registerTask('default', ['concat', 'uglify', 'imagemin']);
};

Grunt

• Well worth learning, even for small things like side projects
• Easier than it seems to get started and there are loads of resources out there
• Chris Coyier article is a good one

Cloudflare

Cloudflare

CDN

Caching

Minification

SSL (ish)

Responsive

images

google Pagespeed module

• Install for nginx or Apache
• Runs a huge number of optimisations (called filters) in the background
• Optimisations targeted against the PageSpeed tests that Google runs
• Some interfere with or duplicate Drupal functions but there is information on Drupal.org about avoiding this

Google pagespeed module

• Inline critical css
• Rewrite internal and external JS (with Closure Compiler)
• Canonicalise JS libraries
• Inline small amounts of JS, CSS or web fonts (reduce requests)
• Use HTML5 localstorage to cache resources
• Inline images to data URIs (watch out on mobile)
• Resize + compress images based on device
• Lazy load images with low quality previews shown first
• Automatically sprite images
• …and loads more.

GOOGLE PAGESPEED MODULE

Imageoptim