Foi ao ar a primeira página criada com GatsbyJS e os resultados em performance foram incríveis com muito pouco esforço no desenvolvimento e melhorias de desempenho no final da criação.

Página de para São Paulo da CARGOBR

A fim de termos um novo canal de leads orgânicos no nossos sistemas, criarmos algumas landing pages com foco em oferecer fretes com destino ou origem em algumas cidades brasileiras e apresentar uma previsão do preço de frete e um mostrar um pouco sobre o que a CARGOBR faz e como contratar um frete conosco.

Pra quem não sabe, GatsbyJS é um framework que trabalha junto com o ReactJS a fim de criar páginas estáticas com o máximo de performance possível e com foco em SEO.

Fluxograma do funcionamento do Gatsby

No Gatsby, você pode selecionar a origem da informação, sendo ela um CMS (como o WordPress por exemplo), Markdown (estático) ou através de uma API, JSON, etc. Essas informações podem ser capturadas através de diversos plugins que existe para o GatsbyJS (você pode ver a lista aqui) e convertidos para GraphQL afim do consumo mais facilitado pelo React.

Dependendo do tipo de captura de dados utilizado, é possível fazer uma varredura interna desses dados para criação páginas, posts e afins através do node (existe tutoriais para cada tipo de coleta de dados que você deseja utilizar mantendo por exemplo a estrutura de rotas) e convertendo todos para páginas estáticas de alta performance.

A possibilidade também de escrever em React e utilizar a componentes é algo agrega ajuda muito na velocidade e na criação dessas landing-pages.
A maioria dos componentes que utilizamos dentro dos nossos sistemas já estão na nossa lib de componentes criada internamente dentro da CARGOBR (Ver a lib Poseidon)

Resultados de performance pelo webpagetests
Performance em tempo pelo webpagetest
Resultados de performance pelo webpagetests

A nota de cache esta um pouco baixa por conta dos scripts do Google Analytcs e o Hotjar que utilizamos em todo começo de aplicação a fim de ver o comportamento do usuário dentro da plataforma.

Você pode explorar melhor sobre performance em “Otimizando imagens e melhorando performance web

Navegue em outros posts

Deixe o seu comentário

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *