Resumo da Velocity Conf NY 2014

Guilherme Garnier

15 a 17 de setembro/2014

1 dia de tutoriais

2 dias de palestras

muitos temas repetidos

poucas palestras se aprofundaram em algum tema

Principais temas

como melhorar a percepção do usuário
scripts de terceiros não bloqueantes
Responsive Server-Side
imagens responsivas
monitoração e ferramentas
postmortems
ads are evil

como melhorar a percepção do usuário

Otimizar o "Above the Fold"

feedback imediato em 100 ms
após 1 s, o usuário perde o foco

Fonte: Jakob Nielsen

crie ilusões para dar a impressão que o site carrega mais rápido

exemplos

conteúdo ATF: carregar o mais rápido possível
conteúdo "Below The Fold" pode ser lazy
usar placeholders
web fonts: após carregar, armazenar no local storage
exibir inicialmente dados cacheados, depois atualizar
colocar inline o CSS do conteúdo ATF

scripts de terceiros não bloqueantes

scripts de terceiros mais usados

ads
tracking (Google Analytics)
fontes
botões de share
bibliotecas e frameworks

[2014] 38% dos scripts são de terceiros

principais problemas

performance
Single Point of Failure (SPOF)

performance

JS bloqueia o parsing da página
Yahoo Mail desabilitou ads por 3 dias ==> load time diminuiu 73%

Single Point of Failure (SPOF)

Script de terceiros podem bloquear sua página
[2013] Facebook fora do ar [1]
[2014] certificado HTTPS da CDN do jQuery expirado [2]

[1] http://gizmodo.com/5982677/a-facebook-bug-pretty-much-took-down-the-entire-internet

[2] https://twitter.com/igrigorik/status/494973903421194240

soluções

Monitoração
- SPOF-O-Matic: https://github.com/pmeenan/spof-o-matic
- Webpagetest (Advanced Settings -> simulate SPOF)
- JS Manners: http://jsmanners.com/
Tag script no fim do body
- Não resolve o problema de SPOF, mas diminui o tempo de espera

soluções

Carregamento assíncrono

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) { return; }
  js = d.createElement(s); js.id = id;
  js.src = "//cdn.example.com/script.js";
  fjs.parentNode.insertBefore(js, fjs);
})(document, 'script', 'vf-js');

ou, nos browsers mais modernos:

<script async defer src="//cdn.example.com/script.js" />

Hosted libraries

Ex: jQuery da CDN do Google

  var sNew = document.createElement("script");
  sNew.async = true;
  sNew.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js";
  var s0 = document.getElementsByTagName('script')[0];
  s0.parentNode.insertBefore(sNew, s0);

  window.jQuery ||
    document.write('<script src="/path/to/your/jquery" />');

Responsive Server-Side

Responsive com media queries

estilos customizados por tamanho de tela
arquivo CSS fica cada vez maior

.thumb {
  width: 180px;
  height: 108px;
}

@media (max-width: 978px) and (min-width: 711px) {
  .thumb {
    width: 134px;
    height: 80px;
  }
}

@media (max-width: 710px) {
  .thumb {
    width: 140px;
    height: 84px;
  }
}

Responsive com media queries

mobile: principal gargalo = banda
reduzir o tráfego é essencial
use ferramentas para simular conexões lentas

Ferramentas

Proxies (Charles, Net Limiter, SlowyApp, Clumsy, Network Link Conditioner)
APIs HTML5
Remote inspector (Chrome, Safari)
Chrome mobile simulator

Soluções

Detecção de devices
- HTML/CSS/JS específicos por device
- imagens em tamanhos adequados
- possíveis problemas de colisão de cache
Detecção de features por Javascript
- carregar recursos de acordo com as features suportadas

Imagens responsivas

como entregar imagens adequadas para cada resolução de tela?

uma única imagem: desperdício de banda quando a tela é menor
imagens com diferentes resoluções: como gerenciar?

Propostas

tag picture: muitas discussões, pouco consenso, sem suporte dos browsers antigos
soluções via JS:
- imager.js: https://github.com/BBC-News/Imager.js/
- lazy loading: https://luis-almeida.github.io/unveil/
Responsive Server-Side
- permite entregar imagens com resolução e formatos específicos (ex: webp)

Monitoração e ferramentas

Ferramentas disponíveis online

