zenorocha / browser-diet Goto Github PK

Erro de português:
"Já o bom e velho for nos trás uma melhor forma ..."
É "traz", de "trazer".
Trás é de "atrás"

The site looks fantastic--both design and content. Nice work!

If I were a total web performance newb, I might be overwhelmed by those 25 suggestions--which is most important? How do I measure improvements? Is there a performance golden rule (hint, hint)?

As pointed by @jonathantneal:

"Tip 21 is a lie".

I started researching more about it and I found some opinions:

Max Howell:

"In modern browsers the performance impact is negligible, provided you don’t apply slow-effects to every element (eg. box-shadow, z-axis rotation). The myth that the universal-selector is slow is a hangover from ten years ago when it was slow." - Stack Overflow

Also this KendoUI article says that Star Selector Not That Bad.

So what do you guys think about it? Should we remove this tip?

/cc @davidsonfellipe @marcelduran @miketaylr @jaydson @sergiolopes @keppelen @mangini

E ai pessoal,

Hoje o @keppelen me questionou o porquê de estar carregando as imagens via lazy load ao invés de um grande sprite com todas.

Minha decisão se baseou no fato de termos muitas imagens e um scroll muito grande. Muitas pessoas não chegarão até o fim, por isso não tem porque carregarmos todas de uma vez.

Estou certo @marcelduran @miketaylr @jaydson @sergiolopes @davidsonfellipe? Sugerem outra coisa?

Just got back from Noruega 😫 and have about 90% of the current content translated. Will finish it soon, then give it a once over and push to master.

Faltou um botão pra tuittar.

Reported by @sethladd:

It doesn't share well because it's missing a schema.org image in the . G+ loves it some images.

See source for dartlang.org for example.

Hope that helps!

Pessoal, notei que esta feio a forma que as redes sociais esta compartilhando este ótimo conteúdo.. Exemplo no Facebook :]

Just like this, but with Vanilla JavaScript.

Hoje temos a seguinte estrutura:

<article id="coloque-css-no-head">
    ...conteúdo...
</article>

O problema é que precisamos também separar esses articles por sections que descrevam a qual categoria aquela dica pertence, exemplo:

<section id="css">    
    <article id="coloque-css-no-head">
        ...conteúdo...
    </article>
    <article id="minifique-seu-css">
        ...conteúdo...
    </article>
</section>
<section id="html">
    ...e por aí vai... 

Acabei de adicionar um novo atributo nos arquivos de conteúdo.
É o category e nele eu especifico a qual linguagem ele pertence: html, css, js, etc...

Dei uma olhada no Jinja e achei que o ifchanged pudesse ajudar:

{% extends "base.html" %}
{% block main %}
{% for page in pages %}
    {% ifchanged %}<section id="{{ page.category }}">{% endifchanged %}
        <article id="{{ page.slug }}">
            {{ page }}
        </article>
    {% ifchanged %}</section>{% endifchanged %}
{% endfor %}
{% endblock main %}

Mas não obtive sucesso =/

Alguma ideia?

A fonte dos subtítulos estão com uma leitura ruim em algumas palavras. Acredito que isso pode ser um problema, ou estressante na hora de ler.

senti falta de um tópico falando de pagespeed, yslow, webpagetest e cia.
algo simples pra começar, só citando a existencia e recomendando o uso pra testes de performance...

Currently a lot of techniques are described that are all beneficial, but almost unattainable if people want to implement all of the good advice. The work involved in setting up a complete automation workflow based on the recommended tools is simply too great and much to error prone.

Most of the suggestions pertaining to code transformations like minification, bundling, cache renaming, image optimization can be solved by already preexisting tools like grunt, asset pipeline, assetgraph, roots or similar.

I suggest you add a section on automation of these suggestions to save newcomers to front end optimization a lot of headaches and make it easier to see that these goals are all attainable.

People are complaining about that yellow background. Does anybody have a better idea to improve that and mantain that funny look?

Sergio, acho que depois da sua alteração no CSS rolou um probleminha na versão em inglês:

Resolvi remover essa dica @davidsonfellipe: https://github.com/zenorocha/como-perder-peso/commit/59f09183c4410d8af3320696dba2be456929ef4e

