About the course:
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.
Remote virtual instructor-led delivery gives us the flexibility to offer you more options to customise a workshop to meet your team's needs, taking into account learning goals, on-going projects, and working-from-home considerations.
By the end of this course, you will have learnt about:
- Chrome DevTools
- The CSS Dev Tools
- Other essential tools
- HTTP1, HTTP2 and HTTP3
- Progressive Web Apps
- Web Page Accessibility
- The Document Object model (DOM) and Browser Object Model (BOM)
- Code Performance: Exploring ES6 strategies
- Anyone responsible for building websites where performance
is a requirement (in short, anyone responsible for building websites!)
- Anyone with a poor performing website looking to understand the cause and find practical solutions
- Anyone who wants to understand the key to creating lean, efficient, fast web pages
Prerequisites
Delegates should have some experience of core web development technologies such as HTML, CSS and JavaScript.
Live, instructor-led online and on-site training
We appreciate that you need flexibility to fit in with new working situations - whether you're an individual, part of a distributed team, or simply have projects and deadlines to meet.
Our remote training can take place online in a virtual classroom, with content split into modules to accommodate your scheduling challenges and meet your learning goals. Get in touch today to find out how we can help design a cost-effective, flexible training solution.
As soon as it's safe, we'll return to also offering the on-site custom training courses and programmes upon which we've built our reputation.
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