SlideShare a Scribd company logo
1 of 93
Desempenho e
Otimização no Frontend
Aplicações incríveis independente de frameworks
About
+ Empreendedor de sucesso
+ Físico teórico
+ Viajante
+ Escritor
+ Músico
+ DJ
+ Cabeleireiro
+ Dev Maromba
Beto empreendimentos
About
+ ErreJota <3 Bangu
+ Ciência da Computação (NaN/8)
+ Dev Fullstack na Suzano
+ Tech In Rio
+ Praia
+ Rave / Rock
O que é site bom?
Um site bonito
Um site que carrega rápido
Um site simples e funcional
Trade Offs
+Funcionalidades
+Desempenho
+Acessibilidade
+SEO
A coisa começa a ficar feia….
Menos é mais
Análise
Core Web Vitals
Web Vitals
Lighthouse
Lighthouse como dependêcia
Performance budgets
Performance budgets
Performance budgets
Lighthouse no seu CI
Automações do fluxo do usuário
Automações do fluxo do usuário
Automações do fluxo do usuário
Automações do fluxo do usuário
Outras métricas do Lighthouse
Outras métricas do Lighthouse
Acessibilidade
Componentes da Acessibilidade Web
Ciclo de implementação
Quando um componente é fraco…
Guidelines de Acessibilidade
Search Engine Optimisation
Tudo de antes
importa
+Performance
+Acessibilidade
+Boas práticas
Pilares
+Conteúdo
+Technical SEO
+On-site SEO
+Off-site SEO
Técnicas de otimização
Quando você roda npm install
Passando a faca no
JavaScript
Tree Shaking
Tree Shaking
Tree Shaking
Bundle size
Preloading / Prefetching
Preloading / Prefetching
Drawbacks
+Custo de infra
+Complexidade de deploy
+Pontos de falha
Reidratação
Server Components
Island Architecture
Resumability
DevTools
Performance
Performance
React DevTools Components
React DevTools Profiler
Referências
+ Addy Osmani - The Cost Of JavaScript in 2018
+ Addy Osmani - The Cost Of JavaScript in 2023
+ William Grasel - O custo do JavaScript para sua
aplicação Web
+ Jessica Felix - Otimização e análise de
desempenho de aplicações Javascript
+ W3C Accessibility Standard
+ Riccardo Andreatta - What is the Server-Side
Rendering and how it works
Fim

More Related Content

Similar to Desempenho e Otimização no Frontend: Aplicações incríveis independentes de framework!

Governança de Serviços Automatizada na Prática
Governança de Serviços Automatizada na PráticaGovernança de Serviços Automatizada na Prática
Governança de Serviços Automatizada na PráticaSensedia
 
Futurecom 2010 - Web Semântica - Pessoas e máquinas pensando juntas!
Futurecom 2010 - Web Semântica - Pessoas e máquinas pensando juntas!Futurecom 2010 - Web Semântica - Pessoas e máquinas pensando juntas!
Futurecom 2010 - Web Semântica - Pessoas e máquinas pensando juntas!Renato Bongiorno Bonfanti
 
MS Dynamics CRM - ENEI 2014
MS Dynamics CRM - ENEI 2014MS Dynamics CRM - ENEI 2014
MS Dynamics CRM - ENEI 2014Pedro Azevedo
 
GMC 2010 - SharePoint 2010 - WCM
GMC 2010 - SharePoint 2010 - WCMGMC 2010 - SharePoint 2010 - WCM
GMC 2010 - SharePoint 2010 - WCMRodolfo Roim
 
Como um grande sistema REST funciona - arquitetura e desempenho
Como um grande sistema REST funciona - arquitetura e desempenhoComo um grande sistema REST funciona - arquitetura e desempenho
Como um grande sistema REST funciona - arquitetura e desempenhoDavid Robert Camargo de Campos
 
Gerenciando Portais Liferay com Soluções de Performance Digital
Gerenciando Portais Liferay com Soluções de Performance DigitalGerenciando Portais Liferay com Soluções de Performance Digital
Gerenciando Portais Liferay com Soluções de Performance DigitalDynatrace Latin America
 
SEO em 2018 Tendências e Dicas
SEO em 2018  Tendências e DicasSEO em 2018  Tendências e Dicas
SEO em 2018 Tendências e Dicassemrush_webinars
 
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana ChahoudDesenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana ChahoudiMasters
 
Otimizar para conquistar | Workshop de SEO em Lisboa | GeekGirls
Otimizar para conquistar | Workshop de SEO em Lisboa | GeekGirlsOtimizar para conquistar | Workshop de SEO em Lisboa | GeekGirls
Otimizar para conquistar | Workshop de SEO em Lisboa | GeekGirlsAline Rossi
 
