O desempenho da Web é um aspecto crucial do desenvolvimento da Web, que se concentra na velocidade de carregamento das páginas e na resposta à entrada do usuário. Ao otimizar seu site para melhorar o desempenho, você oferece aos usuários uma experiência melhor. Melhores experiências do usuário ajudam muito a atingir as metas que você tinha em mente para seu site.
O desempenho da Web pode parecer um tema de nicho, mas é, na verdade, amplo e bastante profundo. Dada a profundidade do assunto, é fundamental que um curso sobre desempenho da Web seja acessível, mas informativo. A versão inicial deste curso se concentra nos princípios básicos do desempenho na Web que, para iniciantes, são informativos.
O objetivo de cada módulo desta série é ter, sempre que possível, um conjunto de demonstrações que complementam o conteúdo de cada módulo e demonstrem os principais conceitos de desempenho. Como este curso é uma oferta inicial, planejamos publicar outros módulos nos próximos meses.
Confira o que a oferta inicial do curso do Learn Performance abrange:
Por que a velocidade é importante
Antes de começar a aprender sobre desempenho, primeiro é preciso entender o papel dele na experiência do usuário e como ele pode resultar em melhores resultados para os usuários. Este curso começa com uma breve introdução sobre esses tópicos, apresentando um contexto essencial sobre a importância de aprender a performance.
Considerações gerais sobre desempenho de HTML
Todo site começa com uma solicitação de documento HTML, e essa solicitação tem um papel importante na velocidade de carregamento do site. Este módulo aborda conceitos importantes, como armazenamento em cache de HTML, bloqueio de analisadores, bloqueio de renderização e muito mais, para que você possa garantir que a primeira solicitação de HTML do seu site seja fácil de usar.
Noções básicas sobre o caminho crítico
O caminho crítico de renderização é um conceito no desempenho da Web que lida com a rapidez com que a renderização inicial de uma página aparece no navegador. Este módulo aborda a teoria por trás do caminho crítico de renderização, abordando conceitos como recursos de bloqueio de renderização e de analisador, e como eles desempenham um papel fundamental na rapidez com que uma página aparece no navegador.
Otimizar o carregamento de recursos
À medida que uma página é carregada, muitos recursos são referenciados no HTML, fornecendo a página com aparência e layout por CSS, assim como interatividade por JavaScript. Neste módulo, abordamos alguns conceitos importantes relacionados a esses recursos e como eles afetam o tempo de carregamento de uma página.
Auxilia o navegador com dicas de recursos
Dicas de recursos são um conjunto de recursos disponíveis em HTML que podem ajudar o navegador a carregar recursos mais cedo e possivelmente até mesmo com maior prioridade de recursos. Neste módulo, abordamos algumas dicas de recursos que podem ajudar a carregar suas páginas ainda mais rápido.
Desempenho da imagem
Atualmente, as imagens representam uma grande parte dos dados transferidos em muitas páginas da Web. Este módulo aborda como otimizar imagens, bem como exibi-las de maneira eficiente para minimizar o desperdício de bytes, independentemente do dispositivo do usuário.
Desempenho do vídeo
Vídeo é um tipo de mídia usado com frequência em páginas da Web, mas saber como exibi-los de maneira eficiente é um aspecto de desempenho que você não deve ignorar. Este módulo aborda algumas técnicas importantes para incorporar vídeos de modo que seu site permaneça rápido, bem como considerações de desempenho adjacentes que podem surgir com o uso deles.
Otimizar fontes da Web
As fontes da Web são um recurso comumente usado na Web, e com razão, porque complementam o design de um site de maneiras que outros recursos não podem. Mesmo assim, as fontes da Web ainda têm um custo de desempenho. Neste módulo, vamos abordar várias considerações e técnicas de desempenho relacionadas a fontes da Web.
JavaScript com divisão de código
Alguns recursos não são cruciais para o carregamento inicial de uma página da Web. O JavaScript é um recurso que pode ser adiado até o momento da necessidade usando uma técnica conhecida como divisão de código. Ao fazer isso, você pode melhorar o desempenho reduzindo a largura de banda e a contenção de CPU, uma consideração essencial para melhorar a velocidade de carregamento inicial da página e a capacidade de resposta de entrada durante a inicialização.
Imagens com carregamento lento e elementos <iframe>
As imagens e os elementos <iframe> podem consumir uma largura de banda significativa e o tempo de processamento da CPU. No entanto, nem todas as imagens e
elementos <iframe> precisam ser carregados durante o carregamento inicial da
página e podem ser adiados para um momento mais provável em que o usuário possa
vê-los. Essa técnica é conhecida como carregamento lento. Neste módulo,
explicamos o carregamento lento de imagens e elementos <iframe> para que
suas páginas sejam carregadas mais rapidamente e consumam apenas largura de banda e
tempo de processamento apenas quando necessário.
Pré-busca, pré-renderização e pré-armazenamento em cache do service worker
Embora grande parte do desempenho dependa do que é possível fazer para otimizar e eliminar recursos desnecessários, pode parecer um pouco paradoxal sugerir que alguns recursos precisam ser carregados antes que sejam necessários. No entanto, há alguns casos em que pode ser apropriado carregar determinados recursos antecipadamente. Neste módulo, vamos analisar esse aspecto do desempenho, à medida que a pré-busca, a pré-renderização e o pré-armazenamento em cache do service worker são discutidas.
Uma visão geral dos Web workers
Grande parte do que o usuário vê no navegador ocorre em uma única linha de execução conhecida como linha de execução principal. No entanto, há oportunidades em que você pode iniciar novas linhas de execução para fazer trabalhos computacionais dispendiosos para que a linha de execução principal possa acomodar tarefas importantes voltadas ao usuário. A API que faz isso é conhecida como API Web Worker e, neste módulo, serão abordados os conceitos básicos dela.
Um caso de uso concreto de um worker da Web
Agora que você tem uma compreensão básica dos workers da Web e dos recursos e limitações deles, é hora de analisar um caso de uso concreto para um worker da Web. Nesta demonstração, um Web worker é usado para buscar um arquivo JPEG, extrair os metadados dele e enviá-lo de volta à linha de execução principal para que o usuário possa vê-lo no navegador.
Tudo pronto para começar a aprender sobre desempenho na Web? Para começar, leia Por que a velocidade é importante.