Performance com gatsby

imagens.md

Arquivos

Primeiro de tudo vc deve configurar os filesystems do seu projeto através do gatsby-source-filesystem é uma boa nomear de acordo com a necessidade

Como ter performance com imagens no gatsby

Imagens na tela (img)

• usar gatsby-image
  • instale as dependencias
  • ele cria um component que otimiza tudo, alem de renderizar imagens mais leves conforme for carregando (vc tem como escolher o tipo atraves dos fragments que ele possui)

Svgs

• usar o gatsby-plugin-react-svg basicamente vc diz qual pasta/arquivos ele vai observar e vc importa diretamente sem problemas (tambem pode usar o static query)

Imagens background (css provavelmente com background-image)

• Caso seja png/jpeg/... usar o gatsby-background-image ele vai facilitar muito a sua vida nessa questao, pois usa a mesma configuração do gatsby-image (instale as dependencias)
• Caso seja um svg vc pode usar diretamente o plugin gatsby-plugin-react-svg ele funciona no css ... mas e uma boa pegar a url correta pra isso vc pode usar static query

QUERIES UTEIS

Muitas imagens

// hook para pegar as imagens do tipo fluid de acordo com o nome
// pode ser usado com fixed dentre outros
// e a unica forma ate o momento de nao precisar fazer uma query pra cada item
import { graphql, useStaticQuery } from 'gatsby';
import { filter, includes } from 'lodash';

export const useImagesFluid = ({ names }) => {
  const {
    allImageSharp: { edges = [] },
  } = useStaticQuery(graphql`
    {
      allImageSharp {
        edges {
          node {
            fluid {
              ...GatsbyImageSharpFluid_tracedSVG
              originalName
            }
          }
        }
      }
    }
  `);

  return filter(edges, ({ node }) => includes(names, node.fluid.originalName));
};

export default {
  useImagesFluid,
};

PublicURL de determinado arquivo

usamos file quando queremos percorrer todo tipo de arquivo e imageSharp quando forem imagens ;)

{
  file(name: { in: "name" }) {
    publicURL
  }
}

Caso queira trabalhar com imagens webp (vale a pena)

O gatsby-image tem um fragment referente ao webp, então isso facilita muito a vida. Lembrando que o webp não é aceito em todos os browsers... "ah então não devo usar?" ... pode usar ... ele tem um fallback (thanks god)

Como usar:

(basta substituir o fragment ;) )

import { graphql, useStaticQuery } from 'gatsby';
import { filter, includes } from 'lodash';

export const useImagesFluid = ({ names }) => {
  const {
    allImageSharp: { edges = [] },
  } = useStaticQuery(graphql`
    {
      allImageSharp {
        edges {
          node {
            fluid {
              ...GatsbyImageSharpFixed_withWebp
              originalName
            }
          }
        }
      }
    }
  `);

  return filter(edges, ({ node }) => includes(names, node.fluid.originalName));
};

export default {
  useImagesFluid,
};

lazy.md

O gatsby já tem uma performance incrivel por si só, mas a gente pode dar uma incrementada nisso usando o loadable/component e se quiser incrementar mais ainda pode renderizar os components na tela conforme o usuario scrollar (funcionou bem usando esse cara react-lazyload)

mais-performance-mobile.md

Para fins de conhecimento, pode parecer idiota, mas caso vc note que a sua nota no audits não sobe no mobile, faça precache dos arquivos usando o gatsby-plugin-offline

Ex.:

const configuration = {
 ...,
 plugins: [
  ...,
  `gatsby-plugin-offline`,
  ...
 ],
}

a declaração desse plugin deve ficar após a declaração do plugin do manifest.

Olhe a doc aqui

Obs.: lembre-se de configurar o cache do seu server assim como response com .gzip ... caso não saiba use o Netlify

requests.md

Tome cuidado com questoes de fonts e outras request.. faca somente o necessario para sua tela inicial isso vai ajudar muito

Sugestoes

• gatsby-plugin-web-font-loader (mais rapido)
• sourcing-from-wordpress (vc usa static query e nao faz fetch \o/)
• cuidado com reactstrap e outras coisas isso pode prejudicar sua performance (a minha poderia ser melhor)

styled-components.md

caso deseje usar styled components...

adicionar esse plugin ao gatsby-config plugins

{
  resolve: `gatsby-plugin-styled-components`,
  options: {
    // Add any options here
  },
},

olhar tambem https://rebassjs.org/ https://www.npmjs.com/package/styled-media-query https://styled-icons.js.org