Serverless + Integrações com BDs: Azure Functions e Logic Apps - SQLSaturday ...
Serverless + Integrações com BDs: Azure Functions e Logic Apps - SQLSaturday ...Serverless + Integrações com BDs: Azure Functions e Logic Apps - SQLSaturday ...
Serverless + Integrações com BDs: Azure Functions e Logic Apps - SQLSaturday ...Renato Groff
 
AAB301 - Rich Internet Application - wcamb
AAB301 - Rich Internet Application - wcambAAB301 - Rich Internet Application - wcamb
AAB301 - Rich Internet Application - wcambMicrosoft Brasil
 
Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2Patricia Mallmann
 
Checklist SEO - Marketing Digital Day
Checklist SEO - Marketing Digital DayChecklist SEO - Marketing Digital Day
Checklist SEO - Marketing Digital DayRafael Rez
 
Palestra na feira Info brasil - Tema Qualidade NOIX em Websites
Palestra na feira Info brasil - Tema Qualidade NOIX em WebsitesPalestra na feira Info brasil - Tema Qualidade NOIX em Websites
Palestra na feira Info brasil - Tema Qualidade NOIX em WebsitesRicardo Accioly
 
Marketing digital, amostra aula de pós graduação
Marketing digital, amostra aula de pós graduaçãoMarketing digital, amostra aula de pós graduação
Marketing digital, amostra aula de pós graduaçãoEDGAR ALMEIDA
 
Palestra Social Media Week São Paulo - Desenvolvimento web desafios da intern...
Palestra Social Media Week São Paulo - Desenvolvimento web desafios da intern...Palestra Social Media Week São Paulo - Desenvolvimento web desafios da intern...
Palestra Social Media Week São Paulo - Desenvolvimento web desafios da intern...Sandro Alencar Fernandes
 
Case do Tá Tri no RS on Rails 2010
Case do Tá Tri no RS on Rails 2010Case do Tá Tri no RS on Rails 2010
Case do Tá Tri no RS on Rails 2010tatriimoveis
 
Application Insights: identificando problemas de performance em aplicações le...
Application Insights: identificando problemas de performance em aplicações le...Application Insights: identificando problemas de performance em aplicações le...
Application Insights: identificando problemas de performance em aplicações le...Renato Groff
 
Performance em-front-end-luiz-tanure
Performance em-front-end-luiz-tanurePerformance em-front-end-luiz-tanure
Performance em-front-end-luiz-tanureLuiz Tanure
 

Similar to Desempenho e Otimização no Frontend: Aplicações incríveis independentes de framework! (20)

Governança de Serviços Automatizada na Prática
Governança de Serviços Automatizada na PráticaGovernança de Serviços Automatizada na Prática
Governança de Serviços Automatizada na Prática
 
Futurecom 2010 - Web Semântica - Pessoas e máquinas pensando juntas!
Futurecom 2010 - Web Semântica - Pessoas e máquinas pensando juntas!Futurecom 2010 - Web Semântica - Pessoas e máquinas pensando juntas!
Futurecom 2010 - Web Semântica - Pessoas e máquinas pensando juntas!
 
MS Dynamics CRM - ENEI 2014
MS Dynamics CRM - ENEI 2014MS Dynamics CRM - ENEI 2014
MS Dynamics CRM - ENEI 2014
 
GMC 2010 - SharePoint 2010 - WCM
GMC 2010 - SharePoint 2010 - WCMGMC 2010 - SharePoint 2010 - WCM
GMC 2010 - SharePoint 2010 - WCM
 
Como um grande sistema REST funciona - arquitetura e desempenho
Como um grande sistema REST funciona - arquitetura e desempenhoComo um grande sistema REST funciona - arquitetura e desempenho
Como um grande sistema REST funciona - arquitetura e desempenho
 
Gerenciando Portais Liferay com Soluções de Performance Digital
Gerenciando Portais Liferay com Soluções de Performance DigitalGerenciando Portais Liferay com Soluções de Performance Digital
Gerenciando Portais Liferay com Soluções de Performance Digital
 
SEO em 2018 Tendências e Dicas
SEO em 2018  Tendências e DicasSEO em 2018  Tendências e Dicas
SEO em 2018 Tendências e Dicas
 
Sap Forum 2011
Sap Forum 2011Sap Forum 2011
Sap Forum 2011
 
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana ChahoudDesenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud
 
Otimizar para conquistar | Workshop de SEO em Lisboa | GeekGirls
Otimizar para conquistar | Workshop de SEO em Lisboa | GeekGirlsOtimizar para conquistar | Workshop de SEO em Lisboa | GeekGirls
Otimizar para conquistar | Workshop de SEO em Lisboa | GeekGirls
 
