Sugestão: Spaceless e PageSpeed

luis-kaufmann-silva commented 9 years ago

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 commented 8 years ago

Issue está sendo desenvolvida no fork realizado pela equipe da UnB. https://github.com/MES-1-2016/radar/issues/18

luishng commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 <notifications@github.com

:

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 https://github.com/radar-parlamentar/radar/issues/262#issuecomment-226068597, or mute the thread https://github.com/notifications/unsubscribe/AAWJPeBi8-2cqEbefFYeINoD_yfyZxzuks5qL11RgaJpZM4Dy2VT .

luishng commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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. :+1:

leonardofl commented 8 years ago

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

luishng commented 8 years ago

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 :+1:

leonardofl commented 8 years ago

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 commented 8 years ago

Essas 2 configurações são independentes do pull request https://github.com/radar-parlamentar/radar/pull/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 commented 8 years ago

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 commented 8 years ago

Obs: aplicação das configurações: https://github.com/radar-parlamentar/implantacao/commit/6eef4a1b6c744df064b2ec4abaf165627b866f7d

leonardofl commented 8 years ago

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 https://github.com/radar-parlamentar/implantacao/commit/6eef4a1b6c744df064b2ec4abaf165627b866f7d.

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 commented 8 years ago

@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 commented 8 years ago

Grato @diraol !

radar-parlamentar / radar

Sugestão: Spaceless e PageSpeed #262

Disable for IE < 6 because there are some known problems

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