Die Leistung der Standort ist möglicherweise die wichtigste Metrik. Je besser die Leistung ist, desto bessere Wahrscheinlichkeit, dass Benutzer auf einer Seite bleiben, Inhalte lesen, Einkäufe tätigen oder genau das, was sie tun müssen. Eine Studie von Akamai aus dem Jahr 2017 sagt, dass selbst eine Verzögerung bei der Seitenlast um 100 ms um 7% verringert und 1% ihres Umsatzes für jede 100 ms, die sie benötigt, damit ihre Website zum Zeitpunkt der Studie 1,6 Milliarden US -Dollar entspricht, wenn der Standort nur eine Sekunde verlangsamte. Die Industrie -Benchmarks von Google aus dem Jahr 2018 bieten auch einen bemerkenswerten Zusammenbruch, wie sich jede Sekunde des Ladens auf die Absprungraten auswirkt.
Auf der anderen Seite machte Firefox durchschnittlich 2,2 Sekunden lang 2,2 Sekunden lang und fuhr 60 Millionen mehr Firefox -Downloads pro Jahr. Geschwindigkeit ist auch etwas, was Google bei der Rangliste Ihrer Website -Platzierung auf Mobilgeräten berücksichtigt. Wenn Sie eine langsame Site haben, können Sie auf Seite 452 der Suchergebnisse unabhängig von einer anderen Metrik bleiben.
Vor diesem Hintergrund dachte ich, die Geschwindigkeit meiner eigenen Version einer langsamen Website zu verbessern, wäre eine lustige Übung. Der Code für die Website ist auf GitHub als Referenz verfügbar.
Dies ist eine sehr einfache Site mit einfachem HTML, CSS und JavaScript. Ich habe absichtlich versucht, dies so einfach wie möglich zu halten, was bedeutet, dass der Grund, warum es langsam ist, nichts mit der Komplexität der Website selbst oder aufgrund eines Rahmens zu tun hat, das sie verwendet. Über den komplexesten Teil sind einige Social -Media -Schaltflächen für Personen, die die Seite teilen können.
Hier ist die Sache: Leistung ist mehr als eine einmalige Aufgabe. Es ist von Natur aus mit allem verbunden, was wir bauen und entwickeln. Während es verlockend ist, alles auf einen Sturz zu lösen, könnte der beste Ansatz zur Verbesserung der Leistung iterativer sein. Stellen Sie fest, ob es niedrig hängende Früchte gibt, und finden Sie heraus, was größere oder langfristige Anstrengungen sein könnten. Mit anderen Worten, inkrementelle Verbesserungen sind eine großartige Möglichkeit, Leistungsiege zu erzielen. Wieder zählt jede Millisekunden.
In diesem Sinne konzentrieren wir uns in diesem Artikel mehr auf die inkrementellen Siege und weniger auf die Bereitstellung einer umfassenden Liste oder Checkliste von Leistungsstrategien.
Wir werden mit Leuchtturm zusammenarbeiten. Viele von Ihnen sind vielleicht bereits sehr vertraut damit. Es wurde sogar hier auf CSS-Tricks ein Haufen bedeckt. Es ist ein Google -Service, der die Leistung, Zugänglichkeit, SEO und Best Practices prüft. Ich werde die Leistung meiner langsamen Seite vor und nach den Dingen, die wir in diesem Artikel angehen, prüfen. Auf die Leuchtturmberichte kann direkt in Chromes Devtools zugegriffen werden.
Gehen Sie voran, sehen Sie sich kurz die Dinge an, von denen Lighthouse sagt, dass sie mit der Website falsch sind. Es ist gut zu wissen, was vor dem Tauchen gelöst werden muss.
Wir können das total beheben, also fangen wir an!
Lassen Sie uns sehen, was passiert, was passiert, wenn wir zum ersten Mal auf der Website geschlagen werden. Es wird umgeleitet. Die Seite war früher bei einer URL und jetzt lebt sie in einer anderen. Das bedeutet, dass jeder Link, der auf die alte URL verweist, auf die neue URL umleiten wird.
Weiterleitungen sind in Bezug auf die Latenz, die sie zu einer Website hinzufügen, oft ziemlich leicht. Sie sind jedoch als erstes leicht zu überprüfen, und sie können im Allgemeinen mit wenig Aufwand entfernt werden.
Wir können versuchen, sie zu entfernen, indem wir aktualisieren, wo wir die vorherige URL der Website verwenden, und sie auf die aktualisierte URL verweisen, damit die Benutzer direkt dort anstatt umgeleitet werden. Mit einem Netzwerkanforderungsinspektor werde ich sehen, ob wir über das Netzwerkpanel in Devtools etwas entfernen können. Wir könnten auch ein Tool wie Postman verwenden, wenn wir müssen, aber wir werden unsere Arbeit auf Devtools so weit wie möglich beschränken, um der Einfachheit willen.
Lassen Sie uns zunächst sehen, ob es HTTP- oder HTML -Weiterleitungen gibt. Ich benutze gerne Fiddler, und wenn ich die Netzwerkanfragen inspiziere, sehe ich, dass es tatsächlich einige alte URLs und Umleitungen gibt, die herumschweben.
Ich habe kürzlich meinen Github von Anonrobot in Kealanparr umbenannt, also ist alles gleich, außer dem Domain -Namen.
Es sieht so aus, als ob die erste Anfrage, die wir geschlagen haben, https://anonrobot.github.io/redirect-to-slow-ite/ ist, bevor es sich auf https://anonrobot.github.io/slow-ite/ weiterleitet. Wir können alle unsere URLs von Slide-to-Slow-Site in die aktualisierte URL repointieren. In Devtools hilft uns der Netzwerkinspektor, zu erkennen, was die erste Webseite auch tut. Aus meiner Ansicht in Fiddler sieht es so aus:
Dies zeigt uns, dass die Site eine HTML -Weiterleitung zur nächsten Site verwendet. Ich werde meine referenzierte URL auf die neue Website aktualisieren, um die Latenz zu verringern, die zum Laden der Anfangsseite hinzufügt.
Als nächstes werde ich die Sit mit dem Performance -Panel in Devtools profilieren. Ich bin am meisten daran interessiert, die Website zu entfernen, indem ich Inhalte so schnell wie möglich rendert. Dies ist der Prozess, bei dem HTML, CSS und JavaScript in eine vollständig ausgearbeitete, interaktive Website verwandelt werden.
Es beginnt mit dem Abrufen der HTML vom Server und der Konvertierung in das DOCUM -Model (DOM). Wir werden ein Inline-JavaScript ausführen, wie wir es sehen, oder laden Sie es herunter, wenn es sich um ein externes Kapital handelt, wenn wir die HTML line-by-line-analysieren. Wir werden das CSS auch in das CSS -Objektmodell (CSSOM) aufbauen. Das CSSOM und das DOM kombinieren den Renderbaum. Von dort aus führen wir das Layout aus, das alles auf den Bildschirm an der richtigen Stelle legt, bevor wir endlich Farbe ausführen.
Dieser Vorgang kann „blockiert“ werden, wenn er darauf warten muss, dass die Ressourcen geladen werden, bevor er ausgeführt wird. Das nennen wir den kritischen Renderweg und die Dinge, die den Pfad blockieren, sind kritische Ressourcen .
Die häufigsten kritischen Ressourcen sind:
Es gibt noch einige Arten von Ressourcen, die den kritischen Renderweg wie Schriftarten blockieren könnten, aber die beiden oben genannten sind bei weitem am häufigsten. Diese Ressourcen blockieren das Rendering, da der Browser der Meinung ist, dass die Seite „unvollendet“ ist und keine Ahnung hat, welche Ressourcen er benötigt oder hat. Bei allem Browser kann die Website etwas herunterladen, das erwartet, dass der Browser noch mehr Arbeit leistet, wie Styling oder Farbänderungen. Daher ist die Site für den Browser unvollständig, sodass sie das schlechteste und das Rendering von Blöcken nimmt.
Ein Beispiel -CSS -Datei, die das Rendering nicht blockieren würde, wäre:
<link href="printing.css" rel="stylesheet" media="print">
Das Attribut "Media =" Print "lädt das Stylesheet nur herunter, wenn der Benutzer die Webseite druckt (weil Sie möglicherweise die Dinge in gedruckter Form unterschiedlich stylen möchten), was bedeutet, dass die Datei selbst nichts vom Rendern vor dem Rendern blockiert.
Wie Chris gerne sagt, ist sich ein Front-End-Entwickler bewusst. Es ist von entscheidender Bedeutung, die Leistungsprüfungsbewertungen zu verbessern, was eine Seite herunterladen muss, bevor das Rendern beginnt.
Das Blockieren des Renderweges ist eine Sache, die wir sofort beschleunigen können, und wir können auch die Parsen blockieren, wenn wir mit unserem JavaScript nicht vorsichtig sind. Analysen machen HTML -Elemente zu einem Teil des DOM, und wenn wir JavaScript begegnen, das jetzt ausgeführt werden muss, blockieren wir diese HTML -Parsen aus.
Einige der JavaScript in meiner langsamen Webseite müssen die Parsen nicht blockieren. Mit anderen Worten, wir können die Skripte asynchron herunterladen und die HTML weiterhin unverzüglich in die DOM analysieren.
Mit dem
Hier gibt es einen Kompromiss zwischen dem Einbinden von JavaScript (damit keine Netzwerkanforderung erforderlich ist), und es in seine eigene JavaScript-Datei zu platzieren (für Modularität und Code-Reseus). Fühlen Sie sich frei, hier Ihr eigenes Urteilsvermögen zu machen, da die beste Route vom Anwendungsfall abhängt. Die tatsächliche Leistung der Anwendung von CSS und JavaScript auf eine Webseite ist dieselbe, unabhängig davon, ob es sich um ein externes Vermögenswert oder ein eingefügtem, nach seiner Ankunft handelt. Das einzige, was wir entfernen, wenn wir inline Inline sind, ist die Zeit für die Netzwerkanforderung, die externen Vermögenswerte zu erhalten (was manchmal einen großen Unterschied macht).
Die Hauptsache, die wir anstreben, ist, so wenig wie möglich zu tun. Wir möchten das Ladevermögen verschieben und diese Vermögenswerte gleichzeitig so klein wie möglich machen. All dies wird zu einem besseren Leistungsergebnis führen.
Meine langsame Site ist es, mehrere kritische Anfragen zu verketten, bei denen der Browser die nächste HTML -Zeile lesen muss, warten und dann den nächsten lesen, um nach einem weiteren Vermögenswert zu suchen, und dann warten. Die Größe der Vermögenswerte, wenn sie heruntergeladen werden und ob sie blockieren, werden alle enorm in der Lage sein, wie schnell unsere Webseite geladen werden kann.
Ich habe dies angesprochen, indem ich die Site im Devtools Performance -Panel profilieren kann, weshalb einfach die Art und Weise aufgezeichnet wird, wie die Site im Laufe der Zeit lädt. Ich habe meine HTML und das, was es heruntergeladen hat, kurz gescannt und dann zu einem externen JavaScript -Skript
Es ist interessant, dass Chrome ein Browserlimit hat, bei dem es nur mit sechs HTTP-Verbindungen pro Domain-Namen mit sechs Einflüssen umgehen kann, und dass ein Vermögenswert zurückkehrt, bevor ein weiteres Anfragen nach den sechs im Flug angefordert wird. Das Fordern Sie mehrere kritische Vermögenswerte für die HTML -Parsen noch schlimmer. Wenn der Browser weiter analysiert wird, beschleunigt er die Zeit, die es braucht, um dem Benutzer etwas anzuzeigen und unsere Leistungsprüfung zu verbessern.
Die Gesamtgröße eines Standorts ist ein enormer bestimmender Faktor, wie schnell er geladen wird. Laut Web.dev sollten Websites unter 10 Sekunden unter 1.600 KB interaktiv liegen. Große Nutzlasten korrelieren stark mit den langen Zeiten, um zu laden. Sie können sogar eine große Nutzlast als Kosten für den Endbenutzer in Betracht ziehen, da große Downloads möglicherweise größere Datenpläne erfordern, die mehr Geld kosten.
Zu diesem Zeitpunkt ist meine langsame Stelle satte 9.701 kb - mehr als das Sechsfache der idealen Größe. Lassen Sie uns das abschneiden.
Zu Beginn meiner Entwicklung dachte ich, ich brauche bestimmte Vermögenswerte oder Frameworks. Ich habe sie auf meine Seite heruntergeladen und kann mich jetzt nicht einmal daran erinnern, welche tatsächlich verwendet werden. Ich habe definitiv einige Vermögenswerte, die nichts anderes tun, als Zeit und Raum zu verschwenden.
Mit dem Netzwerkinspektor in Devtools (oder einem Tool, mit dem Sie sich wohl fühlen) können wir einige Dinge sehen, die definitiv von der Website entfernt werden können, ohne das zugrunde liegende Verhalten zu ändern. Ich habe in Devtools viel Wert im Abdeckungspanel gefunden, da er zeigt, wie viel Code verwendet wird, nachdem alles heruntergeladen wurde.
Wie wir bereits diskutiert haben, gibt es immer ein gutes Gleichgewicht, wenn es darum geht, CSS und JavaScript zu integrieren, im Vergleich zu einem externen Vermögenswert. Aber in diesem Moment scheint es sicherlich, dass die Website viel zu viel heruntergeladen wird, als sie wirklich braucht.
Ein weiterer schneller Weg, um die Dinge abzuschneiden, besteht darin, herauszufinden, ob eines der Vermögenswerte, die die Site, 404S laden versucht. Diese Anfragen können definitiv ohne negative Auswirkungen auf die Website entfernt werden, da sie ohnehin nicht geladen werden. Folgendes zeigt mir Fiddler:
Wenn wir uns den Berichterstattungsbericht noch einmal ansehen, wissen wir, dass es Dinge gibt, die heruntergeladen werden, aber eine erhebliche Menge an nicht genutzten Code haben, die immer noch auf die Seite gelangen. Mit anderen Worten, diese Vermögenswerte tun etwas, sind aber auch bereit, Dinge zu tun, die wir nicht einmal brauchen. Dazu gehören React, JQuery und Vue, sodass diese ohne wirkliche Auswirkungen von meiner langsamen Stelle entfernt werden können.
Warum so viele JavaScript -Bibliotheken? Nun, wir wissen, dass es reale Szenarien gibt, in denen wir nach etwas greifen, weil es unseren Anforderungen entspricht. Aber dann ändern sich diese Anforderungen und wir müssen nach etwas anderem greifen. Auch hier müssen wir uns als Front-End-Entwickler bewusst sein, und es ist ein Teil dieses allgemeinen Bewusstseins.
Nur weil wir einem Vermögenswert servieren müssen, heißt das nicht, dass wir ihn als seine volle Größe dienen müssen oder diesen Vermögenswert sogar erneut erhalten müssen, wenn der Benutzer das nächste Mal die Website besucht. Wir können unsere Assets komprimieren, unsere Stile und Skripte minifieren und die Dinge verantwortungsbewusst zwischenspeichern, sodass wir das, was der Benutzer erfordert, auf die effizienteste Weise bedienen.
Schauen wir uns drei verschiedene Arten von Vermögenswerten an und wie man sie mit diesen Taktiken knirscht.
Dazu gehören Textdateien wie HTML, CSS und JavaScript. Wir möchten alles in unserer Macht Stehende tun, um diese so leicht wie möglich zu machen, sodass wir sie nach Möglichkeit komprimieren, minimieren und zwischenspannen.
Auf einem sehr hohen Niveau arbeitet GZIP, indem sie gemeinsame, wiederholte Teile im Inhalt finden, diese Sequenzen einmal speichert und sie dann aus dem Quelltext entfernt. Es hält eine wörterbuchartige Look-up, sodass es schnell auf die gespeicherten Stücke hinweist und sie wieder an Ort und Stelle platzieren kann, wo sie hingehören, in einem Prozess, der als Gunzipping bekannt ist. Schauen Sie sich diese GZIP -Beispiele an, die eine Datei mit Gedichten enthält.
Wir tun dies, um textbasierte Downloads so klein wie möglich zu machen. Wir verwenden bereits GZIP. Ich habe dieses Tool mit GIDNetwork überprüft. Es zeigt, dass der Inhalt der langsamen Website zu 59,9% komprimiert ist. Das bedeutet wahrscheinlich, dass es mehr Möglichkeiten gibt, die Dinge noch kleiner zu machen.
Ich habe mich entschlossen, die mehreren CSS -Dateien in eine einzige Datei namens Styles.css zu konsolidieren. Auf diese Weise begrenzen wir die Anzahl der erforderlichen Netzwerkanfragen. Wenn wir die drei Dateien öffnen, enthielt jeder eine so winzige Menge an CSS, dass die drei Netzwerkanforderungen einfach ungerechtfertigt sind.
Und dabei gab es mir die Möglichkeit, unnötige CSS -Selektoren zu entfernen, die nirgendwo im DOM angewendet wurden und die Anzahl der an den Benutzer gesendeten Bytes erneut verringert.
Ilya Grigorik schrieb einen ausgezeichneten Artikel mit Strategien zum Komprimieren von textbasierten Vermögenswerten.
Wir sind auch in der Lage, die Bilder auf der langsamen Stelle zu optimieren. Wie Berichte konsequent zeigen, sind Bilder die häufigste Anfrage zur Vermögenswert. Tatsächlich beträgt die mediane Datenübertragung für Bilder von 2016 bis 2021 948,1 kb für Desktops und 902 KB für mobile Geräte.
Meine langsame Seite dient nicht so vielen Bildern, aber die Bilder, die sie servieren, können kleiner sein. Ich leitete die Bilder durch ein Online -Tool namens Squoosh und erzielte 40% Einsparungen (18,6 KB bis 11,2 KB). Das ist ein Sieg! Dies können Sie natürlich entweder vor dem Hochladen mit einer Desktop -Anwendung wie ImageOptim oder sogar als Teil Ihres Build -Prozesses tun.
Ich konnte keine visuellen Unterschiede zwischen den Originalbildern und den optimierten Versionen sehen (was großartig ist!) Und ich konnte die Größe sogar durch die Größe der tatsächlichen Datei, die Verringerung der Bildqualität und sogar die Änderung der Farbpalette weiter reduzieren. Aber das sind Dinge, die ich in der Bildbearbeitungssoftware gemacht habe. Im Idealfall würde das, was Sie oder ein Designer tun würden, wenn Sie das Vermögen anfänglich machen.
Wir haben die Minifikation und Komprimierung angesprochen und was wir tun können, um diese zu unserem Vorteil zu nutzen. Das letzte, was wir überprüfen können, ist das Caching.
Ich habe die langsame Seite immer wieder angefordert und bisher kann ich immer sehen, dass sie immer so frisch angefordert wird, ohne etwas zu zwischenstrichen. Ich schaute durch die HTML und sah, dass Caching hier deaktivierte:
<meta http- content="no-cache, no-cost, must-revalidat">
Ich habe diese Linie entfernt, sodass das Browser -Caching jetzt in der Lage sein sollte, den Inhalt noch schneller zu bedienen.
Eine weitere große Verbesserung, die wir auf jeder Website vornehmen können, besteht darin, von einem Content Delivery Network (CDN) so viel wie möglich zu bedienen. David Attard hat ein super gründliches Stück, wie man einen CDN hinzufügt und nutzen kann. Der traditionelle Weg der Bereitstellung von Inhalten besteht darin, den Server zu klettern, Daten anzufordern und darauf zu warten, dass er zurückgeht. Wenn der Benutzer jedoch Daten auf der anderen Seite der Welt anfordert, von wo aus Ihre Daten serviert werden, erhöht dies die Zeit. Wenn die Bytes in der Reaktion vom Server weiter reisen, kann es zu großen Geschwindigkeitsverlusten führen, auch wenn alles andere schnell blitzschnell ist.
Ein CDN ist eine Reihe von verteilten Servern auf der ganzen Welt, die intelligent an dem Benutzer Inhalte liefern können, da es mehrere Standorte enthält, aus denen er sie bedient.
Wir haben früher darüber gesprochen, wie ich den Benutzer JQuery heruntergeladen habe, wenn er den heruntergeladenen Code nicht verwendet, und wir haben ihn entfernt. Eine einfache Lösung hier, wenn ich tatsächlich JQuery brauchte, besteht darin, das Vermögenswert von einem CDN anzufordern. Warum?
Wir können etwas so Einfaches tun wie JQuery von Googles CDN, das sie für alle zur Verfügung stellen können, um sie auf seinen eigenen Websites zu verweisen:
<kopf> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> </kopf>
Das dient JQuery erheblich schneller als eine Standardanforderung von meinem Server, das ist sicher.
Wenn Sie bisher zusammen mit mir implementiert sind oder einfach nur gelesen haben, ist es an der Zeit, sich neu zu erzeugen und zu prüfen, ob Verbesserungen an dem vorgenommen wurden, was wir bisher gemacht haben.
Erinnern Sie sich an, wo wir angefangen haben:
Nach unseren Änderungen:
Ich hoffe, dies war hilfreich und ermutigt Sie, auf Ihrer eigenen Website nach inkrementellen Leistungsiegern zu suchen. Durch optimales Anfragen von Vermögenswerten, das Verschieben einiger Vermögenswerte vom Laden und die Reduzierung der Gesamtgröße der Site -Größe erhalten so schnell wie möglich eine funktionale, vollständig interaktive Site vor dem Benutzer.
Möchten Sie das Gespräch am Laufen halten? Ich teile mein Schreiben auf Twitter, wenn Sie mehr sehen oder eine Verbindung herstellen möchten.
Das obige ist der detaillierte Inhalt vonIterativ eine langsame Seite beheben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Ouyi-Handelsplattform-App
Implementierungsmethode für die Python-Online-Wiedergabefunktion
Was beinhaltet die Datenverschlüsselungsspeicherung?
Die Rolle der Validierungsfunktion
Datenwiederherstellung von Solid-State-Laufwerken
Was ist der Unterschied zwischen Webstorm und Idee?
Abfragemethode für Domainnamen der zweiten Ebene
Wie hoch ist das Überweisungslimit von Alipay?
Was soll ich tun, wenn eDonkey Search keine Verbindung zum Server herstellen kann?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
