Otimize sua web 
page e Web 
components 
André Betiolo 
http://andrebetiolo.blogspot.com.br/
Quem sou eu 
Téc. em Montagem e Manutenção 
Bacharel em Sistemas de informação 
Esp. em Docência Universitária 
Trabalho 
...
https://www.eucatur.com.br/ 
Visualizações de página : 180.000/mês. 
Consultas: +50.000 diárias.
Agenda 
Otimização 
● Modularização 
● Compactação dos arquivos 
● Diminuição de requisições ao navegador 
● Cache 
● Trat...
Performance importa? 
http://www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-loading- 
sites.html?page...
Performance importa? 
https://github.com/zenorocha/browser-diet/wiki/Impact-of-performance
Performance importa?
Como os navegadores funcionam?
Concatenar e minificar arquivos 
● Concatene arquivos de mesma extensão 
● Minifique os arquivos 
Obs: Salvo páginas mais ...
Otimização 
● Tente utilizar o mínimo de TAGs possível 
● Diminua as requisições do navegador 
● Faça cache no site, tanto...
Boas práticas 
● Modularize sua página, separando front-end 
do back-end 
● Javacript no final da página, antes do 
fecham...
Tratamento de imagens 
● Faça sprite de imagens, pois diminui as 
requisições ao servidor(Pode mapear com 
classes do CSS)...
DEMO 
FLEXBOX
Web Componentes 
● Custom Elements 
● Template 
● Shadown DOM 
● Imports
x-poltrona 
https://github.com/andrebetiolo/x-poltrona
Custom Elements 
Cria TAG’s com os nomes que o criador quiser 
desde que tenha um “-” no nome e ele também 
pode ter atrib...
Custom Elements 
<day-software cidade=”Ji-Paraná”></day-software>
Custom Elements 
Pode estender de um elemento
Template 
TAG <template> que ser como um contêiner 
para conteúdo, o que estiver dentro do 
template é ignorado as requisi...
Shadow DOM 
Encapsulamento do seu HTML, todo o código 
digitado dentro do Shadow DOM não interfere 
no escopo exterior. 
E...
Imports 
Importar HTML externos a um arquivo HTML.
Obrigado ! 
Perguntas? 
andrebetiolo
Otimize sua web page e web components
Otimize sua web page e web components
Próximos SlideShares
Carregando em…5
×

Otimize sua web page e web components

568 visualizações

Publicada em

Slides da minha apresentação no evento Day Software no IFRO do campos de Ji-Paraná/RO

Publicada em: Tecnologia
1 comentário
1 gostou
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
568
No SlideShare
0
A partir de incorporações
0
Número de incorporações
388
Ações
Compartilhamentos
0
Downloads
6
Comentários
1
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Ajuda na diminuição dos pacotes gastos por 3G
  • HTTP 2.0
  • createShadowRoot
  • Otimize sua web page e web components

    1. 1. Otimize sua web page e Web components André Betiolo http://andrebetiolo.blogspot.com.br/
    2. 2. Quem sou eu Téc. em Montagem e Manutenção Bacharel em Sistemas de informação Esp. em Docência Universitária Trabalho Freelancer/Analista de sistemas na EUCATUR
    3. 3. https://www.eucatur.com.br/ Visualizações de página : 180.000/mês. Consultas: +50.000 diárias.
    4. 4. Agenda Otimização ● Modularização ● Compactação dos arquivos ● Diminuição de requisições ao navegador ● Cache ● Tratamento de imagens Web Components ● Custom Elements ● Template ● Shadown DOM ● Imports
    5. 5. Performance importa? http://www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-loading- sites.html?pagewanted=all&_r=1&
    6. 6. Performance importa? https://github.com/zenorocha/browser-diet/wiki/Impact-of-performance
    7. 7. Performance importa?
    8. 8. Como os navegadores funcionam?
    9. 9. Concatenar e minificar arquivos ● Concatene arquivos de mesma extensão ● Minifique os arquivos Obs: Salvo páginas mais simples ou com poucas páginas secundárias.
    10. 10. Otimização ● Tente utilizar o mínimo de TAGs possível ● Diminua as requisições do navegador ● Faça cache no site, tanto para requisições quanto para os arquivos ● Use GZIP ● Protocolo SPDY
    11. 11. Boas práticas ● Modularize sua página, separando front-end do back-end ● Javacript no final da página, antes do fechamento da TAG body ● Javacript async
    12. 12. Tratamento de imagens ● Faça sprite de imagens, pois diminui as requisições ao servidor(Pode mapear com classes do CSS) ● Minifique a imagem(JPEGmini) ● Troque imagens por SVG ou font-icon
    13. 13. DEMO FLEXBOX
    14. 14. Web Componentes ● Custom Elements ● Template ● Shadown DOM ● Imports
    15. 15. x-poltrona https://github.com/andrebetiolo/x-poltrona
    16. 16. Custom Elements Cria TAG’s com os nomes que o criador quiser desde que tenha um “-” no nome e ele também pode ter atributos que desejar.
    17. 17. Custom Elements <day-software cidade=”Ji-Paraná”></day-software>
    18. 18. Custom Elements Pode estender de um elemento
    19. 19. Template TAG <template> que ser como um contêiner para conteúdo, o que estiver dentro do template é ignorado as requisições e por padrão o é display: none.
    20. 20. Shadow DOM Encapsulamento do seu HTML, todo o código digitado dentro do Shadow DOM não interfere no escopo exterior. Ex: Video, audio, input password.
    21. 21. Imports Importar HTML externos a um arquivo HTML.
    22. 22. Obrigado ! Perguntas? andrebetiolo

    ×