10 dicas rápidas para o front-end do seu site

10 DICAS RÁPIDAS PARA O
FRONT-END DO SEU SITE

ITALO MORAES
SANTIAGO
@itumoraes
github.com/itumoraes
Desenvolvedor front-end

1. MINIFIQUE OS ASSETS
CONCATENAÇÃO DE ARQUIVOS PARA
REMOÇÃO DE ESPAÇOS EXTRAS, RECUOS,
QUEBRA DE LINHA E ETC.

1. MINIFIQUE OS ASSETS
1,214mb 334,53kb
262.98%Economizados

2. EVITE CSS !IMPORTANT
➡ SELETORES
➡ ORDEM DOS ARQUIVOS
➡ !IMPORTANT
➡ INLINE CSS

3. NÃO CARREGUE
TUDO NO <HEAD>

3. NÃO CARREGUE TUDO NO <HEAD>
<!DOCTYPE html>
<html>
<head>
<title>19° Encontro Locaweb</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="/locastyle/3.10.0/javascripts/locastyle.js"></script>
<link rel="stylesheet" href="/locastyle/3.10.0/stylesheets/locastyle.css" />
</head>
<body>
<p>10 dicas rápidas para o front-end do seu site</p>
</body>
</html>

3. NÃO CARREGUE TUDO NO <HEAD>
<!DOCTYPE html>
<html>
<head>
<title>19° Encontro Locaweb</title>
<link rel="stylesheet" href="/locastyle/3.10.0/stylesheets/locastyle.css" />
</head>
<body>
<p>10 dicas rápidas para o front-end do seu site</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="/locastyle/3.10.0/javascripts/locastyle.js"></script>
</body>
</html>

4. NÃO SIGA O HYPE,
SIMPLIFIQUE!

4. NÃO SIGA O HYPE, SIMPLIFIQUE!

5. USE AS TAGS DO HTML5
PORQUE NÃO UTILIZAR
<DIV> EM TODO O
CÓDIGO?

5. USE AS TAGS DO HTML5
http://juangarciar.bligoo.com/html5-y-su-nueva-semantica

6. MANTENHA SUAS
DEPENDÊNCIAS
ATUALIZADAS

6. MANTENHA SUAS DEPENDÊNCIAS ATUALIZADAS

7. DEIXE DE
ACHISMO, COLHA
MÉTRICAS

7. DEIXE DE ACHISMO, COLHA MÉTRICAS
‣ https://developers.google.com/speed/pagespeed/

‣ https://www.google.com/analytics/

‣ https://github.com/netshoes/lind

8. OTIMIZE SUAS IMAGENS
GIF | PNG | JPEG

LOSSLESS COMPRESSION
‣ https://optimus.keycdn.com/support/lossy-vs-lossless/

LOSSY COMPRESSION

WEBP LOSSLESS COMPRESSION

9. QUANTO MAIS SVG, MELHOR
‣ http://jsﬁddle.net/danielﬁlho/GdCcA/

10. USE TODO O PODER DO CSS
‣ https://css-tricks.com/glitch-effect-text-images-svg/

<div class="glitch" data-text="GLITCH">GLITCH</div>

.glitch {
position: relative;
}
.glitch::before,
.glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.glitch::before {
left: 2px;
text-shadow: -1px 0 red;
background: black;
}
.glitch::after {
left: -2px;
text-shadow: -1px 0 blue;
background: black;
}

@keyframes glitch-anim {
0% {
clip: rect(70px, 450px, 76px, 0);
}
20% {
}
40% {
}
60% {
}
80% {
}
100% {
}
}

.glitch::before {
left: 2px;
text-shadow: -1px 0 red;
background: black;
animation: glitch-anim 2s infinite linear alternate-reverse;
}
.glitch::after {
left: -2px;
text-shadow: -1px 0 blue;
background: black;
animation: glitch-anim 2s infinite linear alternate-reverse;
}

11. A EXPERIÊNCIA
DO USUÁRIO IMPORTA

11. A EXPERIÊNCIA DO USUÁRIO IMPORTA
Experiência do usuário é a
maneira que você experimenta
o mundo, é a maneira que
você experimenta a sua vida, é
a maneira que você
experimenta um serviço ou
quem sabe um aplicativo ou
um sistema de computador,
mas é um sistema que é tudo
(NORMAN, 2016).

REFERÊNCIAS
1. https://optimus.keycdn.com/support/lossy-vs-lossless/
2. http://www.juicecomunicacao.com/por-que-eu-devo-minificar-os-arquivos-css-
e-js-do-meu-site/
3. https://tableless.com.br/grunt-voce-deveria-estar-usando/
4. https://css-tricks.com/glitch-effect-text-images-svg/
5. http://juangarciar.bligoo.com/html5-y-su-nueva-semantica
6. http://jsfiddle.net/danielfilho/GdCcA/
7. https://developers.google.com/speed/webp/

https://twitter.com/itumoraes
https://github.com/itumoraes
https://linkedin.com/in/italomoraes
OBRIGADO!

10 dicas rápidas para o front-end do seu site

Recommended

Recommended

More Related Content

Similar to 10 dicas rápidas para o front-end do seu site

Similar to 10 dicas rápidas para o front-end do seu site (20)

Recently uploaded

Recently uploaded (20)

10 dicas rápidas para o front-end do seu site