Páginas do Notion podem carregar lentamente, especialmente quando contêm bancos de dados complexos, conteúdo incorporado ou grandes quantidades de texto. A causa raiz geralmente é uma combinação de estrutura pesada da página, integrações de terceiros ou relações ineficientes no banco de dados. Este artigo explica como usar a aba Performance no Chrome DevTools para gravar e analisar o perfil de carregamento de uma página do Notion. Você aprenderá a identificar quais scripts, requisições de rede e tarefas de renderização estão deixando seu espaço de trabalho lento.
Principais Conclusões: Perfil de Carregamento de Página do Notion
- Ctrl+Shift+I > Aba Performance > Botão Gravar: Inicia uma gravação de desempenho que captura atividade da CPU, requisições de rede e quadros de renderização.
- Aba Performance > Botão Parar > Gráfico de chamas: Exibe uma linha do tempo de chamadas de função, permitindo identificar scripts longos ou thrashing de layout.
- Aba Performance > Abas Bottom-up ou Call Tree: Classifica funções por tempo total ou tempo próprio para identificar as operações mais custosas.
O que a Aba Performance Captura e Por Que Isso Importa para o Notion
A aba Performance no Chrome DevTools grava uma linha do tempo de tudo que o navegador faz ao carregar uma página. Isso inclui execução de JavaScript, análise de HTML, recálculos de estilo, operações de layout, pintura, composição e requisições de rede. Para uma aplicação web como o Notion, que depende fortemente de JavaScript para renderizar blocos de conteúdo ricos e visualizações de banco de dados, uma gravação de desempenho revela exatamente quais partes do código consomem mais tempo.
Quando uma página do Notion carrega lentamente, o gargalo geralmente está em uma de três áreas: execução excessiva de JavaScript devido a fórmulas ou rollups complexos, payloads de rede grandes de imagens ou arquivos incorporados, ou cálculos de layout repetidos causados por redimensionamento dinâmico de conteúdo. A aba Performance permite ver cada uma dessas categorias como faixas coloridas na linha do tempo. Ao examinar o gráfico de chamas e o painel de resumo, você pode identificar se a lentidão é devida a scripts, renderização, pintura ou latência de rede.
Antes de começar a criar o perfil, certifique-se de ter uma sessão limpa do navegador. Feche outras abas e extensões do navegador que possam interferir. Use o Chrome no modo anônimo para evitar dados em cache que possam mascarar problemas de desempenho. Além disso, tenha a página do Notion que deseja analisar aberta e pronta para recarregar.
Passos para Gravar e Analisar um Perfil de Carregamento de Página do Notion
- Abra o Chrome DevTools
Com a página lenta do Notion aberta, pressione Ctrl+Shift+I no Windows ou Cmd+Option+I no Mac. O painel DevTools é aberto. Clique na aba Performance na linha superior. Se não a vir, clique no ícone de seta dupla para revelar mais abas. - Configure as configurações de gravação
Na aba Performance, localize os controles de gravação no canto superior esquerdo. Procure uma caixa de seleção chamada Screenshots — ative-a para ver instantâneos visuais da página durante o carregamento. Ative também Memory se quiser rastrear o tamanho do heap. Desative Web Vitals a menos que precise de dados do Core Web Vitals, pois isso adiciona ruído. - Inicie a gravação
Clique no botão circular Record (um círculo preenchido) no canto superior esquerdo da aba Performance. O botão fica vermelho e o DevTools começa a capturar dados. Imediatamente, recarregue a página pressionando F5 ou Ctrl+R. Não interaja com a página até que o carregamento termine e a página apareça totalmente renderizada. - Pare a gravação
Assim que a página estiver totalmente carregada e você vir todo o conteúdo, clique no botão Stop (um quadrado) no mesmo local. O DevTools processa a gravação e exibe a linha do tempo, o gráfico de chamas e o painel de resumo. - Examine o painel Summary
Veja a aba Summary no lado direito do painel DevTools. Ela mostra um gráfico de pizza ou de barras com segmentos coloridos: azul para Loading, amarelo para Scripting, roxo para Rendering, verde para Painting e cinza para System. Se o segmento Scripting for grande, o problema é execução de JavaScript. Se o segmento Loading for grande, as requisições de rede são o gargalo. - Leia o gráfico de chamas
A área principal da aba Performance mostra o gráfico de chamas. Cada barra horizontal representa uma chamada de função. Barras mais longas significam maior tempo de execução. Passe o mouse sobre qualquer barra para ver o nome da função, nome do arquivo e duração. Procure barras significativamente mais longas que outras — esses são seus pontos críticos de desempenho. - Use as abas Bottom-Up e Call Tree
Abaixo do gráfico de chamas, clique na aba Bottom-Up. Ela classifica as funções por tempo total, mostrando quais operações consumiram mais CPU. Clique na aba Call Tree para ver a hierarquia de chamadas, começando pela atividade raiz. Ambas as visualizações ajudam a identificar códigos específicos do Notion ou scripts de terceiros que são lentos. - Filtre por tipo de atividade
Use o menu suspenso na aba Performance que diz All. Altere para Scripting para ver apenas eventos JavaScript, ou Rendering para ver cálculos de layout e estilo. Isso restringe a busca à categoria mais relevante. - Salve a gravação para análise posterior
Clique no ícone Save profile (um disquete) no canto superior esquerdo da aba Performance. Salve o arquivo com extensão .devtools. Você pode carregá-lo depois clicando no ícone Load profile (uma pasta) e selecionando o arquivo.
Se a Gravação de Performance Não Mostrar Gargalo Claro
Gravação mostra principalmente tempo ocioso
Se o gráfico de chamas mostrar grandes lacunas sem atividade, a página pode estar esperando uma resposta de rede. Verifique a aba Network no DevTools junto com a gravação de Performance. Procure requisições que levam mais de alguns segundos. Os culpados comuns são arquivos de imagem grandes, PDFs incorporados ou widgets de terceiros que carregam lentamente.
Tempo de script é alto, mas nenhuma função se destaca
Quando o painel Summary mostra tempo alto de Scripting, mas o gráfico de chamas mostra muitas barras pequenas de comprimento semelhante, o problema provavelmente é um loop ou operação recursiva. No Notion, isso geralmente acontece quando uma visualização de banco de dados tem muitas fórmulas de rollup ou relações vinculadas. Tente simplificar o banco de dados removendo colunas não utilizadas ou convertendo rollups em propriedades regulares.
Tempo de renderização ou pintura é alto
Se os segmentos roxo (Rendering) ou verde (Painting) forem grandes, a página tem thrashing de layout ou operações de pintura caras. No Notion, isso pode ocorrer quando uma página contém muitos blocos incorporados, como vários bancos de dados, imagens ou blocos de código. Reduza o número de incorporações ou use blocos de alternância para recolher conteúdo que não é necessário imediatamente.
Tempo de Carregamento de Página do Notion: Gargalos Típicos vs. Ações Recomendadas
| Gargalo | Indicador no DevTools | Ação Recomendada |
|---|---|---|
| Execução excessiva de JavaScript | Grande segmento amarelo Scripting; barras longas no gráfico de chamas | Simplifique fórmulas do banco de dados, remova rollups não utilizados, reduza colunas de relação |
| Requisições de rede lentas | Grande segmento azul Loading; tempos de requisição longos na aba Network | Comprima imagens, use formatos de arquivo menores, incorpore menos recursos externos |
| Thrashing de layout ou pintura pesada | Grandes segmentos roxo ou verde; eventos de layout repetidos | Recolha blocos incorporados, use cabeçalhos de alternância, reduza incorporações em linha |
Após identificar o gargalo, aplique a ação recomendada e repita o processo de criação de perfil. Compare a nova gravação com a anterior para confirmar a melhoria. Você pode carregar o arquivo .devtools salvo e a nova gravação lado a lado em janelas separadas do DevTools.
Para lentidões persistentes que não são causadas pelo conteúdo da página, verifique suas extensões do navegador. Alguns bloqueadores de anúncios ou ferramentas de privacidade injetam scripts que entram em conflito com o Notion. Desative temporariamente todas as extensões e execute o perfil novamente. Se o desempenho melhorar, ative as extensões uma por uma para encontrar o culpado.
Por fim, considere usar o modo de desempenho integrado do Notion. Vá para Configurações e Membros na barra lateral esquerda e selecione Configurações. Role até a seção Exibição e ative Reduzir movimento e Reduzir efeitos visuais. Essas configurações desativam animações e transições, o que pode reduzir o tempo de renderização em páginas com muitos blocos.