Eu sei que ler o código jQuery é extremamente importante, mas ela não é uma dica estritamente relacionada a performance.

ta como regra evitar sempre inline: https://github.com/zenorocha/como-perder-peso/blob/master/src/documents/html/pt/external.html.md

mas eu acho que podemos ser mais flexiveis. o inline é um jeito bem poderoso de economizar requests, principalmente se o asset for pequeno (o pagespeed recomenda inline de coisas com menos de 3kb, se nao me engano).

tem o problema do cache mas é menos grave (vc pode fazer o cache do html, ou mesmo usar localStorage pra cachear o asset inlineado e nao baixar de novo).

que acham? edita a regra la?

@keppelen, procurei saber se o impacto dos seletores de CSS3 é grande, mas não achei nada, inclusive no REFERENCES também não tinha de onde você tirou esse argumento.

No fim encontrei um post do Steve Souders que fala sobre o impacto disso e no fim ele solta:

Based on these tests I have the following hypothesis: For most web sites, the possible performance gains from optimizing CSS selectors will be small, and are not worth the costs.

http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

Por isso removi a dica, se estiver tudo bem pra você pode fechar a issue.

pra mim, as duas praticas mais importantes de todas que verifico antes de fazer qualquer outra sao: gzip e cache. acho que precisamos falar delas na pagina.

problema é que são regras do server-side, e isso assusta muita gente. e nao conseguimos dar muitos exemplos ja que cada servidor é de um jeito.

mas acho que podia ter uma secao de server-side com exemplos bem basicos dessas regras e links pra configuracoes em servers especificos.

Adicionei a solução para o problema do cara usar o link para última versão do jQuery na CDN: https://github.com/zenorocha/como-perder-peso/commit/f6d6888b7a9a96d85b02ef6c2038e556d10e98bd

Tudo bem @davidsonfellipe?

https://developers.google.com/speed/docs/mod_pagespeed/filter-lazyload-images

hoje tem duas regras de imagens la: colocar width e height, usar sprites.

acho que faltariam mais duas importantes: otimizacoes lossless de imagens, e otimizacoes lossy mais agressivas.

acho que daria pra separar essas regras numa seçao nova "Imagens".

Excelente trabalho nessa dica @davidsonfellipe.

Adicionei o trecho de código errado para depois mostrar o que seria o certo: https://github.com/zenorocha/como-perder-peso/commit/1c88f9b8b28139dcebf20731a27df82b07234d7b

Uma dúvida que eu tenho, seria melhor chamarmos de "a DOM" ou "o DOM"? Por que?

On the jQuery section, the "new is always better" link is broken (404).

Adicionei essa dica @davidsonfellipe: https://github.com/zenorocha/como-perder-peso/commit/250fe2cd1e1b1d77f4af7b45e5a9cafaa193fe1b

O que acha?

Referências em: https://github.com/zenorocha/como-perder-peso/wiki/References

https://gist.github.com/3898915

Prover nosso próprio estilo

http://softwaremaniacs.org/media/soft/highlight/test.html

This same piece of code is repeated 7 times through the source code, how can we improve that? Any ideas @balupton?

<h2 id="js" class="topics"><span>JavaScript</span></h2>

<% for item in @getCollection("documents").findAll({ url: $startsWith: '/server/' + @currentLang}, [order:1]).toJSON(): %>
  <div class="article" id="<%= item.basename %>">
    <h1 id="<%= item.basename %>">
      <a class="tip-title" href="#<%= item.basename %>"><%= item.title %></a>
      <a title="Link" class="anchor" href="#<%= item.basename %>">∞</a>
    </h1>
    <% if item.order: %>
    <div class="line">
      <span class="order"><%= item.order %></span>
      <a title="<%= @getLang().edit %>" class="edit" href="https://github.com/zenorocha/como-perder-peso/blob/master/src/documents/<%= item.relativePath %>">✎</a>
    </div>
    <% end %>
    <%- item.contentRenderedWithoutLayouts %>
  </div>
<% end %>

https://github.com/zenorocha/como-perder-peso/blob/master/src/layouts/default.html.eco#L51