Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Optimising Your Website For the Future

Optimising Your Website For the Future

In this talk Andi Smith will be looking at the root causes of website bloat and how web site optimisation is about to change with the rise of HTTP/2, Service Workers and AMP.

Andi Smith

May 06, 2016
Tweet

More Decks by Andi Smith

Other Decks in Programming

Transcript

  1. HOW LONG IS TOO LONG TO WAIT? 100ms feels instantaneous.

    1s for the state of flow to remain uninterrupted. 10s is when the user loses interest entirely. Source: http://www.nngroup.com/articles/response-times-3-important-limits/
  2. GOOGLE EXTRA 500MS WAIT FOR SEARCH RESULTS DROPPED 20% TRAFFIC

    Source: http://glinden.blogspot.co.uk/2006/11/marissa-mayer-at-web-20.html
  3. CONTRIBUTORS TO FILE SIZE Average bytes per page by Content

    Type for top 1,000,000 web sites Total: 2,169kb Images 1,463kb Stylesheets 78kb Video 200kb Fonts 124kb HTML 66kb Scripts 360kb Other 4kb Source: http://httparchive.org/interesting.php?a=All&l=Apr%201%202016
  4. SET A PERFORMANCE BUDGET A BASELINE FOR PAGE SIZE AND


    NUMBER OF REQUESTS More Info: http://timkadlec.com/2013/01/setting-a-performance-budget/
  5. SMALLER PAGE SIZE Responsive Images (srcset / picturefill) npm install

    grunt-responsive-images
 npm install gulp-responsive
 Image Optimisation npm install grunt-contrib-imagemin
 npm install gulp-imagemin

  6. Unused CSS npm install grunt-uncss
 npm install gulp-uncss
 Minification
 npm

    install grunt-contrib-cssmin npm install grunt-contrib-uglify npm install gulp-cssmin
 npm install gulp-uglify SMALLER PAGE SIZE
  7. FEWER REQUESTS Sprite Images npm install grunt-spritesmith
 npm install gulp-spritesmith


    
 Critical CSS npm install grunt-penthouse
 npm install gulp-criticalcss
 Concatenate npm install grunt-contrib-concat npm install gulp-concat
  8. MINIFY, UGLIFY & CONCATENATE npm install grunt-usemin npm install gulp-usemin

    Usemin runs a number of performance helper tasks such as uglify, cssmin and concatenate automatically.
  9. usemin: { html: '**/*.html', css: PATHS.DEST + PATHS.CSS + '**/*.css',

    js: PATHS.DEST + PATHS.JS + '**/*.js' }, useminPrepare: { html: 'src/index.html', options: { root: 'src' } } EXAMPLE SETUP
  10. CACHE FILES npm install grunt-filerev npm install gulp-filerev Use filerev

    to set your workflow to assign file revision numbers
  11. HTTP/1.X HTTP/2.X Responsive Images Yes Yes Image Minification Yes Yes

    Spriting Yes No Inline CSS Yes No CSS Minification Yes Yes CSS Concatenation Yes No JavaScript Minification Yes Yes JavaScript Concatenation Yes No HTML Minification Yes Yes
  12. if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then(function() { console.log('SW registration

    success'); }).catch(function(error) { console.log('SW failed: ', error); }); } REGISTERING A SERVICE WORKER
  13. ENABLES ADD TO HOMESCREEN ON ANDROID • Manifest.json • The

    manifest must have a `short_name`, a name for display in the banner, • A start URL (e.g. / or index.html) which must be loadable, • At least an `144x144` PNG icon with image/png mime type. • You have a service worker registered on your site • Your site is served over HTTPS (service worker requires HTTPS for security) • The user has visited your site at least twice, with at least five minutes between visits.
  14. AMP