Visão Geral

Curso Web Performance and Optimisation, Aprenda sobre ferramentas e técnicas para medir e melhorar o desempenho do site

O tamanho médio de uma página da web tem aumentado continuamente ano a ano por mais de uma década; conforme dispositivos mais poderosos são criados para utilizar páginas da web, mais conteúdo impressionante está sendo disponibilizado. No entanto, esse aumento não veio de graça.

Páginas da web lentas e não otimizadas não são apenas irritantes - e potencialmente caras em termos de largura de banda - mas estão sendo penalizadas pesadamente pelos mecanismos de pesquisa em seus rankings. Não perder tempo para otimizar seu site pode custar a classificação de SEO, visitas, rejeições e afetar diretamente os resultados financeiros.

Este curso explora estratégias para medir e gerenciar o desempenho do site, incluindo fatores que devem orientar as decisões de negócios e design. Baseados em grande parte no Chrome Dev Toolset, muitos exercícios práticos e exemplos do mundo real consolidarão a compreensão e encorajarão boas práticas.

Objetivo

Após realizar este Curso Web Performance and Optimisation, você será capaz de:

• Chrome DevTools
• As CSS Dev Tools
• Outras ferramentas essenciais
• HTTP1, HTTP2 e HTTP3
• Progressive Web Apps
• Acessibilidade da página da web
• O modelo de objeto de documento (DOM) e o modelo de objeto de navegador (BOM)
• Desempenho de código: explorando estratégias ES6

Publico Alvo

• Qualquer pessoa responsável pela construção de sites onde o desempenho é um requisito (em resumo, qualquer pessoa responsável pela construção de sites!)
• Qualquer pessoa com um site de baixo desempenho procurando entender a causa e encontrar soluções práticas
• Qualquer pessoa que queira entender a chave para a criação de páginas da web enxutas, eficientes e rápidas

Pre-Requisitos

• Os delegados devem ter alguma experiência em tecnologias básicas de desenvolvimento da web, como HTML, CSS e JavaScript.
  

Materiais

Conteúdo Programatico

Introducing the Chrome Developer Tools

1. More than just a console
2. Exploring the network, memory and performance metrics
3. Generating actionable metrics
4. Making sense of the generated data

The CSS Dev Tools

1. Understanding and working with the CSS windows
2.  CSS Inspectors
3. Making reasoned decisions about CSS based on the dev tools

Essential Dev Tools

1. Mobile Simulation
2. Make the most of the console
3. Why client side storage matters

HTTP1, HTTP2 and HTTP3

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

Progressive Web Apps

1. How this term has evolved
2. What it means today
3. Deciding if it matters for your site

Accessibility

1. Meeting the requirements
2. Meeting actual expectations

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

1. Understanding rendering engine strategies
2. Factors which affect user’s speed perception
3. Making informed decisions about rendering content

Code Performance

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