Serverless + Integrações com BDs: Azure Functions e Logic Apps - SQLSaturday ...
Serverless + Integrações com BDs: Azure Functions e Logic Apps - SQLSaturday ...Serverless + Integrações com BDs: Azure Functions e Logic Apps - SQLSaturday ...
Serverless + Integrações com BDs: Azure Functions e Logic Apps - SQLSaturday ...
 
AAB301 - Rich Internet Application - wcamb
AAB301 - Rich Internet Application - wcambAAB301 - Rich Internet Application - wcamb
AAB301 - Rich Internet Application - wcamb
 
Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2
 
Checklist SEO - Marketing Digital Day
Checklist SEO - Marketing Digital DayChecklist SEO - Marketing Digital Day
Checklist SEO - Marketing Digital Day
 
Palestra na feira Info brasil - Tema Qualidade NOIX em Websites
Palestra na feira Info brasil - Tema Qualidade NOIX em WebsitesPalestra na feira Info brasil - Tema Qualidade NOIX em Websites
Palestra na feira Info brasil - Tema Qualidade NOIX em Websites
 
Marketing digital, amostra aula de pós graduação
Marketing digital, amostra aula de pós graduaçãoMarketing digital, amostra aula de pós graduação
Marketing digital, amostra aula de pós graduação
 
Palestra Social Media Week São Paulo - Desenvolvimento web desafios da intern...
Palestra Social Media Week São Paulo - Desenvolvimento web desafios da intern...Palestra Social Media Week São Paulo - Desenvolvimento web desafios da intern...
Palestra Social Media Week São Paulo - Desenvolvimento web desafios da intern...
 
Case do Tá Tri no RS on Rails 2010
Case do Tá Tri no RS on Rails 2010Case do Tá Tri no RS on Rails 2010
Case do Tá Tri no RS on Rails 2010
 
Application Insights: identificando problemas de performance em aplicações le...
Application Insights: identificando problemas de performance em aplicações le...Application Insights: identificando problemas de performance em aplicações le...
Application Insights: identificando problemas de performance em aplicações le...
 
Performance em-front-end-luiz-tanure
Performance em-front-end-luiz-tanurePerformance em-front-end-luiz-tanure
Performance em-front-end-luiz-tanure
 

Desempenho e Otimização no Frontend: Aplicações incríveis independentes de framework!

Editor's Notes

  1. When accessibility features are effectively implemented in one component, the other components are more likely to implement them. When web browsers, media players, assistive technologies, and other user agents support an accessibility feature, users are more likely to demand it and developers are more likely to implement it in their content. When developers want to implement an accessibility feature in their content, they are more likely to demand that their authoring tool make it easy to implement. When authoring tools make a feature easy to implement, developers are more likely to implement it in their content. When an accessibility feature is implemented in most content, developers and users are more likely to demand that user agents support it.
  2. When accessibility features are effectively implemented in one component, the other components are more likely to implement them. When web browsers, media players, assistive technologies, and other user agents support an accessibility feature, users are more likely to demand it and developers are more likely to implement it in their content. When developers want to implement an accessibility feature in their content, they are more likely to demand that their authoring tool make it easy to implement. When authoring tools make a feature easy to implement, developers are more likely to implement it in their content. When an accessibility feature is implemented in most content, developers and users are more likely to demand that user agents support it.
  3. When accessibility features are effectively implemented in one component, the other components are more likely to implement them. When web browsers, media players, assistive technologies, and other user agents support an accessibility feature, users are more likely to demand it and developers are more likely to implement it in their content. When developers want to implement an accessibility feature in their content, they are more likely to demand that their authoring tool make it easy to implement. When authoring tools make a feature easy to implement, developers are more likely to implement it in their content. When an accessibility feature is implemented in most content, developers and users are more likely to demand that user agents support it.
  4. When accessibility features are effectively implemented in one component, the other components are more likely to implement them. When web browsers, media players, assistive technologies, and other user agents support an accessibility feature, users are more likely to demand it and developers are more likely to implement it in their content. When developers want to implement an accessibility feature in their content, they are more likely to demand that their authoring tool make it easy to implement. When authoring tools make a feature easy to implement, developers are more likely to implement it in their content. When an accessibility feature is implemented in most content, developers and users are more likely to demand that user agents support it.
  5. Content: Having the most relevant and best answers to a prospect’s question. Technical SEO: How well your content can be crawled and indexed. On-site SEO: The optimization of your content and HTML. Off-site SEO: Building authority to boost trust and rankings.