In browserbasiertem JavaScript sind die Schnittstellen vorhersehbar. "Single-Threaded" mit einem Transaktions-Rendering-Skript: leerer Bildschirm - Laden - Schnittstelle. Der Entwickler Artyom Belov von Cxense, der sich auf das Pareto-Gesetz konzentrierte, berichtete, dass er die Anwendung nach 20% der Zeit aufgrund der Techniken des "reaktiven Designs" um 80% schneller gemacht habe - noch nicht formuliert, aber bereits in Produkten mit Priorität auf UX verwendet.
Aber was die erfahreneren Leute betrifft, die nicht aus Webpack herauskommen und Webpack leiden lassen und nicht umgekehrt? Sie stecken Plugins ein. Da wir jedoch am Anfang der Entwicklung dieser Technik stehen, bietet uns das Ökosystem ein Plug-In, das Ihren HTML-Code verwendet, HTML mit integriertem CSS generiert und einen QR-Code für Werbung bereitstellt ... Ernsthaft? Danach können Sie die Stile durch "! Wichtig" unterbrechen ... Vielleicht lohnt es sich, eine Frage zu stellen, warum ich noch im Frontend bin.
- Hallo allerseits, ich bin Artyom Belov. Heutzutage kann das Wort reaktiv missverstanden werden: Es gibt einen großen Prozentsatz von Menschen, die React gelernt haben, bevor sie JavaScript gelernt haben. Daher ist das Aussprechen solcher Wurzelwörter etwas mehrdeutig. Aber für mich ist es immer noch Physik, das Gesetz der Impulserhaltung.
Beginnen wir mit dem Problem. Dies ist unser professioneller Perfektionismus. Schließlich zeigen wir die Benutzeroberfläche nicht, bevor sie nicht "perfekt" ist - unserer Meinung nach. Und ich weiß nicht, was bei der Nominierung für Informationsinhalte gewinnen wird: ein weißer Browserbildschirm oder ein Spinner mit der Aufschrift "Fühlen Sie sich frei, für immer zu warten"; es ist mir nicht klar.
Eines ist jedoch sicher: Das Rendern ist wie die Antwort einer Anwendung keine Transaktion. Das Anzeigen einer Schnittstelle ist keine logische Einheit, daher müssen Sie sie stapelweise schlagen.
Und im Frontend helfen wir uns im Allgemeinen, wir lügen.
Wenn wir über die „Ladezeit“ unserer Anwendung sprechen, sagen wir den Ausdruck „durchschnittliche Ladezeit“ grundsätzlich nicht vollständig. Obwohl Sie nicht sieben Bereiche in der Stirn haben müssen, damit die zweite Anwendung mithilfe von Service Worker sofort heruntergeladen werden kann.
Und es ist traurig, dass Lighthouse die Tatsache unterstützt, dass der Antrag möglicherweise keine Lebenszeichen aufweist und erst in den letzten zwei oder drei Frames des Audits sagt: "Ich habe mich tatsächlich zum Zeichnen bereit gemacht."
Und im Anwendungstest für Leistung jetzt unter 100 Punkte zu kommen, ist nicht das Schwierigste. Google hat dies bemerkt, danke.
Ein so umfassendes Konzept wie „Time to Interactive“ wurde in Phasen unterteilt: „First Interactive“, „Time to Consistently Interactive“ und „First Input Delay“. Wenn Sie mit den ersten beiden Begriffen, die Google Translate verwenden, verstehen, wie Sie interagieren und sich verbessern können, kann letzteres anhand des Hauptthreads des Browsers erklärt werden.
Ein Beispiel. Wenn der Benutzer unmittelbar nach dem Laden der Benutzeroberfläche auf das Textfeld klickt, kann eine Pause auftreten, bevor im Textfeld ein Cursor mit Eingabemöglichkeit angezeigt wird. Das liegt daran, dass der Haupt-Thread beschäftigt war und die Benutzeroberfläche zum Zeitpunkt des Klicks für die Interaktion bereit schien.
Es kommt alles darauf an, dass Metriken in Lighthouse fast dieselbe Fertigstellungszeit haben - während sie ausgeglichen sein müssen.
"First Meaning Paint" sollte so schnell wie möglich sein, "First Contentful Paint" sollte dahinter stehen und "Time to Consistently Interactive" sollte kein so großes Delta vom weißen Bildschirm des Browsers bis zur Bereitschaft der Benutzeroberfläche aufweisen.
Natürlich gibt es Experten, die sagen, dass dies einfach erreicht wird:
„Wir müssen die Anwendung in Webpack in Routen aufteilen und serverseitiges Rendering durchführen. Ja, es gibt eine halbe Stunde Arbeit! "
Dies ist jedoch nicht ganz richtig ... Lieber Experte, erwähnt nicht, dass jede neue Route dasselbe tut - Laden. Und wieder haben alle Metriken in Lighthous ein kleines Delta zwischen sich, da die Route normalerweise von Bedeutung ist.
Und manchmal arbeiten Sie nicht in einem großen erfolgreichen Unternehmen, und das serverseitige Rendern ist nicht vorhanden. Und wenn Sie Ihre offizielle Position nutzen, starten Sie F & E mit einem klaren Ziel - progressives Rendern. Wie ein progressives JPEG, das im 167er Absatz von Lebedevs „Covodry“ steht.
Im Prinzip sieht der F & E-Plan sehr einfach aus ... Sie müssen irgendwie einen Gewinn erzielen. Und vergessen Sie nicht die Hauptsache - die Zeit und die Daten, die gerne brennen. Und wenn Sie das Manifest eines minimalistischen Programmierers in Ihren Händen halten, müssen Sie sich daran erinnern: Verbringen Sie 20% der Zeit mit 80% des Ergebnisses.
Ich habe Werkzeuge. Zum Beispiel Lag-Radar.
Ich bin zwar nicht nach Santa Barbara gegangen, die die Idee gestohlen hat, Dan Abramov von jemandem oder umgekehrt ... Bei der letzten Präsentation von JSConf Iceland 2018 wurde ein ziemlich interessantes Konzept gezeigt: Das Radar ist grün, bis es eine Verzögerung im Hauptprofil erkennt, und Wenn sie empfindlich sind, wird das Radar gelb und wenn es kritisch ist, wird es rot.
Und durch Drücken von Cmd + Umschalt + P auf einem Mac - oder Strg + Umschalt + P auf einem Windows - habe ich mir den Prozentsatz der Codeabdeckung angesehen. Und dann schaute er auf das Bündel.
Und wieder zu decken und wieder zu bündeln. Und er beschloss einfach, die Situation zu akzeptieren. Ich muss hier nichts rausholen. In Projekten verwenden viele Tools, die de facto Standards sind. Zum Beispiel hat Ivan Akulov zusammen mit Google Chrome Labs vor langer Zeit ein Repository für die Webpack-Optimierung, Webpack-Libs-Optimierungen, erstellt. Und warum sollte ich das wiederholen, über Code Split sprechen, über Lazy Load? Dies ist der bekannte und fortschrittliche Standard im Jahr 2018.
Und Beantwortung der Frage "Was kann in einer halben Sekunde heruntergeladen werden?" - JS und hier ist der Gewinner. Zum Beispiel können Sie 100 Kilobyte JPG hochladen und 0,04 für die Verarbeitung ausgeben, aber JS tut dies, da die Verarbeitung 20 Mal viel länger dauert.
Weil Sie sich merken müssen, was passiert, wenn die Anwendung gestartet wird.
Nach dem Herunterladen beginnt das, was Sie neu zusammenstellen möchten: Laden Sie es gleichzeitig herunter und analysieren, kompilieren und führen Sie Code zu einem anderen Zeitpunkt aus.
Ich habe nachgesehen, was uns das <script /> -Tag bietet. Es gibt viele Möglichkeiten, und ich dachte daran, einen Hinweis zu verwenden.
Hmm, es gibt keine Fernbedienungen im Raum, kein Telefon. Ich nehme 50:50. Wir haben noch die Optionen "Aufschieben" und Typ = "Modul".
Sie werden geladen, ohne das Parsen zu blockieren, verarbeiten sich jedoch selbst und werden später ausgeführt, wenn die Anwendung dafür am besten bereit ist - wodurch der Hauptthread freigegeben wird.
Aber es gibt keine richtige Option, und die Worte des großen Mannes Ben Schwartz werden in Erinnerung gerufen. Nicht dass er es auf Russisch gesagt hätte, aber:
Um dies zu vermeiden, benötige ich JS. Daher ist die Erstanforderung die einzige Methode, mit der ich unnötige Anforderungen entfernen kann.
Nun, Sie müssen Webpack erneut konfigurieren. Dies ist nicht immer die Verbindung von Plugins.
Wenn ich mir das Bundle im Kontext anschaue, verstehe ich nicht wirklich, wie ich diese oder jene Codefragmente zwischen Dateien wiederhole.
Wahrscheinlich müssen sie in der kritischen Anfrage herausgenommen werden?
Mit ConcatenationPlugin () löschen wir das Webpack-Manifest, dh eine Liste aller Dateien der Webpack-Module, und binden diesen JSON ein, wodurch diese unnötige Anforderung beseitigt wird. Stellen Sie dann fest, ob asynchroner Code eingebettet werden kann. Und schließlich binden Sie die Gehirne von Webpack direkt in die Seite ein, um nicht auf das Laden aller Module zu warten. Ja, nehmen Sie den Laufzeitblock und binden Sie ihn in HTML ein.
Im Allgemeinen bietet die Integration von Webpack-Gehirnen nicht die bezauberndste Steigerung, aber jetzt sprechen wir über kritisches CSS.
Aber ... wir haben festgestellt, dass Critical CSS für Leute gedacht ist, die keine Einzelseitenanwendung haben. Ohne eine vollständige HTML-Route können Tools schließlich kein kritisches CSS erstellen.
Und es ist gut, dass es einen Puppenspieler gibt, der das könnte.
Schließlich wurde das, was ihm präsentiert wurde - der Ordner „Puppenspieler-Beispiele“ auf GitHub - auf Projekte übertragen. Und so entstand das Rendertron-Projekt. Richtig, um zumindest einen Fehler von ihm zu erhalten, müssen Sie die Adresse eingeben, die Eingabetaste drücken ... und fertig.
Gut, dass es andere npm-Pakete gibt, die funktionieren. Sie sind offenbar länger auf dem Markt.
Nach der Installation und Erstellung des Pakets kann ich mit der üblichen Locke den HTML-Code meiner Anwendung auf dem lokalen Server erneut rendern und dadurch den kritischen HTML-Code abrufen, der zum Erstellen von kritischem CSS erforderlich ist.
Anstatt auf ein Rendern zu warten, hat der Bootstrap-HTML-Code erwartungsgemäß zugenommen, aber es ist noch zu früh, um darauf einzugehen. Setzen wir den Weg zu Critical CSS fort.
Nochmals vielen Dank an Eddie Osmani für die Pflege des Ökosystems und die Erstellung von HtmlCriticalWebpackPlugin (), wo Sie für die Konfiguration nur ein paar Fragen beantworten müssen: Wo und in welcher Form können Sie kritisches CSS speichern?
Oh, Sie können die verdächtige Linie "Painthouse" sehen. Dies ist ein sehr interessanter Moment, in dem Eddie Osmani ein Paket eines Drittanbieters verwendet, das, wie sich herausstellt, sogar über eine Weboberfläche verfügt.
Aber um ehrlich zu sein, schäme ich mich, das Webinterface zu verwenden. Dies ist anscheinend für Layoutdesigner gedacht, die keine Befehlszeile haben. Aber alles ist einfach, wie in der Yuppy-Anzeige aus den 90er Jahren: Klicken Sie einfach auf "Erstellen".
Und dies ergibt nicht das bezauberndste Wachstum, sondern ist sehr empfindlich für die erste Färbung der Anwendung.
Mit einer Spur von der Welt, und die Anwendung kommt leicht zu einer Wendung, wenn Schriftarten anfangen zu tanzen. Diese Zeile wird als 3 Sekunden bezeichnet. Und der Abschnitt beginnt, in dem wir, das Frontend, selten verlieren, nämlich das Spiel mit Schriftarten.
Rezepte zum Herunterladen von Schriftarten. Hier hilft uns die Schriftanzeige. Nachdem wir verstanden haben, dass Sie sich hier nicht sofort bewegen müssen, entscheiden wir uns zuerst: Blitz aus unsichtbarem Text, FOIT oder Blitz aus nicht gestyltem Text, FOUT, ist für uns beängstigend.
Und - der Spoiler - das Schrecklichste für uns ist unsichtbarer Textblitz, da er eine größere Anzahl von Neuzeichnungen verursacht.
Kurz gesagt, wenn Sie sich ansehen, welche Eigenschaften für die Schriftanzeige vorhanden sind, können Sie Swap oder Fallback selbst auswählen. Im Großen und Ganzen gibt es von den fünf Eigenschaften, die Sie für sich selbst auswählen können, keine richtige Option.
Außerdem habe ich gehört, dass es ein Font Style Matcher-Projekt gibt, mit dem ich eine anständige Fallback-Systemschrift für meine Comic Sans-Schrift auswählen und nicht mit Google Fonts laden kann. Obwohl das nicht ganz richtig ist ...
Es gibt Leute wie Zach Zezerman, die das FOFT-Konzept erfunden haben.
Was im Browser praktisch nicht sichtbar ist.
Dies wird durch die Tatsache erreicht, dass beim Herunterladen der römischen Schriftart des Standardstils der Browser bereits so intelligent ist, dass er eine "falsche" fette, kursive, unterstrichene und durchgestrichene Schriftart basierend auf dem Standardstil erstellen kann. Dies gibt einen Blitz, aber fast keinen. Implementieren Sie dazu die sogenannte Preload-Schriftart.
Aber was ist, wenn ich sage, dass die Schriftart in CSS eingebettet werden kann? Und das ist wahr, und es gibt auch einen Gewinn!
Es sieht aus wie eine Kombination von Techniken. Sie müssen nur die römische Schrift direkt in CSS einbetten. So können Sie bei der ersten Hauptkenntnis des Benutzers mit der Anwendung Wachstum erzielen und dann die verbleibenden Headsets bei Bedarf, jedoch nicht sofort, laden.
Nach so vielen Manipulationen weist „Time to Consistently Interactive“ immer noch ein signifikantes Delta gegenüber anderen Indikatoren auf. Ich habe nur die Färbung der Anwendung verbessert. Das ist nicht schlecht, aber nicht das, wonach ich strebte. Meiner Meinung nach muss ich ein Problem auffangen. Und sie wurde gefangen und am Schwanz. Immerhin:
Es ist ziemlich offensichtlich, warum dies in vielen Browsern nicht implementiert ist. Eine springende Schriftrolle und das Bestimmen, was Sie laden müssen und was nicht, ist nicht die einfachste. Vielleicht wird es eine Fahrt geben.
Aber auch hier werden Experten Ihnen sagen - es gibt eine faule Ladung.
Aber denk daran, wie du mit ihm interagierst. Sie können nicht 100% der Fälle abdecken.
Ja, und wenn Sie den Weg der Optimierung beschreiten und alle Kontrollpunkte im Buch von Eddie Osmani „Essential Image Optimization“ abschließen, bleiben Sie auch bei ungelösten Problemen ...
Aber ich habe gesehen, dass Eddie Osmani Reddit gerne in seinen Almanachen und Artikeln über das Medium erwähnt. Ich erinnerte mich, dass ein Freund dort für mich arbeitete und ihn um Rat rief. Er erinnerte mich daran, dass es so etwas wie eine wahrgenommene Aufführung gab, und diese Definition lag in den Hallen meines Geistes.
Hier helfen uns übrigens Designer. Dies ist der Zeitpunkt, an dem nicht die Zeit spielt, sondern wie Sie Ihre Anwendung präsentieren. Und die richtige Taktik dafür sind „Inhaltsplatzhalter“.
YouTube kann dies beispielsweise tun.
YouTube schafft es, das Video abzuspielen, bevor alle unterstützenden Komponenten heruntergeladen wurden. Dies geschieht mit Blick auf die Zukunft aufgrund von Inhaltsplatzhaltern, wie z. B. grauen animierten Würfeln.
Und was bietet uns das Ökosystem im Moment? Nichts Besonderes. CodePen Lassen Sie uns ihre Implementierungen sehen.
Es ist eine ziemliche Karte, die in jedem Designmuster stattfindet. Mal sehen ...
Wir müssen ein paar Variablen in 30 Zeilen deklarieren, ein Eigenschaftsgramm in 50 Zeilen deklarieren, ein paar Animationen und wir erhalten 100 Codezeilen ... Dies sind 10 von 10 auf der Lea Viru-Skala.
Aber was die erfahreneren Leute betrifft, die nicht aus Webpack herauskommen und Webpack leiden lassen und nicht umgekehrt? Sie stecken Plugins ein. Da wir jedoch am Anfang der Entwicklung dieser Technik stehen, bietet uns das Ökosystem ein Plug-In, das Ihren HTML-Code verwendet, HTML mit integriertem CSS generiert und anscheinend einen QR-Code für Werbung liefert ... Ernsthaft? Danach können Sie die Stile durch "! Wichtig" unterbrechen ... Vielleicht lohnt es sich, eine Frage zu stellen, warum ich noch im Frontend bin.
Aber es gibt ein Team von Leuten, für die Witze über ihr Produkt einfach nicht lustig sind. PostCSS.
Sie können sich immer auf sie verlassen. Insbesondere können Sie diese Technik - "Contant Placeholders" - auf dem CSS-Konzept "Multi Background" implementieren. In diesem Fall kann eine einzelne "Hintergrund" -Eigenschaft mehrere Werte in einem Komma enthalten.
CanIUse antwortet nur, ja.
Dies sieht wie folgt aus, das uns vertraut ist. Bekannt - dank Medium.
Auf Ihr Bild wird ein linearer Farbverlauf angewendet, der so schnell wie möglich angezeigt wird. Später wird darüber ein Bild in voller Größe angezeigt. Im Code sieht es ungefähr so aus.
Die erste Prioritätsanforderung beginnt das Bild natürlich schwer zu laden. Und sofort, wenn Sie CSS erhalten, erscheint ein linearer Farbverlauf. Der lineare Gradient ist jedoch nicht so gerade und glatt wie die Lockerung.
Daher sollte der Code von einem anderen Plugin aufgenommen werden, wodurch der lineare Gradient weicher wird.
Mit einem kleinen Farbverlauf erstellen Sie jedoch Überlagerungen, die alle Fälle abdecken.
In diesem Fall funktioniert dies nicht richtig, da das Bild zu komplex ist, um eine Abstraktion mit nur einem linearen Farbverlauf zu erstellen. Aber hier wird sqip funktionieren.
Dies ist ein CLI-Modul, mit dem Sie einen Platzhalter für Ihr Bild erstellen und mithilfe der Technik mit mehreren Hintergründen anhängen können.
Natürlich wird das Bild in voller Größe viel länger geladen und der Platzhalter von sqip wird aufgrund seines Gewichts viel schneller angezeigt.
Aber das ist nicht ganz das, wonach ich strebe. Ich möchte, dass schwere Bilder kommen, wenn ich sie brauche und nicht, wenn der Browser sie will. Und ich muss dies in zwei CSS-Dateien aufteilen, eine in den <head> einfügen, in dem sich die hellen Bilder befinden, und dann die schweren Bilder in den <body> laden.
Aber was ist mit den verbleibenden Bildern, zum Beispiel in JS?
Insbesondere die Manipulation mit SVG sieht enttäuschend aus. Sie scheinen das SVG neu zeichnen zu wollen, aber durch vertrautes CSS ist es nicht unter Ihrer Kontrolle.
Offenbar muss SVG nach neuen Trends Bestandteil werden.
Mit Hilfe des Pakets, das Dan Abramov in „create-react-app“ übernommen hat - das ist „svgr“.
Dies ist ein CLI-Tool, das SVG einfach in Ihr JS einfügt und mit dem Sie als Komponente arbeiten können. Dies sind in der Tat drei Codezeilen.
Den Designern ist jedoch anscheinend nicht bewusst, dass viele Frameworks ein Stammelement der Komponente haben sollten. Ich werde ihn nicht bitten, SVG aus Sketch auf "besondere Weise" zu "exportieren"?
Aufgrund einer Reihe kleinerer solcher Probleme muss man auf verdächtig beliebte Projekte achten.
Zum Beispiel eine "React-Icon-Base", die sich als Ersatz für das <SVG> -Tag anbietet. Das Paket sagt uns sozusagen: Anstelle des <SVG> -Tags wickeln Sie Ihren SVG-Code in mich ein. Danach werde ich die Eigenschaften anwenden: Füllen, Text, Strich und was auch immer, weil ich die Logik habe, die dient. “ Brücke "von CSS.
Und mit Hilfe eines einfachen Befehls können Sie Ihre svgr-Vorlage für Ihr Projekt erstellen.
Um ehrlich zu sein, weiß ich nicht, warum dieses Projekt nur für React ist.
Als Nächstes können Sie die Symbole importieren, die nicht mit syntaktischem Zucker überwachsen sind.
Und schließlich entfernen Sie sich vom veralteten, möglicherweise <img> -Tag, hin zu dem Komponentenansatz, über den alle sprechen.
Und für was? Zum Beispiel, damit Sie die Pseudoklasse ": export" in Ihren SCSS \ SASS-Dateien ausprobieren.
Ich bin höchstwahrscheinlich sicher, dass dies auch im Webpack Ihrer Version funktioniert. Die Pseudoklasse ": export" entlädt die Variablen, die Sie in SCSS deklarieren. Dann können Sie sie in JS-Code importieren. Und das war's, und Sie müssen keine Fahrräder anbauen, wie eine Art JSON-Datei mit allen Farben und allem.
Mit Svgr können Sie die erste Färbung der Anwendung reduzieren. Aber nicht so ehrlich, weil der Code einfach von CSS nach JS migriert wurde.
Aber zweitens haben wir sqip vergessen, was wird das Wachstum nach seiner Anwendung sein?
Mit einfachen dynamischen Importfähigkeiten wenden wir die folgende Technik an. Wir laden die Light-Version des Bildes, den SQL-Platzhalter und zeigen sie in der Benutzeroberfläche an. Dann warten wir beim dynamischen Import in .then () auf das Symbol in voller Größe, ohne die Interaktion mit der Schnittstelle zu blockieren.
Dies führt dazu, dass wir das Thema SVG erhalten, das wir wie eine echte JS-Komponente mit Argumenten überschreiben können.
Und schließlich gibt es eine Erhöhung der notwendigen Metriken des "interaktiven". Und damit beantworten Sie die Hauptfrage, die in den Artikeln von Eddie Osmani gestellt wird: "Ist überhaupt etwas los?" Sie antworten viel früher: "Ja, es passiert."
Aber es fühlt sich so an, als hätte ich nur Symbole in der Anwendung. Es gibt zum Beispiel auch Formularfelder.
Hier ist eine Lösung, die Sie jetzt googeln können. Zum Beispiel "React-Content-Placeholder" und "Vue-Content-Placeholder". Aber hör auf, hier wird uns angeboten, SVG-Platzhalter für Komponenten manuell zu zeichnen.
Es gibt auch eine Webversion, in der Sie Platzhalter per Drag & Drop ziehen und erstellen können. Welches wird genau wie Ihre realen Komponenten sein.
Aber ob es darum geht, gestaltete Komponenten fünfmal zu laden - nein! - und das gestaltete System, das ich benutze.
Und machen Sie es zu einer Regel, dass Sie sich strikt an das Design-System halten müssen. Und nicht Symbole und Bilder sollten korrekt exportiert werden, sondern ein Designsystem sollte diesen Prozess regulieren. Die Breite des Textfeldes sollte nicht fest codiert sein, aber das Entwurfssystem sollte dies oben regeln.
Und nicht das Schwierigste ist es schließlich, einen ternären Operator zu verwenden, der unseren einfachsten Platzhalter anzeigt, der den Benutzer darüber informiert, dass er endlich an der Adresse angekommen ist, und dann die vollständige Komponente nur dann zu laden, wenn wir sie benötigen.
Im Allgemeinen sollte es eine Demo geben, aber ich bin nicht wegen eines Werbeberichts hierher gekommen. Aber die anderen Jungs, die ihr alle kennt, verdienen Respekt.
Und wenn ich bei den Oscars wäre, würde ich einen Umschlag herausnehmen und etwas sagen wie: „Für den unglaublichen Einfallsreichtum bei der Implementierung des Inhaltsplatzhalters, nämlich bei der Implementierung der Animation mit einem 10x10-Pixel-GIF, anstatt CSS-Stile zu schreiben, wird der Titel vergeben "Experten für Animation, mit Grüßen aus der Vergangenheit, Instagram!"
Ich hoffe, sie rücken keine transparenten Einzelpixel-GIFs ein, und die Rahmeneigenschaft ist keine Doppeltabelle.
Und ich möchte Sie daran erinnern: Verlassen Sie sich auf echte Benutzerüberwachung, RUM.
Für echte Benutzer Ihrer Projekte und relevante Metriken. , , , first input delay.
, , common-, .
, , .
, , JPG , .
, . , .
Und der letzte. , , , , , - loadable-. ́, , . , — , . — , . , , , Webpack. , … great loading component? , - ? ?
, , , , . .
