Sugestão: Spaceless e PageSpeed

[luis-kaufmann-silva]

Parabéns pelo trabalho com o site. A primeira vista gostaria de dar duas sugestões afim de melhorar a velocidade, mesmo que minimamente (no caso do spaceless). Adicione spaceless em seu template base para comprimir o HTML da página e existem varias dicas interessantes aqui: PageSpeed.

[luishng]

Issue está sendo desenvolvida no fork realizado pela equipe da UnB. MES-1-2016#18

[luishng]

Bom, adicionei a tag do spaceless nos códigos HTML(deve ser colocado em todos os htmls mesmo ou somente no base.html?), porém em relação ao PageSpeed eu não consigo verificar se as alterações que eu realizei de fato estão fazendo efeito, pois o site PageSpeed apenas verifica sites em produção. Devido a isso devo realizar um pull request dessa mudança? Vocês tem alguma sugestão ao PageSpeed?

[luis-kaufmann-silva]

A principio, se todos os teus templates estendem de alguma forma ao base.html, basta colocar no base.html. Não sei ao certo quanto aos includes. Para ver o site sem enviar para um servidor de produção, você pode user o https://ngrok.com/.

[luishng]

Bom, fiz a otimização de algumas imagens do site e de alguns css e javascripts que não causavam perda na manutenibilidade dos arquivos. Porém verifiquei no PageSpeed novamente e há alguns tópicos que não posso realizar a melhoria. Citando:

• Gzip Compression
  É necessário a otimização no servidor, serve para compactar e descompactar arquivos associadas a url entre o navegador e servidor.
• Browser caching
  Como o "problema" acima, este também é otimização do servidor, serve para manter no cache do navegador alguns arquivos especificados pelo administrador, para quando a página for recarregada ocorrer de forma mais rápida.

E esses 3 tópicos de otimização de CSS e HTML:

• Eliminate render-blocking JavaScript and CSS in above-the-fold content
  Essa melhoria mudará a forma de chamar os arquivos JS e CSS nos htmls, porém atualmente todos esses arquivos tem a mesma forma de requerir o CSS e JS, não sei se realmente é a forma mais simples que encontraram para aplicar os estilos e efeitos no html e ter fácil entendimento para manutenção.
• Minify HTML e Minify CSS
  Minificando os HTML e CSS do site inteiro(deixando todos arquivos em 1 linha), será terrível para a manutenção do mesmos.

[luis-kaufmann-silva]

Gzip + Browser caching precisa ser no servidor (nGinx, apache, etc...). Quanto ao CSS e Javascript acima da borda, estou a procura de uma biblioteca que faça isso ou uma técnica, realmente é bem complexo. Quanto a minificar HTML e CSS, é minificar uma versão do CSS para produção.

Existem varias ferramentas que comprimem o CSS e Javascript(gulp é uma boa escolha), dependendo, até a IDE faz isso. Você cria o arquivo style.css e a ferramente comprime em um novo arquivo chamado style.min.css, por exemplo. Quanto a compressao de HTML, o spaceless do django cuida disso, ele entrega o html compactado mas mantem normal para programação.

[diraol]

Sobre a configuração de gzip, isso pode ser implantado via script chef
não? Pq a instalação do radar é automatizada, incluindo o webserver
(nginx?) se não me engano. Ai seria alterar os arquivos de configuração
utilizado na receita do chef.

Sobre compressão do CSS+JS, deve ter algo no django que consiga automatizar
isso não? Buscando rapidamente encontrei esse:
https://github.com/django-compressor/django-compressor

Sobre CSS+JS "render-blocking JavaScript and CSS in above-the-fold
content", algumas coisas que podem ajudar:
colocar tanto JS quanto CSS para serem carregados mais para o final do
"arquivo" (html). Depois de todo HTML já estar na página.
Organizar os javascripts para que o load de um JS não 'trave' o load dos
demais (que não são dependentes).

[leonardofl]

Bom, eu tô meio viajando =/
Mas os arquivos de configuração do nginx (e outros) estão aqui:
https://github.com/radar-parlamentar/implantacao/tree/master/cookbooks/radar/templates/default
Podem mandar pull request pra cá também.

2016-06-14 23:02 GMT-03:00 Diego Rabatone Oliveira <[email protected]

:

Sobre a configuração de gzip, isso pode ser implantado via script chef
não? Pq a instalação do radar é automatizada, incluindo o webserver
(nginx?) se não me engano. Ai seria alterar os arquivos de configuração
utilizado na receita do chef.

