aumento de desempenho em imagem de fundo fixa

Às vezes você precisa de uma imagem de fundo fixa que, na maioria dos casos, cubra o fundo.

A abordagem usual é definir os atributos CSS background-attachment: fixed;ebackground-size: cover;

Para obter um aumento de desempenho (pelo menos no cromo), você pode levar o fundo para um elemento anterior.

Peguei esse método na seguinte postagem do blog, onde você pode lê-lo com mais detalhes:

https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property

Então é assim que é feito normalmente:

.fixed-background {
  @include clearfix;
  border-top: 10px solid rgba(255, 255, 255, .46);
  background-color: white;
  background: url('/img/bg.jpg') no-repeat center center;
  background-attachment: fixed;
  background-size: cover;
  color: $white;
  padding-bottom: 4em;
}

E isso deixa você carregado mais rápido:

.fixed-background {
  @include clearfix;
  border-top: 10px solid rgba(255, 255, 255, .46);
  color: $white;
  padding-bottom: 4em;
  overflow: hidden; // added for pseudo-element
  position: relative; // added for pseudo-element

  // Fixed-position background image
  &::before {
    content: ' ';
    position: fixed; // instead of background-attachment
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: white;
    background: url('/img/bg.jpg') no-repeat center center;
    background-size: cover;
    will-change: transform; // creates a new paint layer
    z-index: -1;
  }
}

é isso aí.