提高性能最大的内容绘制元素

Question

当我启动我的网站时，它会返回几个像这样的图像：

$(document).ready(function () {
  $('.dep1').hide();
  $('.dep2').hide();
  $('.dep3').hide();
  $('.dep4').hide();
  $('.dep5').hide();
  $('.dep6').hide();
  $('.dep7').hide();
  $.getJSON('dadosinf.php', function (data) {
    $.getJSON('session.php', function (data1) {
      for (var i = 0; i < data1.length; i++) {
        Colaborador = data1[i][0];
        Grupo = data1[i][2];
      }
      var linha = ``;
      for (var i = 0; i < data.length; i++) {
          linha += `<div class="col-md-6 col-xl-3">                   
                        <a href="#" class="dropdown-item btn btn-warning histor-uten">
                          <div class="profile-photo-div" id="profile-photo-div">
                            <div class="profile-img-div" id="profile-img-div" style="height: 250px;">
                                <div id="loader"></div>                            
                                <img id="profile-img" src="/assets/utente/${data[i][3]}" loading="lazy">                                
                            </div>
                            <div class="profile-buttons-div">
                              <div class="profile-img-input" id="profile-img-input">                    
                                  <p class="butttton" id="change-photo-label" style="white-space: initial; word-wrap: break-word !important;">#${data[i][1]} ${data[i][2]}</p>
                                  <p class="butttton" id="change-photo-label"><i class='fa fa-house' aria-hidden='true'></i> ${data[i][4]} <i class='fa fa-bed' aria-hidden='true'></i> ${data[i][5]} Nº Roupa: ${data[i][6]}</p>  
                                  <input type="hidden" name="id_utt" value="${data[i][1]}">                
                              </div>
                            </div>
                          </div>
                        </a>
                      </div>`;
       }
      $(".tesssste").html(linha);
      $('.dep').show();
      $('#minhadiv105').show();
    });
  });
});

但是当我在 Google Chrome 上的 Lighthouse 中分析它时，它返回以下消息：

最大内容绘制元素 3,850 毫秒 这是视口中绘制的最大的内容元素。

相	LCP%	时机
TTFB	5%	190 毫秒
加载延迟	92%	3,540 毫秒
加载时间	1%	50 毫秒
渲染延迟	2%	70 毫秒

如何提高这段代码的性能？

Answer 1

LCP 子部分“加载延迟”表示在第一个字节开始到达 HTML 文档后 3.5 秒开始加载 LCP 图像。从您的代码中可以清楚地看出，这是因为您通过 JavaScript 填充了包含 LCP 图像的 HTML，并在 DOM 准备就绪时触发。这是不好的做法 - 您应该尝试将 LCP 图像直接放入 HTML 中，而不使用 javascript。然后你可以使用 JS 来提供更多功能。

另一件事，我忍不住要说，你不能依赖实验室工具（Lighthouse）来查找网站上的性能问题。 Google 本身建议为此使用 RUM 工具，以便您可以在现实场景中收集更多数据。

如果您正在寻找 RUM 工具，但不想每月花费数百美元，请尝试 PageVitals (https://pagevitals.com)，它为您提供 14 天的免费 RUM，然后价格低得离谱价格。