Como construir sites mais rápidos

Feb 3, 2026
Como

À frente de sua conversa em Gere London Em 21 de setembro, nós alcançamos Patrick Hamann. , um engenheiro de desempenho da web em Rapidamente , quem está em uma missão para construir uma web mais rápida para todos.

O que o seu papel se envolve rapidamente?
Patrick Hamann: Fastly é uma plataforma de nuvem de borda que sustenta algumas das maiores marcas do mundo. Meu papel se concentra predominantemente em R & AMP; D; Trabalhando com equipes dentro de jejuar rapidamente para utilizar as tecnologias do lado do cliente e os padrões da Web para melhorar o desempenho e a entrega de nossos produtos e - mais importante - os serviços de nossos clientes. Alguns projetos atuais incluem iniciativas em torno do monitoramento de desempenho do navegador, métricas e trabalhadores de serviços.

Antes de se juntar rapidamente, você passou um tempo no Guardião e no Financial Times. Como eles se aproximaram de desempenho da web?
PH: O desempenho não é mais um item add-on ou lista de verificação pós-implantação. É preciso ser um esforço constante que toda pessoa na organização considera, desde o projeto até a entrega. Isso é algo que essas organizações de notícias perceberam muito cedo, introduzindo práticas como a construção de infraestrutura de monitoramento para medir e comparar o desempenho contra os concorrentes, priorizando a prestação de conteúdo sobre outros recursos e utilizando tecnologias como os trabalhadores de serviços.

Qual é o maior obstáculo para uma experiência rápida online agora?
PH: Uma palavra: javascript. Eu acho que deveria elaborar isso ligeiramente: a web está no pico de uma crise de obesidade de JavaScript. A página da Web média agora entrega cerca de 500kb de script. Script que leva mais de um segundo para apenas analisar - muito menos executar - em um dispositivo de baixa potência e superior a cinco segundos para chegar a um estado que o usuário pode interagir com a página. Portanto, a única maneira de melhorar a experiência do usuário de nossos sites é medir, otimizar e reduzir nosso javascript - acima de tudo.

WebPageTest runs a free website speed test from multiple locations around the globe using real browsers and at real consumer connection speeds

O WebPagetest executa um teste de velocidade gratuito de sites de vários locais em todo o mundo usando navegadores reais e em velocidades de conexão do consumidor real

Quais são suas ferramentas favoritas para otimizar o desempenho da Web?
PH: Eu sou um forte crente que você não pode otimizar o que você ainda não tem medido. Então, minha caixa de ferramentas é muito ponderada para ferramentas de medição e criação de perfil. Para medição sintética, eu sempre vou alcançar Webpagetest. e ferramentas de desenvolvedor do navegador (painéis de rede e desempenho) primeiro. No entanto, nada bate de medir experiências de usuário real também (r.U.m), então um bom conhecimento da APIs de tempo de desempenho do navegador também ajuda também.

Você trabalhou em algumas faixas de código muito grandes. Quais são os desafios do trabalho em escala?
PH: Em geral, eu argumentaria que uma Big Code Base compartilha a maioria dos problemas que você encontraria em um menor: eliminando CSS não utilizados (um problema que eu acho que não é resolvido), cache, pipelines e versões de construção de ativos, e assim por diante. Você também recebe mais 'bit podridão' - as melhores práticas se tornando anti-padrões ao longo do tempo. Mas pessoalmente, descobri que a maioria dos desafios em escala são problemas de pessoas, não técnicos. Eu ainda estou para trabalhar em uma grande organização que não é afetada pela lei de Conway.

Você chama a si mesmo um defensor de aprimoramento progressivo. O que é sobre essa abordagem que ressoa com você?
PH: Ao contrário da crença popular, nossos usuários realmente usam os produtos que construímos no mundo real: um cheio de condições de navegação não ideais e falhas em torno de todos os cantos. O aprimoramento progressivo nos permite construir experiências que são inclusivas para todos os nossos usuários e são resilientes aos fracassos do mundo real. É bem simples: Basta começar com o básico, não uma biblioteca de JavaScript de 300kb que sua barista local contou. Não devemos esquecer o básico.

