Boas práticas para a página carregar mais rápido
Outra sugestão de título: "Como melhorar a performace da renderização das páginas do site"
Todo site deve ter uma boa performance para não prejudicar a experiência do usuário, por isso darei algumas dicas para a sua página carregar mais rápida. Durante todas as dicas, o foco principal será otimizar a folhas de estilo em cascata (CSS), o script (JavaScript) e diminuir ao máximo o número de requisições do navegador, e consequentemente, a renderização será rápida.
Uso de CSSs e scripts
Há três modos de usar JavaScript e CSS no site:
- Você pode definir o CSS através do atributo
style=""e JavaScript pelo atributoonClick=""em qualquer tag HTML; - Através da incorporação das tags HTML
<style>e<script>; - Usar folha de estilo externa com a tag
<link>ou o script pelo atributosrc=""na tag<script>
Os dois primeiros modos, apesar de reduzirem a quantidade de requisições ao carregar a página, aumenta o tamanho do documento. O CSS e JavaScript não são guardados no cache do navegador e também não é uma boa pratica para manutenção dos mesmos.
Entretanto, o terceiro modo, é recomendo quando os mesmos CSS e JavaScript são aplicados em várias páginas. Ao utilizar este método, você tem a vantagem de só precisar dá manutenção num único arquivo e será aplicado em todas as páginas, e também, é guardado no cache do navegador.
Renderização
Quanto a renderização, temos que ficar atentos para colocarmos os CSSs externos entre as tags <head> e </head> e os scripts no radapé. Quando um usuário abre uma página, o download da mesma ocorre do início para o final, então, se colocarmos o script para carregar logo no começo, o navegador irá requisitar todos esses scripts paralelamente antes de outras partes importantes, ou seja, os scripts atrasam a renderização da página. Mesmo a página sendo grande (demorada de carregar), quando se coloca os scripts no final do documento, para o usuário, há a impressão de que a página está carregando mais rápido.
No caso dos scripts, há o atributo async que avisa ao navegador para carregar de forma assíncrona, ou seja, ele adia o carregamento do script até que a página seja renderizada. Se você for usar em mais de uma importação com o atributo async, o navegador pode carregar em uma ordem não específica.
<head> <meta charset="UTF-8"> <title>WM online</title> <!-- CSS --> <link rel="stylesheet" href="style.css" media="all"> </head> <body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS --> <script src="script.js"></script> <script asyn src="script.js"></script> </body>
Compactando CSS e scripts
Quem desenvolve qualquer código desde o front-end até o back-end, tem que manter o código visualmente organizado com alinhamento e comentários para que outras pessoas entendam como funciona, e também, para você mesmo relembrar quando for dá manutenção. No entanto, quando o navegador carregar, o código não precisa está legível para nós, as pessoas, muitas das vezes, nem sabem que eles estão ali, o que elas querem é que a página funcione e seu carregamento seja o mais rápido possível. Por isso, compactar esses arquivos é a solução para diminuir o tamanho dos mesmos. Um exemplo ilustrativo, CSS de 600Kb depois de compactadas ficou com 350Kb.
Antes:
.center {
width: 960px;
margin: 0 auto;
}
/* --- Structure --- */
.intro {
margin: 100px;
position: relative;
}
Depois:
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
Manualmente, há diversos sites que tem ferramentas de compactar script e CSS, a dica que dou é você manter o seu script original com espaçamentos, aninhamento e comentários, e criar um novo arquivo contendo o código compactador, assim, na manutenção você edita o original, que é mais legível, recompacta, e atualiza o arquivo compactado.
Para quem usa pré-processadores de CCS como Sass, Less e Stylus, é possível configurar para que a copilação saia compactada. Já para quem usa Wordpress, por exemplo, há plugins que fazem essa compactação.
Unificação de CSS e scripts
Uma boa prática de organização é criar um arquivo para cada parte, pois na manutenção, fica simples identificar onde queremos fazer as alterações. No entanto, não é uma boa prática importar CSSs e scripts separadamente. O navegador não consegue lidar com muitas requisições paralelas, e também há um limite de requisições paralelas para um determinado domínio (dái os CDNs). O recomendado é você unificar estes arquivos, assim, haverá apenas uma requisição do gênero sendo feito pelo navegador e a página irá carregar mais rápido.
Obs.: na unificação lembre-se de manter a ordem de precedência tanto nas CSS quanto nos scripts.
Antes:
<!-- CSSs externos --> <link rel="stylesheet" href="style.css" media="all"> <link rel="stylesheet" href="slide.css" media="all"> <link rel="stylesheet" href="banners.css" media="all"> <!-- scripts externos--> <script src="jquery.slide.js"></script> <script src="bootstrap.js"></script> <script src="config.js"></script>
Depois
<!-- CSSs externos --> <link rel="stylesheet" href="main.css" media="all"> <!-- scripts externos--> <script src="main.js"></script>
Ao usar CSS externo prefira <link> ao invés de @import
O comando @import serve para importar uma CSS dentro de outra, porém com esse comando, o navegador é incapaz de fazer o download paralelo e atrasa na cascata o carregamento dos arquivos. Use a tag <link> para importar, ou use a boa prática citada anteriormente e coloque tudo em uma única folha de estilo sem @import ou mais uma tag <link>.
Use CSS Sprites
Suponhamos que você queira inserir emotions nos comentários, se você colocar cada imagem separada, o navegador tem que fazer uma requisição para cada uma delas, e isso acaba atrasando a renderização da página. Por este motivo a técnica de usar CSS Sprites é importante.
<!-- jeito não recomendado --> <p>Lorem ipsum dolor sit amet. <img src="/emotions/feliz.png"></p> <p><img src="/emotions/confuso.png"> Lorem ipsum dolor sit amet.</p>
<!-- jeito recomendado -->
<p>Lorem ipsum dolor sit amet. <span class="emotion feliz"></span> </p>
<p><span class="emotion confuso"></span> Lorem ipsum dolor sit amet.</p>
<style>
.emotion {
background: url('/emotions/sprite.png') no-repeat;
}
.emotion.feliz {
background-position: 0 -416px;
}
.emotion.confuso {
background-position: 0 -557px;
}
</style>
Assim diminuímos a quantidade de requisições e alguns Kb de tráfego, que a depender da quantidade de visitas que você recebe por dia, pode fazer toda a diferença em gastar menos largura de banda.
Existem ferramentas online que serve para criar CSS Sprites:
- O SpritePad é uma excelente ferramenta, você seleciona as imagens para criar o sprite e gera o CSS, você não tem trabalho para criar o código.
- O Sprite Cow é muito boa também, porem seu uso é ideal para quem já tem uma imagem sprite e precisa apenas do CSS.
Otimize suas imagens
Os arquivos das imagens pode conter cores não visíveis por nós humanos e metadados desnecessário como data da foto, modelo da câmera, local etc. Para a renderização da página nada disso é importante, e, consequentemente, o tamanho do arquivo da imagem fica maior, a página fica mais pesado para carregar e você gasta a banda da sua hospedagem atoa, assim como o espaço de disco.
Há diversas ferramentas que pode compactar imagens sem perder qualidade, tanto no próprio computador, ou online. Um dos melhores serviços é Tiny PNG, você pode compactar várias imagens .png através da interface web e também pode usar o API.
Outra prática recomendado é usar carregamento de imagens progressivo, para quem não sabe o que é, garanto que já deve ter visto no Google Imagens quando for visualizar a imagem, progressivamente a imagem é carregada.
Analize o desempenho do seu site
O Google Analytics tem ferramentas que avalia e pontua as páginas do seu site, aí uma ótima oportunidade de acompanhar e otimiza-las. O Google valoriza páginas que carregam rapidamente.
Há diversas ferramentas online (sites) que você pode avaliar o desempenho do site e apontar onde você deve otimizar, veja alguns: PageSpeed Insights, Web Page Test e Pingdom.