{% if stylestats %}

<div class="progress progress-number flex">
  <div>
    <h4>Performance</h4>
  </div>
  <div>
    <ul>
      <li>
        <b>{{ lighthouse.audits.metrics.details.items[0].observedFirstMeaningfulPaint | times: 1.000 | divided_by: 1000 | round: 2 }}<small>s</small></b><br>Debut affichage
      </li>
      <li>
        <b>{{ lighthouse.audits.metrics.details.items[0].observedLastVisualChange | times: 1.000 | divided_by: 1000 | round: 2 }}<small>s</small></b><br>Fin affichage
      </li>
      <li>
        <b>{{ lighthouse.audits.metrics.details.items[0].totalBlockingTime | times: 1.000 | divided_by: 1000 | round: 2 }}<small>s</small></b><br>Temps de blocage
      </li>
      <li>
        <b>{{ lighthouse.audits.metrics.details.items[0].observedLoad | times: 1.000 | divided_by: 1000 | round: 2 }}<small>s</small></b><br>Charge
      </li>
    </ul>
  </div>
</div>

{% endif %}