Parar de remedir o documento em cada moldura de rolagem
Dois ouvintes de rolagem na página inicial ler `scrollHeight` por evento. Isso é um consulta de layout, e esta página é o pior lugar para fazer uma repetidament...
Soltar filtro de fundo nos telefones
A página inicial renderiza 94 elementos que carregam `filtro de fundo: borrão(20px)`. Cada uma é uma camada de composição separada que tem que ler de volta tudo...
Tire o rodapé e o cromado de rolagem do cliente
Três mudanças, todas removendo trabalho da janela onde a página está sendo julgada. `(pages)/layout.tsx` transportado `"use client"` e nunca precisou dele — ne...
Impedir três recursos de superar o elemento LCP
A desagregação LCP é o período restante e as suas duas subpartes de carga — 270 ms de atraso na carga de recursos, 500 ms de duração da carga — são um problema ...
Um banner de posição fixa não pode usar uma revelação orientada por rolagem
Caiu da varredura, apanhado antes que pudesse importar. Os mapas de reescrita animações de entrada em `.reveal`, que é impulsionado por `animação-timeline: view...
Remover o gsap, o segundo tempo de execução da animação na página inicial
Framer era o Farol do pedaço chamado. GSAP é aquele que não fez, porque ele chega tarde o suficiente para cair fora do " JavaScript não usado" — mas é 69 KB em ...
A plataforma executa YugabyteDB, não BarataDB
Não relacionado com o trabalho de desempenho — encontrado ao ler a página inicial em linha carga útil, onde a string apareceu nas respostas FAQ. BarataDB foi a...
Remover o quadro-moção do site
"Reduzir JavaScript não utilizado" nomeou o mesmo bloco 35,4 KB em cada relatório, e é o Framer Motion. Não é um script ansioso na página inicial, que é por que...
Resolver os ícones da org no servidor e pré- ligar a origem
Farol chamado theme.kamocrm.com como uma origem não conectada no valor de 300 ms, enquanto também relatando nenhuma origem pré-conectada, e última rodada li que...
Tornar o servidor realmente capaz de ler o caminho do tema
Completa a mudança 48493ae enviado metade de. Aquele commit varreu quatro em voo. arquivos — layout.tsx, DynamicMetaLoader, TouchOtimized e ThemedBackground — e...
Pare de ligar o farol de referência, e informe a visita corretamente
Duas correções ao que foi enviado, ambas restaurando o comportamento deste recurso foi Pedido. O farol estava a usar o registo de consentimento de análise. Iss...
Parar três pacotes de rota sendo prefetched na homepage
Farol 103 KiB de " JavaScript não usado" nomeado quatro pedaços, dois deles essencialmente 100% não utilizados. Nenhum deles aparece no HTML da página inicial —...
Nomeie as larguras do cenário e leia a configuração do tema no servidor
Duas descobertas, ambas estavam a fazer algo diferente do que o código dizia. O Backdrop estava preparando o Candidate 1920. 149 KB, para uma imagem decorativa...
Honrar um link de parceiro e relatar o que trouxe
Um visitante que segue https://www.<apex>?mrt=<code> recebe dois cookies de primeira parte do middleware de borda — um GUID opaco que dura dois anos e o código ...
Comprimir as imagens com mais força, manter as cartas paradas, soltar pedidos duplicados
Imagens. Cada configuração de qualidade na página desce um passo, e a lista de permissões em next.config.ts vai para [30, 50] para que nada possa pedir mais sil...
Dividir o herói e tirar as duas últimas bibliotecas da página
Passo C. Nem GSAP nem Framer Motion está na homepage mais, eo O espaço de nomes de mensagens `home' não é mais enviado para o navegador. JS 241,999 -> 214,135 ...
Sete secções param de hidratar
Passo B. TrustBar, WhatReplacesWhat, Como Funciona, UseCases, Características, CTAStrip e Os preços são componentes do servidor agora. Eles renderizam para HTML...
Tire o tempo de execução da animação da homepage inteiramente
Passo A do trabalho de hidratação. Framer Motion se foi da página inicial ansioso feixe: 798.723 -> 687.593 bytes brutos, 245.367 -> 209.422 gzip. São 35.945. m...
Pare de renderizar oito seções fora da tela antes que o herói possa pintar
O LCP era de 4,4 s, e a sua repartição dizia onde: 120 ms para o primeiro byte, 290 ms de atraso de carga, 390 ms realmente baixando a imagem - e, em seguida, 1...
Desfaça as duas alterações que custam 380ms de tempo de bloqueio, e acalme o telefone
As duas últimas rodadas tiveram a pontuação de 87 a 67. Bloqueamento total O tempo passou 80 ms a 460 ms e LCP de 3,9 s a 4,4 s. Duas das minhas próprias mudanç...
Mover o título para o compositor e o elemento de conversa fora de carga
Duas coisas restantes da última rodada, ambas marcadas em vez de feitas porque Cada troca de algo. A fazê-los agora. A linha da frente passa pela luz. Era uma ...
Rendere o lado do servidor de imagens temáticos e mantenha o texto da marca legível
Cada fundo na página inicial estava sendo baixado TWICE. Os componentes renderizado o tema local `/img/bg/N.wepp`, então um efeito resolveu o tema do org caminh...
Inline a folha de estilo, e soltar polifills nada pode alcançar
Dois achados do farol, ambos ficaram abertos após a última rodada porque Eu tinha concluído que eles não eram endereçáveis. Eram; eu não tinha procurado muito C...
Nomeie os controles que não tinham nome, e levante o texto sob 4.5:1
Três defeitos separados, todos invisíveis à construção, o tipo de verificação, o O lint run e ambos os guardas existentes. UNNAMED CONTROLS — a opção de navega...
Parar o transporte 1,8 MB de fundos não redimensionados após a hidratação
ThemedBackground foi a coisa mais cara deixada na página inicial, e nenhum dos Parecia um insecto. Ele renderizou um cru <img> direto no balde tema, então o nav...
Pare a dobra à espera de hidratação e limpe a janela de carga
A página inicial enviou toda a sua dobra invisível. Framer Motion serializa um `inicial` prop no HTML pré-renderizado como um estilo inline, então a marcação ch...
Remova a sonda de tempo de navegação
Fez o seu trabalho. A questão que lhe foi acrescentada foi a de saber se o atraso remanescente era rede, script ou pintura — acabou por ter uma quarta resposta ...
Pare o rastreador de análise sequestrando todos os links, exceto Home
Cada página, exceto a página inicial, levou segundos para abrir, e a razão nunca foi no próprio caminho de navegação deste aplicativo: o servidor pré-renders, p...
Cada mudança de rota estava animando um rolo de volta ao topo
<html> carregava o `scroll-smooth' de Tailwind e nada mais. A próxima supressão é suave rolagem enquanto ele rola para uma nova rota, mas apenas para páginas qu...
Mover os controles de vídeo para o canto superior direito
Eles sentaram-se no fundo-esquerda apenas porque o quadro usado para sangrar da borda direita de o viewport, que teria colocado um controle ancorado lá fora da ...
Meça navegação real e cargas frias, não apenas sessões marcadas
Cinco rodadas de correções têm cada removido um defeito real e nenhum fixou o que é realmente sendo sentido, porque cada diagnóstico até agora tem sido inferênc...
Baixe o limite de carregamento em todo o site que apenas páginas secundárias pagas
Cada página exceto a página inicial parecia lenta, que aponta diretamente para as (páginas) subárvore — e em algo que eu coloquei lá. Quando 4fae924 adicionado ...
Renderizar a contagem do changelog, atualizá-la ao publicar em vez de na visita
Todos os visitantes iam buscar este número. PreviewBanner vive no compartilhado layout, então em cada página que atingiu /api/changelog/hoje após a hidratação, ...
Pare de prefetching um megabyte por página, e pare de chamar a infra- estrutura de graça
Dois custos que foram pagos em cada página, ambos encontrados seguindo o próprio repórter Um palpite sobre a I18n e chamadas desnecessárias. VOLUME PREFETCH — ...
Adicionar uma sonda de tempo de navegação opt-in atrás de ?perf=1
Os interruptores de página ainda se sentem lentos na produção, e o servidor foi excluído de máquina própria do repórter: respostas de 55-122ms, x-nextjs-cache H...
Sobreviver a uma imagem tentada novamente e parar de implantar duas vezes por push
O implante 013faf1 falhou em `excedeu seu prazo de progresso` enquanto o lançamento ela própria estava bem — a vagem surgiu saudável cerca de 90, e prod tem ser...
Pare cada interruptor de página esperando em um redirecionamento e um 2s fade-in
O trabalho de pré-renderização em 4fae924 fixou o servidor e o roteador, e o site Ainda senti que levou 1-2 segundos para mudar de página. Nunca foi a rede. Dua...
Prender as rotas novamente e dar uma navegação algo para pintar
O layout locale resolveu suas mensagens com um getMessages (), que lê request headers e por isso optou pela aplicação TODA a partir de renderização estática. Se...
Carregar o contraste do cabeçalho para fixação de preços, segurança, cerca e oferta
O mesmo defeito da página inicial, os mesmos nove pontos restantes: cabeçalhos das secções aberto em `--color-primário `, que mede 2,61:1 contra um meio-verde F...
Levantar o contraste de secção-cabeça fora da extremidade verde da rampa
A segunda linha de cada secção era '--color-primário' -> '--color-primário-luz' -> `-color-secundário', então ele começou na marca Verde. Medido em meio-verde f...
Jogue o carretel kamo13
Aponta o herói na escada do novo carretel, retrocesso do MP4 e cartaz. A fonte é específico para aquele que substitui (H.264 720p24, 66s, ~30 MB), então Nada so...
Mover a grade para fora do estilo- jsx; solte dois componentes mortos
Termina a varredura styled-jsx iniciada no banner de visualização. Sem `<style jsx>` bloco permanece em qualquer lugar na aplicação. SITEMAP — a grade era um '...
Parar o banner piscando sem estilo, fazer cartões inteiros recursos clicáveis
PREVISÃO BANNER — seu CSS viveu em um `<style jsx>` bloco dentro do componente. No App Router styled-jsx não é servidor-render CSS para componentes do cliente, ...
Centrar o movimento cambaleante em sua coluna em vez de empurrá-lo para a borda
Dois passes anteriores tiveram o palco atingindo a borda da página — primeiro Pendurando o viewport por 1,5–5rem, em seguida, sentado flush contra ele. Overhang...
Ligar o banner da oferta, corrigir mortos Saiba mais links e o campo hexagono
Cinco correções, todas aquelas coisas que pareciam presentes mas não fizeram nada. OFERTA BANNER — HeroOfferBanner era código morto; nada o importou. Restaurad...
Reconstruir o herói como uma divisão editorial com o rolo como uma abertura
O carretel era um retângulo arredondado centrado com uma sombra de gota — um objeto colocado sobre o design em vez de parte dele — e era a ÚNICA coisa no herói:...
Jogue o movimento cambaleante como uma escada adaptativa HLS em vez de um 31,8 MB MP4
O herói apontou uma tela nua <vídeo src> em um único 3,9 Mbps 720p24 MP4, assim um telefone em uma conexão fraca baixado exatamente o mesmo fluxo que um desktop...
Unidade de herói de vídeo polonês com animações e otimizações modernas
- Adicionar imagem de cartaz para feedback visual instantâneo durante a carga de vídeo - Implementar o esqueleto de carga com animação pulsante - Iniciar o víde...
Como o que vês no transporte?
Tudo isso chega em seu espaço de trabalho por conta própria. Comece no plano gratuito e leia esta página novamente em um mês.