Elabore um checklist detalhado para otimização do desempenho de websites e aplicativos front-end, com o objetivo de garantir que as páginas carreguem rapidamente, que os usuários tenham uma experiência fluida e que o site seja bem posicionado nos resultados de busca. Detalhes: a) Minificação e compressão dos arquivos HTML, CSS e JavaScript b) Otimização das imagens, utilizando formatos adequados e reduzindo o tamanho dos arquivos c) Utilização de um CDN (Content Delivery Network) para distribuir o conteúdo em diferentes servidores d) Implementação de técnicas de cache para armazenar os arquivos no navegador do usuário e) Monitoramento do desempenho do site com ferramentas como Google PageSpeed Insights e GTmetrix.

Crie um guia completo de acessibilidade para desenvolvimento front-end, com o objetivo de garantir que os websites e aplicativos sejam acessíveis a todas as pessoas, incluindo aquelas com deficiência visual, auditiva, motora ou cognitiva. Detalhes: a) Utilização de HTML semântico para estruturar o conteúdo de forma lógica e organizada b) Fornecimento de alternativas textuais para imagens, vídeos e outros elementos não textuais c) Garantia de que o site possa ser navegado utilizando apenas o teclado d) Utilização de cores com contraste suficiente e) Teste do site com leitores de tela e outras ferramentas de acessibilidade.

Elabore um checklist detalhado para testes de responsividade de websites e de aplicações web, com o objetivo de garantir que o layout, o conteúdo e as funcionalidades se adaptem a diferentes dispositivos e tamanhos de tela, proporcionando uma boa experiência para os usuários. Detalhes: a) Utilização de media queries, que são regras CSS que aplicam estilos diferentes de acordo com as características do dispositivo, como largura, altura, orientação e resolução b) Teste do site em diferentes navegadores, como Chrome, Firefox, Safari e Edge c) Validação do código HTML e CSS, utilizando ferramentas como W3C Validator e CSS Validator d) Otimização das imagens, utilizando formatos adequados, compactando os arquivos e definindo as dimensões corretas e) Minificação do código HTML, CSS e JavaScript, removendo os espaços, os comentários e os caracteres desnecessários.

Crie um guia completo de otimização de imagens para web, com o objetivo de reduzir o tamanho dos arquivos, de melhorar o tempo de carregamento das páginas e de preservar a qualidade visual das imagens. Detalhes: a) Escolha do formato de imagem mais adequado para cada tipo de conteúdo, como JPEG para fotos, PNG para gráficos e SVG para ícones b) Redimensionamento das imagens para as dimensões exatas em que serão exibidas, evitando o redimensionamento pelo navegador c) Compressão das imagens, utilizando ferramentas como TinyPNG, ImageOptim e Compressor.io d) Utilização de imagens responsivas, que se adaptem a diferentes dispositivos e tamanhos de tela, utilizando o atributo srcset e a tag picture e) Implementação de lazy loading, que carregue as imagens apenas quando elas forem visíveis na tela.