Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Para ontem: carregando sites mais rapidamente

265 views

Published on

Algumas recomendações pontuais sobre como fazer sites carregarem mais rapidamente, voltando para o público de desenvolvedores frontend. As técnicas selecionadas são as mesmas eleitas pelo site WebPageTest.org, permitindo um ciclo de ajustes e mensuração dos resultados de performance.

Published in: Technology
  • Be the first to comment

Para ontem: carregando sites mais rapidamente

  1. 1. Para ontem: carregando sites mais rapidamente por Thiago Ayub twitter.com/ayubio
  2. 2. Por quê? Para que tanta pressa?
  3. 3. Fonte: https://content.akamai.com/PG1526-PerformanceMatters.html
  4. 4. Fonte: https://content.akamai.com/PG1526-PerformanceMatters.html
  5. 5. Fonte: Aberdeen.com
  6. 6. O tempo de carregamento das páginas de seu site impacta diretamente no faturamento de sua empresa $
  7. 7. Precisamos para ontem fazer nosso site carregar mais rapidamente
  8. 8. http://WebPageTest.org
  9. 9. Principais critérios para pontuação ● Time to First Byte (TTFB) ● Keep-alive enabled ● Compress transfers ● Compress images ● Cache static content ● Effective use of CDN
  10. 10. Como melhorar cada um? ● Time to First Byte (TTFB) ● Keep-alive enabled ● Compress transfers ● Compress images ● Cache static content ● Effective use of CDN 1. Utilizar uma CDN brasileira. 2. Utilizar cache no servidor da renderização das páginas. 3. Utilizar servidores de DNS autoritativos brasileiros. 4. Aumentar o TTL das entradas DNS.
  11. 11. Como melhorar cada um? ● Time to First Byte (TTFB) ● Keep-alive enabled ● Compress transfers ● Compress images ● Cache static content ● Effective use of CDN 1. Ative esta configuração em seu Apache, nginx etc. 2. Importe para seu servidor web elementos de terceiros.
  12. 12. Como melhorar cada um? ● Time to First Byte (TTFB) ● Keep-alive enabled ● Compress transfers ● Compress images ● Cache static content ● Effective use of CDN 1. Ative esta configuração em seu Apache, nginx etc. (gzip) 2. Sirva conteúdos já comprimidos: /index.html.gz, /results.json.gz, /button.svg.gz “Compressão com pressão”
  13. 13. Como melhorar cada um? ● Time to First Byte (TTFB) ● Keep-alive enabled ● Compress transfers ● Compress images ● Cache static content ● Effective use of CDN
  14. 14. Resultados do “Content Breakdown” de www.r7.com
  15. 15. Como melhorar as imagens? ● JPEG Progressive ● PNG para layout ● SVG para layout ● Adoção de WebP
  16. 16. Como melhorar as imagens? ● JPEG Progressive ● PNG para layout ● SVG para layout ● Adoção de WebP Fonte dos exemplos: https://blog.codinghorror.com/progressive-image-rendering/ Baseline Progressive
  17. 17. Como melhorar as imagens? ● JPEG Progressive ● PNG para layout ● SVG para layout ● Adoção de WebP jpegtran -copy none -optimize original.jpg otimizada1.jpg jpegtran -copy none -progressive otimizada1.jpg otimizada-final.jpg
  18. 18. Como melhorar as imagens? ● JPEG Progressive ● PNG para layout ● SVG para layout ● Adoção de WebP 1. Não utilize JPG para elementos de layout. Prefira PNG e SVG. 2. Utilize o pngcrush em todos os seus PNGs. 3. Utilize o SVGO para arquivos SVG.
  19. 19. 283 kB no PNG original
  20. 20. 283 kB no PNG original 173 kB (-39%) após pngcrush -brute -reduce
  21. 21. Como melhorar as imagens? ● JPEG Progressive ● PNG para layout ● SVG para layout ● Adoção de WebP 1. Converter todas as imagens JPG e PNG para também WebP. 2. Servir WebP se o browser suportar. 3. Não é difícil conseguir imagens 80% menores em bytes com WebP.
  22. 22. canIuse.com Recomendado: https://www.keycdn.com/blog/convert-to-webp-the-successor-of-jpeg/
  23. 23. Como melhorar cada um? ● Time to First Byte (TTFB) ● Keep-alive enabled ● Compress transfers ● Compress images ● Cache static content ● Effective use of CDN
  24. 24. Cabeçalhos HTTP para gestão de cache ● Expires: define uma data futura e exata para expirar o conteúdo. ● Cache-Control: define um tempo em segundos para expirar o conteúdo. ● ETag: um fingerprint de validação da versão do conteúdo. ● Last-Modified: declara a data e hora da versão servida. A presença do ETag e Last-Modified modificam muito o ciclo de comunicação entre o servidor HTTP e o browser.
  25. 25. HTTP 200 HTTP 304 !=
  26. 26. Para conteúdos que mudam muito Sirva os cabeçalhos: ● Cache-Control ● ETag ● Expires ● Last-Modified Para conteúdos que mudam pouco Sirva os cabeçalhos: ● Cache-Control ● ETag ● Expires ● Last-Modified
  27. 27. Cache-Control: max-age=3600 ● O browser armazenará em cache esse objeto por 1h. ● Recomendo o valor de 7776000 (90 dias). ● Mudou o conteúdo? Mude a URI!
  28. 28. Como melhorar cada um? ● Time to First Byte (TTFB) ● Keep-alive enabled ● Compress transfers ● Compress images ● Cache static content ● Effective use of CDN ● Contrate e implemente uma CDN com forte presença no Brasil para servir JS, CSS, imagens e qualquer outro binário. ● Após se acostumar com uma CDN, entregue também seu HTML. ● Utilize o maior valor de Cache-Control possível em todos os objetos.
  29. 29. Como melhorar cada um? ● Time to First Byte (TTFB) ● Keep-alive enabled ● Compress transfers ● Compress images ● Cache static content ● Effective use of CDN Melhorando todos estes itens, teremos um site que carrega imediatamente, explodindo na tela, reduzindo o consumo de servidores e aumentando o faturamento e a popularidade de seu negócio.
  30. 30. Obrigado! Twitter: @ayubio YouTube: “Eu faço a internet funcionar”

×