Web Optimisation and Performance (2 days)

Timings:

  • 9:30-11 Session 1
  • 11-11.15 Coffee
  • 11.15-12.45 Session 2
  • 12.45-1.45 Lunch
  • 1.45-3.15 Session 3
  • 3.15-3.30 Tea
  • 3.30-4.30 Session 4

Aim

The average size of a web page has been continually increasing year-on-year for over a decade; as more powerful devices are created to utilise web pages, more impressive content is being made available. However, this increase has not come for free.

Slow, un-optimised, web pages are not only annoying - and potentially expensive in terms of bandwidth - but are being penalised heavily by search engines in their rankings. Not taking the time to optimise your website could cost you SEO ranking, visits, bounces, and directly affect the bottom line.

This course explores strategies to measure and manage web site performance, including factors which should drive business and design decisions. Based largely around the Chrome Dev Toolset, plenty of hands-on exercises and real-world examples will consolidate understanding and encourage good practices.

What is web performance?

  • Making sites fast - and slow ones seem fast
    • Reduce load time
    • Make the site usable as soon as possible
    • Smoothness and interactivity
    • Perceived performance
    • Measuring performance

Introducing the Chrome Developer Tools

  • More than just a console
  • Exploring the network, memory and performance metrics
  • Generating actionable metrics
  • Making sense of the generated data

The CSS Dev Tools

  • Understanding and working with the CSS windows
  • CSS Inspectors
  • Making reasoned decisions about CSS based on the dev tools

Essential Dev Tools

  • Mobile Simulation
  • Make the most of the console
  • Why client side storage matters

HTTP1, HTTP2 and HTTP3

  • The http 1 strategy explained briefly
  • Overview of http 2 bundling: the aspiration and the reality
  • Metrics to support a strategy based on web site size, geographical distribution, update frequency and target platforms
  • Brief overview of what http 3 will bring: QUIC in place of TCP

Progressive Web Apps

  • How this term has evolved
  • What it means today
  • Deciding if it matters for your site

Accessibility

  • Meeting the requirements
  • Meeting actual expectations

The Document Object model (DOM) and Browser Object Model (BOM)

  • Understanding rendering engine strategies
  • Factors which affect user’s speed perception
  • Making informed decisions about rendering content

Code Performance

  • Exploration of ECMAScript coding strategies
  • Ways to use the Developer Tools with ECMAScript development
  • Bridging the gap between coder-derived performance and actual client experience