---
updatedAt: 2025-05-08T20:50:54.000Z
agentTools:
  projectIndex: https://learn.vtex.com/llms.txt
---

# Melhorando performance

<HTMLBlock>{`
<img src="https://appliancetheme.vtexassets.com/assets/app/src/performance___6e393531676510783779281dca92ade0.svg" width=120/>
`}</HTMLBlock>

# A importância da performance em uma loja

Em 2012, o Walmart fez uma pesquisa relacionando performance *web* com de negócios, descobrindo que para cada `100ms` de melhoria de carregamento haveria `1%` de melhoria incremental em revendas. Tendo em vista todo o impacto e relevância que a performance de loja tem para um negócio, neste curso aprenderemos como seguir as melhores práticas de implementação com o Store Framework, evoluindo um tema já existente e garantindo sua otimização.

<HTMLBlock>{`
  <style>
    section#hub-content header h1, section#hub-content header h2 {
      color: #f71963
    }

    p {
      line-height: 1.5rem;
    }

    .container {
      width: 100%;
      display: flex;
      flex-direction: column;
    }

    .row-item {
      display: flex;
      align-items: center;
      border-top: 1px solid #e1e4e8 !important;
    }

    .last {
      border-bottom: 1px solid #e1e4e8 !important;
    }
    .counter {
      padding: 0 2rem 0 2rem;
      color: #717786;
    }

    .heading-text {
      color: #f71963;
      font-weight: bold;
      padding: 1rem 0 0.5rem 0;
    }

    .step {
      color: #717786;
      font-weight: bold;
    }

    .course-link {
      text-decoration: none !important;
    }
  </style>
  <div class="container">
    
  <a class="course-link" href="course-store-performance-step01fold-block-lang-pt">
    <div class="row-item">
        <h2 class="counter">1</h1>
        <span class="step">Melhorando load inicial</span>  
    </div>
  </a>
  <a class="course-link" href="course-store-performance-step02menu-items-lang-pt">
    <div class="row-item">
        <h2 class="counter">2</h1>
        <span class="step">Otimizando menus</span>  
    </div>
  </a>
  <a class="course-link" href="course-store-performance-step03submenu-optimization-lang-pt">
    <div class="row-item">
        <h2 class="counter">3</h1>
        <span class="step">Otimização de submenus</span>  
    </div>
  </a>
  <a class="course-link" href="course-store-performance-step04images-lang-pt">
    <div class="row-item">
        <h2 class="counter">4</h1>
        <span class="step">Imagens</span>  
    </div>
  </a>
  <a class="course-link" href="course-store-performance-step05searching-lang-pt">
    <div class="row-item">
        <h2 class="counter">5</h1>
        <span class="step">Melhorias na busca</span>  
    </div>
  </a>
  <a class="course-link" href="course-store-performance-step06blocks-refact-lang-pt">
    <div class="row-item">
        <h2 class="counter">6</h1>
        <span class="step">Refatorando blocos</span>  
    </div>
  </a>
  </div>
`}</HTMLBlock>