WebPagetest: http://www.webpagetest.org/
Pagespeed insights: https://developers.google.com/speed/pagespeed/insights/
Akamai Mobitest: http://mobitest.akamai.com/
Show Slow: http://www.showslow.com/

Ferramentas para medir a performance do ponto de vista do usuário

Boomerang: https://github.com/lognormal/boomerang
HTML5 APIs
- Navigation Timing
- Resource Timing
- User Timing

Navigation Timing API

https://developer.mozilla.org/en-US/docs/Navigation_timing

Navigation Timing API

window.performance.timing;
{
  connectEnd: 1412379511942,
  connectStart: 1412379511010,
  domComplete: 1412379514540,
  domContentLoadedEventEnd: 1412379514254,
  domContentLoadedEventStart: 1412379514243,
  ...
}

Tempo total para carregar a página:

var perfData = window.performance.timing;
perfData.loadEventEnd - perfData.navigationStart;

Tempo de resposta de um request:

var perfData = window.performance.timing;
perfData.responseEnd - perfData.requestStart;

Resource Timing API

http://www.w3.org/TR/resource-timing/

http://www.sitepoint.com/introduction-resource-timing-api/

Resource Timing API

window.performance.getEntriesByType('resource');
[{
    entryType: "resource",
    initiatorType: "script",
    name: "http://www.google-analytics.com/analytics.js",
    duration: 16.396000050008297,
    startTime: 1242.3169999965467,
    redirectStart: 0,
    redirectEnd: 0,
    fetchStart: 1242.3169999965467,
    connectStart: 0,
    connectEnd: 0,
    responseStart: 0,
    responseEnd: 1258.713000046555,
    ...
  }, ...
]

User Timing API

http://www.sitepoint.com/discovering-user-timing-api/ http://www.w3.org/TR/user-timing/

Instrumentação de operações sob demanda

// Marca o início de uma operação
window.performance.mark("startOperation");

doSomethingSlow();

// Marca o fim da operação
window.performance.mark("endOperation");

// Calcula as medições
window.performance.measure("slowOperation", "startOperation", "endOperation");

User Timing API

window.performance.getEntriesByName("slowOperation");
// ou window.performance.getEntriesByType("measure");
[{
  duration: 7444.391000026371,
  entryType: "measure",
  name: "slowOperation",
  startTime: 191147.77599996887
}, ...]

// Remove todas as marcações
window.performance.clearMarks();

// Remove a medição "slowOperation"
window.performance.clearMeasure("slowOperation");

postmortems

Postmortems

aprendendo com os próprios erros
coletar dados (frequencia, severidade, duração)
documentar problemas e soluções aplicadas
compartilhar com toda a empresa

http://codeascraft.com/2012/05/22/blameless-postmortems/

ads are evil

Problemas com ads

código não otimizado
ignoram boas práticas
usam document.write
bloqueiam o carregamento da página

Quem passa por esse problema?

Soluções

carregar o código num iframe

Links

http://velocityconf.com/velocityny2014

https://www.youtube.com/playlist?list=PL055Epbe6d5YDU6sikjqcd_YM9XT4OehD

resumo-velocityconf-ny-2014

ggarnier

resumo-velocityconf-ny-2014

0 1 (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

resumo-velocityconf-ny-2014

Resumo da Velocity Conf NY 2014

Guilherme Garnier

15 a 17 de setembro/2014

Principais temas

como melhorar a percepção do usuário

Otimizar o "Above the Fold"

crie ilusões para dar a impressão que o site carrega mais rápido

exemplos

scripts de terceiros não bloqueantes

scripts de terceiros mais usados

[2014] 38% dos scripts são de terceiros

principais problemas

performance

Single Point of Failure (SPOF)

soluções

soluções

Hosted libraries

Responsive Server-Side

Responsive com media queries

Responsive com media queries

Ferramentas

Soluções

Imagens responsivas

como entregar imagens adequadas para cada resolução de tela?

Propostas

Monitoração e ferramentas

Ferramentas disponíveis online

Ferramentas para medir a performance do ponto de vista do usuário

Navigation Timing API

Navigation Timing API

Resource Timing API

Resource Timing API

User Timing API

User Timing API

postmortems

Postmortems

ads are evil

Problemas com ads

Quem passa por esse problema?

Soluções

Links

0 1