1. Otimize sua webpage e WebcomponentsAndr Betiolohttp://andrebetiolo.blogspot.com.br/

2. Quem sou euTc. em Montagem e ManutenoBacharel em Sistemas de informaoEsp. em Docncia UniversitriaTrabalhoFreelancer/Analista de sistemas na EUCATUR 3. https://www.eucatur.com.br/Visualizaes de pgina : 180.000/ms.Consultas: +50.000 dirias. 4. AgendaOtimizao Modularizao Compactao dos arquivos Diminuio de requisies ao navegador Cache Tratamento de imagensWeb Components Custom Elements Template Shadown DOM Imports 5. Performance importa?http://www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-loading-sites.html?pagewanted=all&_r=1& 6. Performance importa?https://github.com/zenorocha/browser-diet/wiki/Impact-of-performance 7. Performance importa? 8. Como os navegadores funcionam? 9. Concatenar e minificar arquivos Concatene arquivos de mesma extenso Minifique os arquivosObs: Salvo pginas mais simples ou compoucas pginas secundrias. 10. Otimizao Tente utilizar o mnimo de TAGs possvel Diminua as requisies do navegador Faa cache no site, tanto para requisiesquanto para os arquivos Use GZIP Protocolo SPDY 11. Boas prticas Modularize sua pgina, separando front-enddo back-end Javacript no final da pgina, antes dofechamento da TAG body Javacript async 12. Tratamento de imagens Faa sprite de imagens, pois diminui asrequisies ao servidor(Pode mapear comclasses do CSS) Minifique a imagem(JPEGmini) Troque imagens por SVG ou font-icon 13. DEMOFLEXBOX 14. Web Componentes Custom Elements Template Shadown DOM Imports 15. x-poltronahttps://github.com/andrebetiolo/x-poltrona 16. Custom ElementsCria TAGs com os nomes que o criador quiserdesde que tenha um - no nome e ele tambmpode ter atributos que desejar. 17. Custom Elements 18. Custom ElementsPode estender de um elemento 19. TemplateTAG que ser como um continerpara contedo, o que estiver dentro dotemplate ignorado as requisies e porpadro o display: none. 20. Shadow DOMEncapsulamento do seu HTML, todo o cdigodigitado dentro do Shadow DOM no interfereno escopo exterior.Ex: Video, audio, input password. 21. ImportsImportar HTML externos a um arquivo HTML. 22. Obrigado !Perguntas?andrebetiolo