12,23 Yuan Chuanghui·Shanghai Station, sprechen wir über die LLM-Infrastruktur

Einführung

CLS misst den maximalen Burst jeder unerwarteten Layout-Verschiebung, die während der Lebensdauer der Seite auftrittDer Layout-Verschiebungs-Score . Layoutänderungen treten auf, weil Browser dazu neigen, Seitenelemente asynchron zu laden. Darüber hinaus gibt es möglicherweise einige Medienelemente auf Ihrer Seite, deren ursprüngliche Größe unbekannt ist. Diese Kombination bedeutet, dass der Browser erst nach Abschluss des Ladevorgangs ermitteln kann, wie viel Platz ein einzelnes Element einnehmen wird. Daher führen drastische Layoutänderungen, die durch diese Unsicherheit verursacht werden, zu einem hohen CLS-Score, was bedeutet, dass die Benutzererfahrung schlecht ist.

Die Berechnungsformel für kumulativen Layout-Offset = Einflussanteil * Abstandsanteil (Referenz: https://web.dev/articles/cls ?hl=zh-cn)

Einflussverhältnis:Das Verhältnis aller instabilen Elemente im vorherigen Frame zur sichtbaren Fläche des aktuellen Frames (Gesamtfläche von das Ansichtsfenster) Die Vereinigung ist das Einflussverhältnis des aktuellen Frames.

Distanzskala:Distanzskala ist jedesinstabile Element Die maximale Bewegungsentfernung innerhalb des Rahmens (horizontal oder vertikal) geteilt durch die maximale Größe des Ansichtsfensters (Breite oder Höhe, je nachdem, welcher Wert größer ist)

Lösung

1. Finden Sie alle Faktoren, die einen kumulativen Layout-Versatz verursachen können

2. Bestimmen Sie, welche Faktoren einen so großen kumulativen Layout-Versatz verursacht haben? Wir müssen ein zuverlässiges Tool finden, das uns hilft, die spezifische Ursache zu bestätigen und zu lokalisieren.

3. Welche Problemcodes führen zu diesen Gründen? Sobald wir den Code gefunden haben, wie sollen wir ihn lösen?

Planausführung

1 Faktoren, die zu einem kumulativen Layout-Offset führen

Zu den häufigsten Ursachen für schlechtes CLS gehören:

Bild ohne Größe
Anzeigen, Einbettungen und Iframes ohne Größe
Dynamisch eingefügte Inhalte, z. B. Anzeigen ohne Dimensionen, Einbettungen und Iframes
Web-Schriftarten

2 Verwenden Sie Hilfstools, um die Faktoren zu bestätigen

Sie können zunächst die interne Überwachungsplattform verwenden, um die von Benutzern am häufigsten besuchten Seiten zu finden, und mit Lighthouse die Leistung jeder Seite einzeln analysieren.

(Hinweis: Freunde außerhalb der Website können die häufig verwendeten Seiten der Benutzer anhand ihres eigenen Systemverständnisses herausfinden ~)

Fall: Nehmen Sie unser Projekt A als Beispiel

1. In der Performance-Geschäftsübersicht haben wir den Leistungsvergleich der Top-10-URLs mit der Anzahl der Besuche und der Liste der Top-100-Seitenleistungsberichte verglichen und festgestellt dass die beiden von Benutzern am häufigsten besuchten Seiten – Startseite AListe und BDetailseite< a i=5>.

2. Verwenden Sie Lighthouse, um die Leistung der beiden Seiten lokal zu analysieren (klicken Sie auf die Schaltfläche „Seitenlast analysieren“, um die Erkennung auszulösen. Um sicherzustellen, dass die Gesamtleistung der Realität entspricht Szenario wird empfohlen, dass Sie die Erkennung durchführen. Führen Sie einige allgemeine Vorgänge auf der aktuellen Seite aus.

Die Leistungs-Screenshots lauten wie folgt:

1. Eine Liste

2. B-Detailseite

3 Lösungen

Basierend auf den im obigen Bericht genannten Gründen für den extrem hohen CLS-Wert ändern Sie diese nacheinander.

Darunter gibt es zwei Hauptgründe für die CLS-Ausnahme von Daten der Liste A auf der Homepage: Erstens hat das Excel-Bild keine Größe, zweitens ist die Höhe der Tabelle nicht klar festgelegt, was dazu führt, dass die Schnittstelle den Bildschirm dynamisch direkt ausfüllt nach der Rückgabe der Daten, was zu einem kumulativen Layout-Offset führt. Größer. Der Hauptgrund für die CLS-Ausnahme auf der B-Detailseite ist derselbe wie auf der Startseite. Die Tabellenhöhe ist nicht festgelegt, was dazu führt, dass der CLS zu groß ist.

Aus den beiden oben genannten Gründen werden folgende Änderungen vorgenommen:

1. Geben Sie das Seitenverhältnis basierend auf der Originalgröße des Bildes an. Nach der Änderung sank der CLS von0,425 auf 0,422< /span>. Man erkennt, dass der Haupteinflussfaktor die Höhe des Tisches ist.

<template>
...
<el-table-column label="自己的label" min-width="140">
        <template slot-scope="scope">
          <img
            class="monitor-link"
            :src="excelIcon"
            width="40"
            @click="(e) => handleDownload(scope.row)"
          />
        </template>
      </el-table-column>
</template>
<style lang="scss" scoped>
.monitor-link {
  cursor: pointer;
  aspect-ratio: 40/42;
}

</style>

2. Setzen Sie die Tabellenhöhe entsprechend dem aktuellen Seitenlayout zurück. Nach der Änderung sank der CLS von 0,422 auf 0,041. Der Optimierungseffekt ist bemerkenswert.

<template>
  <div class="table-wrap">
   <!-- 使用max-height，而不是height : 为了解决增减展示列造成的固定列高度错位展示问题，方法参考https://github.com/ElemeFE/element/issues/4976-->
    <el-table
      class="fixed-head-table"
      :data="data"
      width="100%"
      :max-height="tableHeight" //设置高度表格 
      header-row-class-name="table-header-row"
    >
    ...
  </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableHeight: 0,
      ...
    };
  },
  mounted() {
    this.$nextTick(() => {
      // 后面344一般是根据你上下导航栏、表单等的高度来减掉即可
      this.tableHeight = window.innerHeight - 344;
    })
  },
}
</script>

Nach der oben genannten Optimierung erzielten die beiden Seiten mit übermäßigem kumulativen Layoutversatz bessere Optimierungsergebnisse. Der CLS der Liste A sank auf 0,041 und der CLS der Detailseite B fiel auf 0,136. Die Screenshots sind wie folgt:

Online-Effekt

Seit dem 14.11.2023, nachdem der obige Leistungsoptimierungscode online gestellt wurde, ist ab 11.30 Uhr bei Überprüfung der internen Leistungsüberwachungsplattform ersichtlich, dass innerhalb von 15 Tagen nach der Online-Schaltung die Gesamtleistungsbewertung von Projekt A von zuvor 59 gestiegen ist von 70 auf 87 Punkte, wodurch gute Ergebnisse im Performance-Erlebnis erreicht werden.

Autor: JD Retail Li Mengshuang

Quelle: JD Cloud Developer Community Bitte geben Sie beim Nachdruck die Quelle an

So verwenden Sie Zhulong- und Google-Plug-ins zur Optimierung von CLS (kumulativer Layout-Offset) | Technisches Team von JD Cloud