O que você está animado no desenvolvimento do frontend no momento?
PH: A teia está sob ameaça. Os usuários estão gastando mais tempo em nativos - e assim parados - experiências de aplicativos longe da abertura da web. No entanto, ainda parecemos construir sites que levam 20 segundos e custam £ 1,20 por carga na minha conexão de roaming, finalmente dirigindo nossos usuários ainda mais.

Felizmente, as tecnologias como o trabalhador de serviço e as APIs associadas estão aqui para ajudar. Não posso esperar por uma nova era de sites rápidos e resilientes que ainda funcionam offline, podem sincronizar meus dados no fundo e me avisar com atualizações. Algumas pessoas estão chamando desse progressivo "aplicativos progressivos". Eu prefiro o termo "a web".

In his talk at Generate London Patrick Hamann will explore the current, past, and future best-practices for loading assets in the browser

Em sua conversa em Generate London Patrick Hamann explorará as melhores práticas atuais, passadas e futuras para carregar ativos no navegador

O que as pessoas podem esperar aprender com sua palestra em Gere London ?
PH: Para o estranho, servindo um site parece bastante simples: envie alguns html e css no fio, então o navegador decide o que fazer a seguir. No entanto, muito está acontecendo sob o capô, todos chegando a um custo para nossos usuários.

Como o navegador determina que ativo solicitará? Como podemos medir a velocidade percebida de nossos sites? Como podemos usar recursos modernos da plataforma da Web para influenciar a prioridade e a velocidade de nossos ativos? Espero que minha palestra respondesse a essas perguntas e mais. Dando ao público as ferramentas para criar experiências mais rápidas e mais resilientes para seus usuários.

Gere London Em 21/22 Setembro apresenta 15 outras apresentações cobrindo animações da Web, estratégia UX, prototipagem, acessibilidade, componentes CSS responsivos e muito mais. Há também quatro workshops para escolher no dia anterior à conferência, mas os ingressos são muito limitados. Reserve o seu lugar agora !

Como - Artigos mais populares

Obtenha mais de Artrage 6: Dicas Top para aumentar seu fluxo de trabalho

Como Feb 3, 2026

(Crédito da imagem: Steve Goad) Neste artigo, estarei fornecendo conselhos e insights sobre artrge, um programa que ..

4 passos para usar fontes variáveis ​​

Como Feb 3, 2026

(Crédito da imagem: futuro) As fontes variáveis ​​permitem que os designers de fontes definam variações de ti..

17 maneiras de desenhar melhor criaturas

Como Feb 3, 2026

Quando você está desenhando criaturas, é vital que eles são críveis. Não importa o quão louco seus projetos se tornem, lem..

Como misturar uma paleta de guache

Como Feb 3, 2026

Guache é mais perdoante do que a tinta aquarela, mas as decisões que você faz cedo ainda podem afetar o resto do quadr..

Como criar mundos coloridos que contam uma história

Como Feb 3, 2026

Cenas imaginadas que deixam você com uma sensação de admiração fazem você querer descobrir mais e ver o que está ao virar ..

Faça plantas realistas no cinema 4D

Como Feb 3, 2026

Não importa o seu uso final, a maioria das cenas centradas em uma estrutura feita pelo homem se beneficiará de um toque de folh..

Top Dicas para Pintura Mãos Expressivas

Como Feb 3, 2026

As mãos são provavelmente o elemento anatomia mais difícil para saber Como pintar , ainda mais quando eles têm..

Criar gráficos interativos em 2

Como Feb 3, 2026

Quando você trabalha em uma pequena equipe, ele tende a ser difícil de escrever e manter um código separado para Android, iOS ..

Categorias