Sobre compressão do CSS+JS, deve ter algo no django que consiga automatizar
isso não? Buscando rapidamente encontrei esse:
https://github.com/django-compressor/django-compressor

Sobre CSS+JS "render-blocking JavaScript and CSS in above-the-fold
content", algumas coisas que podem ajudar:
colocar tanto JS quanto CSS para serem carregados mais para o final do
"arquivo" (html). Depois de todo HTML já estar na página.
Organizar os javascripts para que o load de um JS não 'trave' o load dos
demais (que não são dependentes).

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#262 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AAWJPeBi8-2cqEbefFYeINoD_yfyZxzuks5qL11RgaJpZM4Dy2VT
.

[luishng]

Leonardo, assim como ngrok para que eu possa verificar a página local no web com o PageSpeed, como funciona a alteração no repositório implantação? como posso testar e verificar da mesma forma?

[leonardofl]

Quando eu faço uma alteração no repositório de implantação, pra testar eu costumo rodar a receita Chef na Amazon. Mas dá pra rodar no Vagrant tb. Tem um readme lá explicando como roda as coisas.

[luishng]

Encontrei 2 possíveis soluções, porém não estou conseguindo testa-las.

Essa para o caching browser:

location ~* .(jpg|jpeg|png|gif|ico|css|js)$ {
expires 15d;
}

Essa para o gzip:

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

Disable for IE < 6 because there are some known problems

gzip_disable "MSIE [1-6].(?!.*SV1)";

Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6

gzip_vary on;

Esses são os comandos para colocar no arquivo nginx e melhorar o desempenho pelo o que pesquisei aqui. Se possível colocar para vermos e testar no PageSpeed. 👍

[leonardofl]

Blz, eu coloco lá pra gente testar.
É só colocar essas linhas aí na raiz do nginx.conf?

[luishng]

Pela pesquisada que fiz, é isso mesmo.

• O código de gzip, se coloca dentro de server{ }
• O de caching browser é um novo location{ }

Fiz um pull request lá também, quando tiver tempo 👍

[leonardofl]

Essas configurações são independentes do pull request #357?
Posso aplicá-las antes de aceitar o pull request?
Coloca as duas configurações de uma vez no nginx?
Ou vcs querem testar uma de cada vez?

[luishng]

Essas 2 configurações são independentes do pull request #357. Após a aplicação dessa configuração para observar se funcionou é necessário ir no PageSpeed para observar se essa solução foi eficaz e retirou os 2 requisitos que foram citados acima para correção (Gzip Compression e Browser caching). Assim melhorando o desempenho.

[leonardofl]

Alterei lá!
O "enable compression" e o "browser caching" continuam lá. Mas os resultados melhoraram. Agora não tem nenhum vermelho "Should Fix". Só laranjas ("Consider fixing"). A nota subiu de 53 para 83.
E aí, querem tentar mais alguma variação ou considera-se a issue encerrada?

[leonardofl]

Obs: aplicação das configurações:
radar-parlamentar/implantacao@6eef4a1

[leonardofl]

Opa pessoal, o @diraol disse q hj o Radar teve um problema no qual o CSS não carregava (pelo oq entendi). E ele resolveu o problema removendo do arquivo configuração do nginx as linhas que coloquei lá no commit radar-parlamentar/implantacao@6eef4a1.

Peço que confiram no commit se eu fiz a coisa certa.
Se sim, alguém teria alguma ideia do motivo do problema?
@diraol teria mais detalhes para nos fornecer sobre o problema?

Valeu!

[diraol]

@leonardofl e demais,

acabei por "desfazer" o último commit, e na mensagem do meu commit de "undo" tem um pouco da explicação do problema. Commit: d74f31cea8f0c1819780f8af4242cbe2d2ee1395

E o problema não foi só com CSS, mas sim com os arquivos estáticos. (javascript tbm, e talvez até imagens).

A mensagem de erro que aparece no log, para um dos arquivos, é:

2016/06/27 20:51:53 [error] 20845#0: *13 open() "/usr/share/nginx/html/static/files/codes/js/popup_win.js" failed (2: No such file or directory), client: 66.249.88.180, server: localhost, request: "GET /static/files/codes/js/popup_win.js HTTP/1.1", host: "radarparlamentar.polignu.org", referrer: "http://radarparlamentar.polignu.org/"

Além disso, quando a configuração do nginx estava com as linhas que eu comentei, no log, ao iniciar o servidor nginx, aparecia o seguinte erro:

2016/06/28 10:52:01 [warn] 8389#0: duplicate MIME type "text/html" in /etc/nginx/sites-enabled/radar_nginx.conf:47

[leonardofl]

Grato @diraol !