Heim > Artikel > Web-Frontend > 9 Tipps zur Frontend-Optimierung, die es wert sind, gesammelt zu werden (Verbesserung der Web-Performance)
9 Tipps zur Frontend-Optimierung, die es wert sind, gesammelt zu werden (Verbesserung der Web-Performance)
- 青灯夜游nach vorne
- 2020-07-14 16:35:573318Durchsuche
In der heutigen digitalen Welt gibt es unzählige Websites, die täglich aus unterschiedlichen Gründen Besuche verarbeiten müssen. Viele dieser Websites erscheinen jedoch umständlich und umständlich zu bedienen. Eine schlecht optimierte Website kann unter einer Vielzahl von Problemen leiden, darunter Ladezeiten, mangelnde Unterstützung für Mobilgeräte, Probleme mit der Browserkompatibilität und mehr.
In diesem Artikel werden Techniken beschrieben, die zur Verbesserung und Optimierung des Frontends beitragen können, was sehr nützlich ist. Zu den Hauptinhalten gehören das Bereinigen von Code, das Komprimieren von Bildern, das Komprimieren externer Ressourcen, die Verwendung von CDN und einige andere Methoden. Diese Methoden führen zu erheblichen Geschwindigkeitsverbesserungen und einer Gesamtleistungsverbesserung Ihrer Website.
1. Sauberes HTML-Dokument
HTML, Hypertext Markup Language, ist das Rückgrat fast aller Websites. HTML bringt die Formatierung von Titeln, Untertiteln, Listen und anderen Dokumentstrukturen auf Webseiten. Mit dem aktuellen Update auf HTML5 ist es sogar möglich, Diagramme zu erstellen.
HTML wird von Webcrawlern leicht erkannt, sodass Suchmaschinen bis zu einem gewissen Grad basierend auf dem Inhalt der Website Aktualisierungen in Echtzeit durchführen können. Wenn Sie HTML schreiben, sollten Sie versuchen, es prägnant und dennoch effektiv zu gestalten. Darüber hinaus gibt es einige Best Practices, die beim Verweisen auf externe Ressourcen in HTML-Dokumenten befolgt werden müssen.
CSS richtig platzieren
Webdesigner erstellen gerne Stylesheets, nachdem das Haupt-HTML-Gerüst einer Webseite erstellt wurde. Daher werden Stylesheets in Webseiten häufig nach dem HTML-Code am Ende des Dokuments platziert. Der empfohlene Ansatz besteht jedoch darin, das CSS oben im HTML-Code im Dokument-Header zu platzieren, um eine normale Darstellung zu gewährleisten.
<head> </head>
Diese Strategie verbessert nicht die Ladegeschwindigkeit der Website, lässt die Besucher jedoch nicht lange warten und sieht einen leeren Bildschirm oder unformatierten Text (FOUT). Wenn die meisten sichtbaren Elemente der Webseite bereits geladen sind, ist es wahrscheinlicher, dass Besucher warten, bis die gesamte Seite geladen ist, wodurch das Frontend optimiert wird. Das ist Wahrnehmungsleistung.
Wenn Sie Front-End lernen möchten, können Sie zu dieser Gruppe kommen. Die erste ist 291, die mittlere ist 851 und die letzte ist 189. Sie können darin lernen und kommunizieren, und es gibt eine Viele Lernmaterialien, die heruntergeladen werden können.
Javascript richtig platzieren
Wenn Sie andererseits JavaScript im Head-Tag oder oben im HTML-Dokument platzieren, blockiert dies den Ladevorgang von HTML- und CSS-Elementen. Dieser Fehler führt dazu, dass sich die Ladezeit der Seite verlängert, die Wartezeit des Benutzers verlängert und leicht dazu führt, dass die Leute ungeduldig werden und den Besuch der Website aufgeben. Sie können dieses Problem jedoch vermeiden, indem Sie die JavaScript-Attribute am Ende des HTML-Codes platzieren.
Außerdem wird bei der Verwendung von JavaScript häufig gerne das asynchrone Laden von Skripten verwendet. Dadurch wird verhindert, dass das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag beispielsweise in der Mitte des Dokuments gerendert wird.
Während HTML eines der wertvollsten Tools für Webdesigner ist, wird es häufig in Verbindung mit CSS und JavaScript verwendet, was das Surfen im Internet verlangsamen kann. Obwohl CSS und JavaScript für die Webseitenoptimierung von Vorteil sind, gibt es einige Probleme, die bei der Verwendung beachtet werden müssen. Vermeiden Sie bei der Verwendung von CSS und JavaScript das Einbetten von Code. Da Sie beim Einbetten von Code CSS in Style-Tags platzieren und JavaScript in Skript-Tags verwenden, erhöht sich dadurch die Menge an HTML-Code, die bei jeder Aktualisierung der Seite geladen werden muss.
Keine Sorge
In der Vergangenheit haben Sie möglicherweise häufig CSS-Skripte an eine einzelne Datei gebunden, um auf externe Dateien in Ihrem HTML-Code zu verweisen. Dies ist eine sinnvolle Vorgehensweise bei Verwendung des HTTP1.1-Protokolls, dieses Protokoll ist jedoch nicht mehr erforderlich.
Dank HTTP/2 können Sie jetzt mithilfe von Multiplexing HTTP-Anfragen und -Antworten asynchron über eine einzige TCP-Verbindung senden und empfangen.
Bildquelle: http://qnimate.com
Das bedeutet, dass Sie Frequently nicht mehr benötigen Binden Sie mehrere Skripte an eine einzelne Datei.
2. Optimieren Sie die CSS-Leistung
CSS, Cascading Style Sheets, kann aus in HTML beschriebenen Inhalten professionelle und übersichtliche Dateien generieren. Eine Menge CSS muss über HTTP-Anfragen eingeholt werden (es sei denn, Sie verwenden Inline-CSS). Daher sollten Sie hart daran arbeiten, überflüssige CSS-Dateien zu entfernen, aber darauf achten, die wichtigen Funktionen beizubehalten.
Wenn Ihre Banner-, Plug-in- und Layout-Stile mithilfe von CSS in verschiedenen Dateien gespeichert werden, lädt der Browser des Besuchers bei jedem Besuch viele Dateien. Obwohl die Existenz von HTTP/2 das Auftreten dieses Problems mittlerweile reduziert, dauert das Laden externer Ressourcen immer noch lange. Um zu erfahren, wie Sie HTTP-Anfragen reduzieren können, um die Ladezeiten drastisch zu verbessern, lesen Sie WordPress Performance.
Darüber hinaus verwenden viele Webmaster fälschlicherweise die @import-Direktive, um externe Stylesheets in ihre Webseiten einzuführen. Dies ist eine veraltete Methode, die die Suche nach parallelen Downloads blockiert. Der Link-Tag ist die beste Wahl und kann auch die Front-End-Leistung der Website verbessern. Nebenbei bemerkt verhindern externe Stylesheets, die über Link-Tag-Anfragen geladen werden, parallele Downloads nicht.
3. Reduzieren Sie externe HTTP-Anfragen
In vielen Fällen entsteht der Großteil der Ladezeit der Website durch externe HTTP-Anfragen. Die Ladegeschwindigkeit externer Ressourcen variiert je nach Serverarchitektur, Standort usw. des Hosting-Anbieters. Der erste Schritt zur Reduzierung externer Anfragen ist ein kurzer Blick auf Ihre Website. Studieren Sie jede Komponente Ihrer Website und eliminieren Sie alles, was das Erlebnis Ihrer Besucher beeinträchtigt. Diese Zutaten können sein:
Unnötige Bilder
Nutzloser JavaScript-Code
Übermäßiger CSS-Code
Überflüssige Plugins
Nachdem Sie diese überflüssigen Komponenten entfernt haben Organisieren Sie dann den verbleibenden Inhalt, z. B. Komprimierungstools, CDN-Dienste und Prefetching (Prefetching) usw. Dies sind die besten Optionen für die Verwaltung von HTTP-Anforderungen. Darüber hinaus erfahren Sie im Tutorial „DNS-Route-Lookup reduzieren“ Schritt für Schritt, wie Sie externe HTTP-Anfragen reduzieren.
4. Komprimieren Sie CSS, JS und HTML
Komprimierungstechnologie kann redundante Inhalte aus Dateizeichen entfernen . Wenn Sie Code in einem Editor schreiben, verwenden Sie Einrückungen und Kommentare. Diese Methoden machen Ihren Code zweifellos prägnant und lesbar, fügen dem Dokument jedoch auch zusätzliche Bytes hinzu.
Hier ist zum Beispiel ein Codestück vor der Komprimierung.
.entry-content p {
Schriftgröße: 14px !important;
}
.entry-content ul li {
Schriftgröße: 14px !important;
}
.product_item p a {
Farbe: #000;
Auffüllung: 10px 0px 0px 0;
margin-bottom: 5px;
border-bottom: none;
}
Nach dem Komprimieren dieses Codes So geht's es wurde.
.entry-content p,.entry-content ul li{font-size:14px!important}.product_item p a{color:#000;padding:10px 0 0;margin-bottom:5px;border- unten:keine🎜>
Durch die Verwendung von Komprimierungstools können Sie nutzlose Bytes ganz einfach aus Ihren CSS-, JS- und HTML-Dateien entfernen. Informationen zur Komprimierung finden Sie unter So komprimieren Sie CSS, JS und HTML.5. Verwenden Sie Prefetching
6. Verbessern Sie die Geschwindigkeit mit CDN und Caching
Content-Delivery-Netzwerke können die Geschwindigkeit und Leistung Ihrer Website erheblich verbessern. Wenn Sie ein CDN verwenden, können Sie den statischen Inhalt Ihrer Website mit einem erweiterten Netzwerk von Servern auf der ganzen Welt verknüpfen. Diese Funktion ist nützlich, wenn Ihre Website ein globales Publikum hat. Ein CDN ermöglicht es Ihren Website-Besuchern, Daten vom nächstgelegenen Server zu laden. Wenn Sie ein CDN verwenden, werden die Dateien auf Ihrer Website automatisch komprimiert, um sie schnell weltweit zu verteilen.
7. Komprimieren von Dateien
Brotli ist ein relativ neuer Dateikomprimierungsalgorithmus, der immer beliebter wird. Dieser Open-Source-Algorithmus wird regelmäßig von Softwareentwicklern von Google und anderen Organisationen aktualisiert und funktioniert nachweislich besser als andere bestehende Komprimierungsmethoden. Die Unterstützung für diesen Algorithmus ist derzeit relativ gering, aber er steht als aufsteigender Stern vor der Tür.
Weitere Informationen finden Sie in unserem vollständigen Artikel zur Brotli-Komprimierung.
Für diejenigen, die sich mit Front-End-Optimierung nicht auskennen, können Bilder ein „Website-Killer“ sein. Eine große Anzahl von Fotoalben und riesigen hochauflösenden Bildern blockiert die Rendergeschwindigkeit der Webseite. Nicht optimierte HD-Bilder können mehrere Megabyte (MB) groß sein. Eine entsprechende Optimierung kann also die Front-End-Leistung Ihrer Webseiten verbessern.
Jede Bilddatei enthält einige Informationen, die sich nicht auf ein reines Foto oder Bild beziehen. Ein JPEG-Bild enthält beispielsweise Datum, Standort, Kameramodell und einige andere irrelevante Informationen. Sie können einige Optimierungstools wie Optimus verwenden, um diese redundanten Bilddaten zu entfernen und den langwierigen Bildladevorgang zu optimieren. Da Optimus ein verlustfreies Bildkomprimierungstool ist, beeinträchtigt es die Bildqualität nicht, sondern komprimiert nur das Bildvolumen.
Außerdem können Sie, wenn Sie ein Bild weiter optimieren möchten
verlustbehaftete Komprimierung verwenden, wodurch einige Bilder gelöscht werden Daten enthalten, sodass die Qualität beeinträchtigt wird.
Um mehr über den Unterschied zwischen verlustbehafteter und verlustfreier Komprimierung zu erfahren, lesen Sie unser vollständiges Tutorial.
9. Verwenden Sie leichte Frameworks
Sofern Sie eine Website nicht nur mit Ihren vorhandenen Programmierkenntnissen erstellen, können Sie versuchen, eine gute Front zu verwenden -End-Framework, um viele unnötige Front-End-Optimierungsfehler zu vermeiden. Zwar gibt es einige größere, bekanntere Frameworks, die mehr Funktionen und Optionen bieten, diese sind jedoch möglicherweise nicht unbedingt für Ihr Webprojekt geeignet.
Es ist also nicht nur wichtig, die für das Projekt erforderliche Funktionalität zu bestimmen, sondern auch das richtige Framework auszuwählen – eines, das die erforderliche Funktionalität bietet und gleichzeitig leichtgewichtig bleibt. Viele Frameworks verwenden heutzutage prägnanten HTML-, CSS- und JavaScript-Code.
Im Folgenden sind mehrere leichte Frameworks aufgeführt, die das Lesen beschleunigen können:
Pure
Skeleton
Milligram
Framework kann Webdesign, Programmierung und Wartung nicht ersetzen. Nehmen wir als einfaches Beispiel an, dass es sich bei dem Rahmen um ein neues Haus handelt. Das Haus war sauber und ordentlich, aber es war leer. Wenn Sie Möbel, Geräte und Dekorationen hinzufügen, liegt es in Ihrer Verantwortung, dafür zu sorgen, dass das Haus nicht überladen wird. Wenn Sie ein Framework verwenden, liegt es ebenfalls in Ihrer Verantwortung, dafür zu sorgen, dass es nicht durch redundanten Code, große Bilder und zu viele HTTP-Anfragen beschädigt wird.
Front-End-Optimierung – Zusammenfassung
Front-End-Optimierung scheint viel Aufwand zu erfordern, ich glaube, einige Tipps in diesem Anwendungsleitfaden kann Ihnen dabei helfen, die Ladegeschwindigkeit Ihrer Website erheblich zu verbessern. Je schneller Ihre Website lädt, desto besser ist das Benutzererlebnis. Daher kann die Optimierung des Frontends sowohl für Sie als auch für Ihre Benutzer von Vorteil sein. Wenn Sie weitere gute Optimierungsmethoden haben, hinterlassen Sie bitte Ihre wertvollen Vorschläge im Kommentarbereich.
Dieser Artikel ist reproduziert von: https://blog.csdn.net/lin123_00/article/details/106652145
Weitere verwandte Informationen finden Sie unter: PHP chinesische Website!
Das obige ist der detaillierte Inhalt von9 Tipps zur Frontend-Optimierung, die es wert sind, gesammelt zu werden (Verbesserung der Web-Performance). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Problem beim Übergeben von Werten von der übergeordneten Komponente an die untergeordneten Komponenten-Echarts in Vue
- Einige Gedanken zu React diese Bindung
- Django verwendet eine Anfrage, um die vom Browser gesendeten Parameter abzurufen
- DOM-Operation in JQuery – Wrap
- Erläuterung verwandter Inhalte von Prototyp und Prototypenkette