O documento discute como otimizar páginas da web e componentes web. Ele fornece dicas sobre modularização, compactação de arquivos, diminuição de requisições, cache e tratamento de imagens. Também aborda web components como custom elements, template, shadow DOM e imports.

1. Otimize sua web
page e Web
components
André Betiolo
http://andrebetiolo.blogspot.com.br/

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. https://www.eucatur.com.br/
Visualizações de página : 180.000/mês.
Consultas: +50.000 diárias.

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. 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 extensão
● Minifique os arquivos
Obs: Salvo páginas mais simples ou com
poucas páginas secundárias.

11. 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

12. 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

13. 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

14. DEMO
FLEXBOX

16. Web Componentes
● Custom Elements
● Template
● Shadown DOM
● Imports

17. x-poltrona
https://github.com/andrebetiolo/x-poltrona

18. 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.

19. Custom Elements
<day-software cidade=”Ji-Paraná”></day-software>

20. Custom Elements
Pode estender de um elemento

21. 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.

22. 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.

23. Imports
Importar HTML externos a um arquivo HTML.

24. Obrigado !
Perguntas?
andrebetiolo