Como Analisar o Desempenho de Carregamento de Páginas no Notion

Você pode notar que algumas páginas do Notion levam vários segundos para carregar enquanto outras abrem instantaneamente. Esse atraso geralmente é causado pelo número de blocos na página, pela complexidade dos bancos de dados vinculados ou pelo tamanho dos arquivos incorporados. Este artigo explica como usar as ferramentas de perfil de página integradas do Notion e métodos de inspeção manual para identificar o que está deixando uma página específica lenta. Ao final, você saberá exatamente quais elementos remover ou otimizar para melhorar a velocidade de carregamento.

O Que Afeta o Tempo de Carregamento de uma Página no Notion

O Notion renderiza as páginas como uma árvore de blocos. Cada bloco, seja um parágrafo de texto, uma visualização de banco de dados ou um arquivo incorporado, exige uma chamada de API separada para carregar seu conteúdo. Quando você abre uma página, o Notion busca primeiro os blocos de nível superior e, em seguida, carrega recursivamente os blocos filhos. Esse processo cria uma cascata de requisições de rede. Quanto mais blocos e maior o aninhamento, mais tempo a página leva para se tornar interativa.

Contagem e Profundidade dos Blocos

Uma página com 500 blocos carrega mais lentamente do que uma com 50 blocos, mas a estrutura de aninhamento é mais importante. Uma página com 10 blocos de nível superior, cada um contendo 50 filhos, gera mais requisições de API do que uma página plana com 500 blocos. O Notion precisa resolver cada bloco filho antes que o pai possa terminar a renderização. É por isso que listas de alternância profundamente aninhadas ou bancos de dados com vários níveis causam atrasos perceptíveis.

Relações e Rollups em Bancos de Dados

Bancos de dados vinculados com propriedades de relação para outros bancos de dados forçam o Notion a buscar linhas de várias tabelas. Cada propriedade de relação cria uma consulta adicional. Propriedades de rollup que agregam dados de linhas relacionadas multiplicam esse efeito. Uma única visualização de banco de dados com cinco colunas de relação pode disparar dezenas de chamadas de API antes que a visualização seja exibida.

Conteúdo Incorporado

Arquivos incorporados, imagens, vídeos e incorporações de terceiros, como Google Docs ou quadros do Figma, carregam independentemente do sistema de blocos do Notion. Cada incorporação inicia uma requisição HTTP separada. Imagens grandes sem compressão aumentam o uso de largura de banda e o tempo de análise. Incorporações de serviços externos lentos podem bloquear a renderização da página se não carregarem rapidamente.

Passos para Analisar uma Página do Notion

1. Abra a página em um navegador de desktop
   Use Chrome ou Edge para obter as ferramentas de perfil mais precisas. O aplicativo de desktop do Notion usa o mesmo mecanismo de renderização, mas as ferramentas de desenvolvedor do navegador oferecem melhores recursos de gravação de desempenho.
2. Abra as Ferramentas do Desenvolvedor
   Pressione Ctrl+Shift+I no Windows ou Cmd+Option+I no Mac. Clique na guia Performance. Se não a vir, clique no ícone de seta dupla para revelar guias ocultas.
3. Inicie uma gravação de desempenho
   Clique no ícone de círculo de gravação ou pressione Ctrl+E. Recarregue a página pressionando F5 ou Ctrl+R. Deixe a página terminar de carregar completamente. Clique no ícone de parada para encerrar a gravação.
4. Analise o gráfico de chamas
   Procure barras altas na cor laranja ou roxa com os rótulos BlockRender, APIRequest ou EmbedLoad. Passe o mouse sobre cada barra para ver o ID exato do bloco ou URL. A largura da barra representa o tempo gasto naquela operação.
5. Identifique blocos lentos pelo ID
   Clique na barra de um evento BlockRender. No painel Summary abaixo, encontre o ID do bloco. Copie esse ID. Mude para a guia Console e digite window.__NOTION_DEVTOOLS.getBlockInfo('COLE_O_ID_DO_BLOCO'). Isso retorna o tipo do bloco, o ID do pai e a contagem de filhos.
