Durante a minha estada na Sodimac, desenvolvi um projeto pessoal de melhorias no front-end do site da empresa. Este trabalho focou em correções nos códigos HTML, CSS, e JS, com base nos testes realizados com o PageSpeed Insights, uma das melhores ferramentas para avaliação de performance e qualidade de sites lançada pela Google.
Só de Performance (Desempenho), consta que eu consegui 262.96% melhor do que a versão oficial.

A versão atualizada, na qual fiz os últimos ajustes, está aqui em meu próprio domínio, e é um protótipo navegável de fato, quase que inteiramente codificado por mim (com ajuda do ChatGPT nos JS e XML).

Confira: https://nstarconcepts.com/site-teste_sodimac/

[Obs.: além de ter feito o protótipo e todo o código, sou o designer que fez a adaptação do layout e a qualidade visual de todas as imagens da vitrine (o slider grande, que fica rodando no início da página), com base no Design System da empresa e em KVs pré-definidos por eles. Imagens estas que foram de fato usadas pela empresa em meses específicos de 2023.]

Consegui valores de “Acessibilidade”, “Performance”, “Boas Práticas” e “SEO” positivos, todos no verde… respectivamente: 98, 96, 100, e “66” (o SEO fica em “66” porque a página não está indexando e/ou sem ativar os robôs… algo fácil de resolver, claro… mas que, por questões profissionais e legislativas, eu tenho que manter desativado). Veja:
https://pagespeed.web.dev/analysis/https-nstarconcepts-com-site-teste_sodimac/yicc4wqedk?form_factor=desktop

A relação de comparação em porcentagem entre as duas versões do site fica então a seguinte (conforme o ChatGPT me ajudou a calcular):

• Desempenho (Performance): A sua versão tem um desempenho 262.96% melhor que a versão oficial.
• Acessibilidade: A sua versão tem uma acessibilidade 28.00% melhor que a versão oficial.
• Boas práticas: A sua versão segue 35.14% mais boas práticas do que a versão oficial.

Para resumir, resultados dos testes de “antes” e “depois” dos ajustes que realizei:

30/09/2024

Site original permanece nos mesmos sintomas, com poucas variações

https://pagespeed.web.dev/analysis/https-www-sodimac-com-br-sodimac-br/792dj6jsf1?form_factor=desktop

https://pagespeed.web.dev/analysis/https-nstarconcepts-com-site-teste_sodimac-nodisclaimer-html/d96nvt95aj?form_factor=desktop


Isso era um trabalho não concluido até o dia em que fui desligado da empresa (09/04/2024)… mas cujas abordagens mais essenciais eu já tinha conseguido resolver naqueles dias, e de fato mostrei o protótipo funcional para a então equipe e o gestor dela. Versão já desatualizada, mas que ainda se encontra no diretório deles:
https://www.sodimac.com.br/sodimac-br/teste_homesodimac

Não obstante, dei continuidade, e tive que recorrer ao domínio do meu próprio site para isso…

Os resultados que obtive são promissores, uma vez que consegui refazer os elementos essencias do layout deles.
Trabalhei nos seguintes elementos:
– 1) os cards dos produtos (que agora estão inteiramente em código, e não em imagem estática) para funcionarem em HTML semântico, acessando as imagens dos produtos no banco de dados deles, e imprimindo os detalhes das informações do produto (e do preço) em texto de HTML, usando as classes de CSS já disponíveis no Bootstrap;
– 2) o menu global (onde tive que aplicar integração com arquivos de XML, já que se trata de um “mega-menu” em telas desktop, com muitos subitens);
– 3) a responsividade de tudo isso (responsivo de verdade… não mais adaptativo, como é ainda a versão deles);
– 4) a implementação de um outro plugin para o banner vitrine (slider) no início (abaixo do menu global) com o chamado “Owl Slider”, que fica mais elegante e mais fácil de deslisar o dedo na tela de smartphones;
– 5) a atualização do Boostrap (para a versão “5.3.3” ainda vigente como a mais atual, Julho 2024);
– 6) ajustes de S.E.O. (Search Engine Optimization), conforme as sugestões dos resultados do teste no PageSpeed Insights.
– 7) e o upgrade de toda a cascata de estilos com técnicas mais avançadas, retirando os componentes do Boostrap core que eles não usam (não são necessários), aplicando CSS Properties (variáveis de CSS), e fazendo uma limpeza geral, de modo que todos os elementos do layout usem o máximo possível de recursos que já vêm com o Boostrap.

Em outras palavras, o fato é que os códigos da versão oficial deles tem muito daquilo que chamamos de “reinventar a roda”… que é, basicamente, encher o projeto com um monte de CSS adicional desnecessário, já que o CSS do framework que eles já usam (Bootstrap) vem com classes de CSS e componentes prontos pra resolver 100% do layout… Reiventar a roda não é uma boa prática… sendo uma das principais causas de gargalo no carregamento/loading… Então eu procurei arrumar isso.

‘Light x Dark’ modes

Note que resolvi também o recurso de troca de modos light e dark, assim como eu fiz no “link tree” deles. Isso a versão oficial ainda não tem…
Solucionar esse recurso é algo relativamente rápido, e eu procurei fazer com qualidade… já que a versão dark necessitou de redesigns (adaptações) em alguns detalhes.

Conclusão

Os meus ajustes focaram em otimizar a performance, melhorar a experiência do usuário e aplicar as melhores práticas de desenvolvimento web, me baseando em dados e testes validados por uma ferramenta da Google.

É digno de nota aqui também as implicações e desdobramentos que tudo isso pode ter para as vendas de um projeto de e-Commerce, pois os testes de performance servem de fato para cenários como os dos sites da referida empresa (não só da versão brasileira, mas também do Chile, Peru, Colômbia, Argentina, etc….. todos os sites deles padecem dos mesmos sintomas). Bem como seus concorrentes diretos, que são nomes muito conhecidos, como Leroy Merlin, Telha Norte, C&C, e cujos sites oficiais, também… padecem dos mesmos sintomas indicados pelo PageSpeed em maior ou menor grau.

🪞Espelho espelho meu

Segundo pesquisas minhas, a única concorrente da Sodimac e das outras marcas já citadas que se desponta com seu site atingindo pontuações todas em verde no PageSpeed é o do Mercado Livre (ML). Este é, senão, o site de e-commerce mais performático hoje on-line na internet brasileira, ou no “mercado” brasileiro. É o único site onde todos os ajustes recomendados pelo PageSpeed são feitos, onde nota-se que sua equipe de devs de fato não negligencia as boas-práticas — inclusive sem encher a página de elementos (o que também é fator de interferência direta na performance)… não insistem em “entulhar”/entupir a home-page com um monte de banners — e segue consultando e usando a ferramenta de teste como parâmetro de soluções continuamente.
Podemos dizer que o ML é de fato um exemplo a ser seguido, e/ou referência a ser adaptada de modo a atingir resultados superiores.

Então, fazer os ajustes, conforme a minha versão de home-page demonstra, é algo essencial, e que, indubitavelmente, proporciona:
1) melhor posicionamento do projeto nos sistemas de busca;
2) melhor engajamento do usuário ao entrar no site; e
3) melhores chances de conversão e de vendas.

Enfim, esta análise serve de parâmetros aplicáveis a projetos de e-Commerce.
É também um reflexo do meu comprometimento em buscar melhorias contínuas, demonstrando a habilidade de aplicar técnicas avançadas de desenvolvimento front-end.
Então, caso seja do seu interesse saber mais sobre como posso ajudar em seu projeto, esteja à vontade para me contactar.