Neste artigo você encontrará:
Otimizar o front-end é mais do que tornar o carregamento da página mais rápido, é organizar a estrutura para facilitar os processos de desenvolvimento e manutenção sem perder qualidade e afetar negativamente a experiência do usuário.
Por que otimizar o front-end?
Otimizar o front-end dos sites permite melhorar o carregamento da página, proporcionando uma UX de qualidade. Além disso, também contribui para a melhoria no ranqueamento do site nos mecanismos de busca.
Do ponto de vista técnico, a otimização do front-end ajuda no processo de desenvolvimento e manutenção, dando mais agilidade aos trabalhos e permitindo aos desenvolvedores front-end realizarem ajustes em partes específicas da estrutura sem afetar todo o site.
Baixe o guia completo sobre
Front-End
Como otimizar o front-end com PHP
O PHP, mesmo sendo uma linguagem de servidor, ou seja, back-end, pode ser integrado no front-end para ajudar na otimização da página. E nesse caso não é só na questão de velocidade de carregamento, mas de desenvolvimento.
Imagine um site com mais de 50 páginas, onde é preciso atualizar os itens do menu mensalmente e esse site não utiliza nenhum CMS, com cada página construída individualmente. Seria necessário repetir o processo 50 vezes para atualizar todas as páginas.
Com o PHP é possível atualizar apenas um arquivo, basta criar o menu em um arquivo separado e inserir a chamada dele em cada uma das páginas. Como por exemplo:
Arquivo do menu
<ul>
<li><a href=”home.html”>Home</a></li>
<li><a href=”noticias.html”>Notícias</a></li>
<li><a href=”cases.html”>Cases</a></li>
</ul>
Código de inclusão dos demais arquivos
<?php
$menu = require(‘menu.php’);
echo $menu;
?>
Se precisar exibir uma lista de informações que mudam com certa frequência em páginas que não fazem uso de banco de dados, o PHP também pode ajudar. Basta combinar o uso com arquivos XML ou JSON.
Imagine que você tem vários formulários no site onde precisa exibir listas de setores. Para isso, você pode usar um arquivo JSON e fazer a leitura dele com o PHP, exibindo os registros no formulário. E sempre que precisar atualizar a lista, basta abrir o arquivo JSON e atualizá-lo.
Arquivo com a listagem em formato JSON
[
{
“email”: “administracao@sitephp.com”,
“nome”: “Adminsitração”
},
{
“email”: “contabilidade@sitephp.com”,
“nome”: “Contabilidade”,
},
{
“email”: “informatica@sitephp.com”,
“nome”: “Informática”,
},
{
“email”: “rh@sitephp.com”,
“nome”: “Recursos Humanos”,
}
]
Código para leitura do arquivo JSON
<?php
$jsonSetores = file_get_contents(‘setores.json’);
$setores = json_decode($jsonSetores);
echo “<select name=’setores’>”;
foreach($setores as $setor):
echo “<option value=’$setor->email’>$setor->nome</option>”;
endforeach;
echo “</select>”
?>
Outras formas de otimizar o front-end
Existem formas específicas de otimização de front-end que não envolvem linguagem back-end e que são benéficas tanto para os programadores front-end envolvidos no projeto quanto para o público:
Formato das imagens
As imagens costumam ser as maiores causadoras de lentidão no carregamento de páginas web, por isso é fundamental utilizar o formato adequado. JPG, PNG e GIF são os principais formatos, principalmente se estiverem otimizados e com tamanho em torno de 100kb.
Mas, o formato WebP ganhou força e cobertura dos principais navegadores nos últimos anos, se tornando um dos formatos mais eficientes. Para converter imagens em formatos tradicionais para WebP é possível utilizar o site iloveimg.com.
Minimizar CSS e JS
Minimizar os arquivos CSS e JS também é uma ótima forma de otimizar o front-end e acelerar o carregamento das páginas. Existem diversas ferramentas de minificação de CSS e JS disponíveis, mas as melhores são as que possibilitam fazer o caminho reverso, voltando o arquivo para o estado original, ou seja, legível.
Em relação a CSS e JS, você também deve:
- Combinar as folhas de estilo em um único arquivo CSS, assim como os múltiplos arquivos JS
- Realizar compressão server side para reduzir o tamanho dos arquivos
- Evitar o uso de CSS e JS inline e incorporado
Essas são apenas algumas práticas de otimização que podem ajudar tanto no processo de desenvolvimento front-end quanto na experiência do usuário ao navegar no site.
Se você quer seguir carreira como desenvolvedor front-end, precisa dominar essas e outras técnicas, e aqui no Instituto InfNet temos curso livre, bootcamp e graduação que ajudam você a se preparar para o mercado com o que há de mais atualizado. Venha conferir!
