Nota: apenas traduzi o texto abaixo e postei aqui.
Periodicamente, pessoas me perguntam como meu site é tão rápido. Hoje vou mostrar como.
O que faz um site rápido (ou devagar)?
Há muitas coisas que contribuem para a rapidez do seu site ou application.
Três coisas que descobri que têm o maior impacto no desempenho real e percebido são:
1. A rapidez com que o servidor responde a uma solicitação de um HTML document (também conhecido como web page). Quanto mais rápido um servidor começar a enviar coisas de volta depois que alguém digitar uma URL, mais rápido o navegador poderá começar a renderizar esse conteúdo.
2. Quantas viagens de ida e volta HTTP (roundtrip) são necessárias para obter todas as "coisas" associadas à web page. Este é literalmente o tamanho do seu site. Quanto maior for, mais viagens de ida e volta serão necessárias para obter todos os dados. Cada viagem de ida e volta pode conter cerca de 14 KB de dados.
3. Quanto do código em sua web page bloqueia a renderização. O HTML pode começar a renderizar imediatamente. O CSS parsing é muito rápido, mas bloqueia a renderização até que seja parsed. JavaScript é literalmente o pior, bloqueando a renderização e demorando um pouco para compile e parse.
Meu segredo para um site realmente rápido
Com base nos itens que têm maior impacto no desempenho, faço o seguinte.
1. Eu uso DigitalOcean para hospedagem, porque seus servidores SSD são muito baratos e têm muito desempenho. Eles enviam dados de volta ao navegador pelo menos duas vezes mais rápido que a hospedagem compartilhada com preços semelhantes de outros fornecedores. Também uso HTML estático em vez de um site renderizado por banco de dados, para que os arquivos sejam retornados imediatamente.
2. Tento usar principalmente HTML e minimizar a quantidade geral de CSS e JavaScript necessária. Uma página típica do meu site inclui menos de 14kb de HTML, CSS e JavaScript combinados (após compactação e redução). Por causa disso, torno "inline" literalmente tudo. A página inteira é enviada em uma única HTTP request e pode iniciar a renderização imediatamente.
3. Eu coloco meu JavaScript no footer para não atrasar a renderização enquanto o navegador lê o documento HTML.
Não há muita magia aqui. Apenas alguns princípios básicos baseados em como os navegadores funcionam. Você também pode fazer isso!
Fonte
Dicas do newsletter de Go Make Things
Top comments (0)