4 dicas para melhorar o desempenho da sua página

Sep 11, 2025

Como

Web-performance expert Henri Helvetica sitting with his laptop

Analista de Desempenho da Web. Henri Helvetica. estará compartilhando suas dicas profissionais sobre como aumentar o desempenho do seu site em Gere Nova York 2018 Obtenha seu ingresso agora .

O desempenho está finalmente se tornando uma parte maior da conversa em web design e desenvolvimento. No entanto, ainda pode ser um desafio para conseguir que as pessoas consomem realmente o grande conteúdo que está lá fora e adota uma abordagem de desempenho em uma base mais regular.

Felizmente, o desenvolvedor freelance e o analista de desempenho da web Henri Helvetica (nome real Henri Brisard), está à disposição para oferecer suas pontas as melhores sobre o desempenho do seu site.

01. esforçar-se para medir

Helvetica sugere que antes de tudo você tem que garantir que você meça. "Você nunca pode melhorar o que você não mede", explica ele. "Depois de ter suas medições e dados estabelecidos, você tem que descobrir quais elementos importantes para medir. Você pode ter duas páginas que carregam em nove segundos, mas pode-se ter a viewport cheia muito mais rápida, então você tem uma melhor experiência de usuário.

"Você precisa medir o que é importante no processo de carga para o seu site e sua empresa comercial. Pense no que é importante para que seus usuários interagirem. Cada site tem suas próprias necessidades individuais."

Uma vez que ele tivesse uma olhada em uma carga de página, o que o ajuda a pegar como e quando certos itens é carregado, o próximo passo de Helvetica é geralmente para disparar DevTools Chrome para avaliar exatamente o que está acontecendo. É uma escolha óbvia, porque é aí e é grátis - você não precisa pular para outra ferramenta para tentar descobrir por que uma página pode ser lenta. No entanto, muitos desenvolvedores mal usam isso. "DevTools é um pouco como um detector de fumaça", argumenta Helvetica. "Se houver fogo, DevTools lhe dirá. Pelo menos mostrará a você onde a fumaça é. "

02. Perca algum peso de página

Então Helvetica olha para a cachoeira, que indicará várias questões, como o tamanho de um ativo e a latência envolvida no carregamento. Se o site contiver imagens mal dimensionadas, por exemplo, você geralmente verá uma cachoeira muito longa, que é um dos pontos de dor mais fáceis para pegar rapidamente. As imagens são um dos maiores culpados para um site de carregamento lento - um problema que pode ser corrigido com bastante facilidade. Como eles são a maior fonte de dados, as imagens também são a maior fonte de economia de dados.

"Eu sempre teria em conta o peso da sua página", explica Helvetica. "Não importa como você o corte, se você tiver uma imagem que é 3MB, ou mesmo três imagens em 1MB cada, você provavelmente terá um desafio de experiência no usuário.

Web-performance expert Henri Helvetica coding on his laptop

"Esse peso de página também será a vítima da sua rede, porque uma rede celular nunca pode ser realmente prevista. Então você quer ter certeza de que seus ativos são pequenos e otimizados para a viewport, o que significa que você não deve ver qualquer Ativos de tamanho desktop em um dispositivo móvel ".

Helvetica também recomenda um carregamento preguiçoso, uma técnica que atrasa o carregamento de um objeto até que seja necessário. "Nem todos os usuários vão chegar ao fundo de uma página", ele adverte. "Muitas vezes você pode estar carregando ativos que nunca serão vistos. Empregar carga preguiçosa será muito benéfica porque você está economizando em dados, bem como drenagem de bateria ou gerenciamento de memória. Se você não estiver carregando a imagem, você não terá memória para usurpar no dispositivo. "

03. Veja como você empilha

Outra razão pela qual Helvetica favora DevTools é porque agora também fornece métricas como a primeira pintura (o tempo que leva para o usuário ver o primeiro pixel de conteúdo) e a primeira tinta significativa (o tempo que leva para o conteúdo primário da página para se tornar visível ).

Em seguida, há a filmstrip (em DevTools ou Performance Tool WebPagetest) que mostra capturas de tela incrementais do navegador renderizando um site, para que você possa ver como é uma página quando é carregada. Ao examiná-los, você pode descobrir quais ativos foram carregados quando e analisam maneiras de carregar algumas delas em um tempo anterior na linha do tempo.

No WebPagetest - Qual Helvetica elogia por seu nível inspirador de detalhes - você também pode exportar um vídeo da carga e comparar a filmstrip com a de um concorrente. "Depois de conectar os pontos, você pode explorar como melhorar a experiência do usuário, trazendo esses ativos para a viewport mais rápido", explica Helvetica.

04. Corte a desordem

Helvetica destaca que as decisões de design também têm impacto no desempenho, e que sua primeira carga na viewport, idealmente, não deve ser tão rápida quanto possível, mas também como livre de desordem quanto possível.

Por essa razão, você precisa entender a série de eventos que ocorrem para tornar a visão inicial de uma página da Web - o caminho de renderização crítica. Esses eventos podem ser otimizados, evitando ativos de carga que não são necessários e tomando decisões em torno da seleção de fontes da Web e formatos de imagem.

"Certifique-se de manter o seu SVGs como liberdade de complexidade possível", sugere Helvetica por exemplo de um exemplo. "Então você terá menos código quando você renderizar o seu SVG. Eu ouço isso de desenvolvedores o tempo todo. Eles receberão um SVG dos designers e terão que enviá-lo de volta porque isso afetaria o desempenho. "

Este artigo foi originalmente publicado em questão 303 da rede, a revista mais vendida do mundo para web designers e desenvolvedores. Comprar Edição 303. ou Inscreva-se na Net. .

Quer mais informações sobre a velocidade do seu site?

Henri Helvetica is giving his talk Planet of the APIs: A Tale of Performance & User Experience at Generate New York from 25 - 27 April 2018 — Henri Helvetica está dando seu planeta de conversa das APIs: um conto de desempenho e amp; Experiência do usuário em gerar Nova York de 25 - 27 de abril de 2018

Se você estiver interessado em garantir suas páginas Load Rightning, certifique-se de pegar um ingresso para Gere Nova York . A Henri Helvetica será realizando práticas atuais e até mesmo experimentais empregadas na medição de aplicativos da Web, e fornecendo experiências de usuários de desempenho, além de oferecer mais insight sobre medições, como primeira pintura, tinta e tempo significativos para interactivo.

Gerar Nova York ocorre de 25 a 27 de abril de 2018. Obtenha seu ingresso agora .

Artigos relacionados:

7 dicas de especialistas para pregar o desempenho da web
3 principais ferramentas para testar o desempenho da Web
Por que o desempenho da Web precisa se sentir rápido

4 dicas para melhorar o desempenho da sua página

01. esforçar-se para medir

02. Perca algum peso de página

03. Veja como você empilha

04. Corte a desordem

Quer mais informações sobre a velocidade do seu site?

Como - Artigos mais populares

Composição em animação: Aprenda o básico

Como criar um lobisomem 3D no motor irreal

Prepare uma placa para pintura em 3 etapas fáceis

Criar uma imagem de paralaxe interativa

4 passos para melhor vdm com zbrush

Como derreter um objeto 3D com três.js

Construa componentes responsivos escalonáveis

Como criar o cabelo no cinema 4D

Categorias