6. Verifique o desempenho de consultas ao banco de dados
   Na gravação de Performance, procure eventos com nomes começando com queryCollection ou getCollectionData. Eles indicam carregamentos de visualização de banco de dados. Clique em cada evento e anote a duração. Uma consulta que leva mais de 500 ms sugere que o banco de dados tem muitas linhas ou filtros complexos.

Usando o Page Analytics Integrado do Notion

1. Abra o painel Page Analytics
   Clique no menu de três pontos no canto superior direito da página. Selecione Page Analytics no menu suspenso. Se você não vir essa opção, seu workspace pode não tê-la habilitada. Entre em contato com o proprietário do workspace para ativá-la em Settings & Members > Settings > Workspace > Page Analytics.
2. Revise a contagem e o tamanho dos blocos
   O painel mostra o número total de blocos, o número de visualizações de banco de dados e o tamanho total dos arquivos incorporados. Ele também lista os 10 blocos mais lentos por tempo de carregamento.
3. Identifique avisos de profundidade de relação
   O Page Analytics exibe um aviso se uma visualização de banco de dados contiver propriedades de relação que encadeiem mais de três níveis de profundidade. Cada nível adicional aumenta o tempo de carregamento em aproximadamente 200 ms.

Problemas Comuns Encontrados Durante a Análise

Carregamento de Visualização de Banco de Dados Excede 1 Segundo

Se uma única visualização de banco de dados levar mais de um segundo para carregar, verifique o número de linhas no banco de dados de origem. O Notion tem melhor desempenho com bancos de dados com menos de 10.000 linhas. Reduza a contagem de linhas arquivando entradas antigas ou dividindo o banco de dados em tabelas menores. Verifique também se filtros e classificações não estão usando fórmulas complexas. Um filtro em uma coluna de rollup é mais lento do que um filtro em uma propriedade de texto.

Conteúdo Incorporado Bloqueia a Renderização da Página

Quando uma incorporação falha ao carregar, o Notion aguarda um tempo limite que pode exceder 30 segundos. Substitua incorporações iframe por pré-visualizações de link sempre que possível. Para imagens, use formatos comprimidos como WebP em vez de PNG. Se precisar incorporar um vídeo grande, configure a incorporação para carregar ao clicar, usando um bloco de alternância com a incorporação dentro.

Muitos Blocos de Alternância Abertos por Padrão

Blocos de alternância que estão expandidos no carregamento da página forçam o Notion a buscar seus filhos imediatamente. Feche todas as alternâncias antes de salvar a página. Como alternativa, converta alternâncias profundamente aninhadas em subpáginas separadas. Isso reduz o número de blocos que a página pai precisa carregar de uma vez.

Desempenho de Carregamento de Páginas no Notion: Tipos de Bloco Comparados

Tipo de Bloco	Tempo Médio de Carregamento	Impacto no Carregamento da Página
Parágrafo de texto	2-5 ms	Mínimo
Visualização de banco de dados (simples)	100-300 ms	Moderado
Visualização de banco de dados com relações	400-1200 ms	Alto
Imagem incorporada (1 MB)	200-800 ms	Moderado a alto
Vídeo incorporado (stream)	1-3 s	Muito alto
Bloco de alternância (recolhido)	1-3 ms	Mínimo
Bloco de alternância (expandido)	50-150 ms por filho	Alto

A tabela mostra que visualizações de banco de dados com relações e alternâncias expandidas são os tipos de bloco mais custosos. Concentre seus esforços de otimização nessas duas áreas primeiro.

Agora você sabe como usar as ferramentas de desenvolvedor do navegador e o painel Page Analytics do Notion para encontrar os blocos exatos que estão deixando sua página lenta. Comece analisando uma página lenta e removendo ou simplificando os elementos que aparecem como as barras mais longas na gravação de desempenho. Para manutenção contínua, defina um lembrete mensal para verificar o Page Analytics de qualquer página que tenha ultrapassado 500 blocos. Use o comando de console window.__NOTION_DEVTOOLS para investigar IDs de blocos específicos sem precisar adivinhar.