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