3 Tipps zum Beschleunigen Ihrer Bootstrap -Website

Schlüsselpunkte

• Nur die erforderlichen Komponenten im Bootstrap -Paket herunterladen. Wenn nicht bestimmte Funktionen verwendet werden, löschen Sie sie, um die Geschwindigkeit zu optimieren.
• Verwenden Sie keine vorkompilierten Download -Pakete, sondern wählen Sie den Quellcode. Auf diese Weise können Sie nur die benötigten Komponenten einfügen und ein schlankeres und effizientes Stylesheet für Ihre Produktionsumgebung erstellen.
• Implementieren Sie die nachgewiesenen Client -Optimierungstechniken wie das Schreiben von optimiertem CSS und JavaScript -Code, Komprimieren und Zusammenführen von CSS und JavaScript -Code sowie die Optimierung der Bilddateigröße. Diese Schritte können die Geschwindigkeit und Leistung Ihrer Website erheblich verbessern.

Website-Optimierung ist eine Reihe von serverseitigen und clientseitigen Technologien, mit denen das Laden und Rendering von Websites im Browser beschleunigt und damit die Benutzererfahrung verbessert wird.

Jetzt sind Besucher an die Unmittelbarkeit und Reaktionsfähigkeit einheimischer Apps gewöhnt. Sie erwarten, dass die Webseite 1000 Millisekunden geladen wird. Wenn die Ladezeit viel länger ist, verlässt sie die Website höchstwahrscheinlich.

Suchmaschinen haben diesen Trend zweifellos mit diesem Trend getroffen und ihn in vielerlei Hinsicht gefördert. Tatsächlich hat Google die Seitengeschwindigkeit immer als Faktor für Website -Rankings in der Desktop -Suche verwendet. Google kündigte an, dass die mobile Suche ab Juli 2018 auch für die Erzielung von Top -Ranglisten in der Liste der Suchergebnisse von entscheidender Bedeutung ist.

Bootstrap wird häufig dafür kritisiert, dass Sie Ihrer Website unnötige Redundanz hinzufügen. Wenn Sie also diese beliebte Front-End-UI-Bibliothek in Ihrem Projekt verwenden, achten Sie auf die Seitengröße und die Seitengeschwindigkeit zusätzliche Aufmerksamkeit.

In diesem Artikel werde ich drei Front-End-Optimierungsschritte behandeln, die Sie ausführen können, um sicherzustellen, dass Ihre Bootstrap-basierte Website schnell und gut optimiert wird.

Laden Sie nur das Bootstrap -Paket herunter, das Sie

benötigen

Wenn Sie sich für das vorkompilierte Download -Paket mit Bootstrap entscheiden, sollten Sie wirklich darüber nachdenken, welche Teile Sie wirklich benötigen.

Der Download -Ordner enthält die vollständige CSS -Bibliothek (Bootstrap.css und Bootstrap.min.css) und die JavaScript -Komponentenbibliothek und alle Abhängigkeiten (außer jQuery) (bootstrap.bundle.js und bootstrap.buntle.min.js)) und viele eigenständige CSS -Dateien, die den Code enthalten, der für bestimmte Teile dieses beliebten UI -Toolkits erforderlich ist.

Wenn Sie nur einen schönen CSS-Reset-Stil benötigen, verwenden Sie einfach Bootstrap-reboot.min.css. Wenn Sie nur ein flexibles und einfach zu verwendende Netzsystem benötigen, verwenden Sie Bootstrap-Grid.min.css. Sie müssen nicht das gesamte Framework herunterladen. Wenn Sie jedoch wissen, dass Sie alles in der Bibliothek verwenden möchten, stellen Sie zumindest eine dünne Version ein.

Gleiches gilt für

JavaScript -Code. Wenn Sie wissen, dass Sie keine Dropdown-Menüs, Pop-ups und Tooltips in Ihrem Projekt benötigen, verwenden Sie Bootstrap.min.js anstelle von Bootstrap.bundle.min.js .

Wählen Sie den Quellcode anstelle eines vorkompilierten Download -Pakets

Obwohl mit der neuesten Version von Bootstrap die Teile, die Sie in Ihr Projekt aufnehmen möchten, auswählen können, enthalten vorkompilierte Dateien möglicherweise weiterhin, was Sie eigentlich nicht benötigen.

Der Browser muss noch nicht verwendeten Code herunterladen und verarbeiten, was sich auf die Leistung der Website auswirken kann, insbesondere wenn die Netzwerkverbindung langsam ist.

Ein besserer Weg ist, den Bootstrap -Quellcode herunterzuladen, weil:

• Sie können genau aufnehmen, welche Komponenten Sie in Ihrem Projekt benötigen
• Jeder Teil der benutzerdefinierten Bibliothek wird einfacher und effizienter, ohne dass Styles wiederholt wird
• Stylesheets, die in der Produktion landen, sind normalerweise größer.

Verwenden der bewährten Client -Optimierungstechnologie

Abgesehen von den oben genannten Punkten muss die Optimierung von Bootstrap-basierten Websites für die Leistung weiterhin die Front-End-Leistungstechnologie wie jede andere Website enthalten.

Folgendes sind die Schlüsselfaktoren für eine effektive Front-End-Website-Optimierung, die Sie bemerken können:

Schreiben von optimiertem CSS und JavaScript -Code

Jedes Zeichen im Code erhöht die endgültige Größe der Webseite. Es ist nicht einfach, prägnantes und klares CSS und JavaScript -Code zu schreiben und gleichzeitig lesbar zu halten. Dies sollte jedoch das Ziel sein, nach dem jedes Projekt streben sollte.

Gute CSS-Praktiken umfassen das Entfernen von nicht verwendeten Selektoren, den doppelten Code und die überhalten Regeln. Es ist am besten, den Code zu Beginn des Projekts organisiert zu halten. Beispielsweise kann die Verwendung von Style Guides Ihrem Entwicklungsprozess und Ihrer Codequalität wirklich zugute kommen.

Zusätzlich gibt es einige großartige Tools, mit denen Sie Ihren Code reinigen können. Codeinspektoren wie CSS Lint und JSlint können Ihr Dokument auf Syntaxfehler, ineffiziente Codierungsmuster, nicht verwendeten Code und mehr überprüfen.

CSS- und JavaScript -Code komprimieren und verschmelzen

Ein wichtiger Optimierungsschritt besteht darin, die Anzahl der HTTP -Anforderungen zu begrenzen, die eine Website erfolgen müssen, um ihren Inhalt vorzustellen. Jedes Mal, wenn Sie hin und her gehen, zum Server, um Ressourcen zu erhalten, benötigt Sie Zeit, was sich negativ auf die Benutzererfahrung auswirkt.

Komprimierung (d. H. Das Entfernen von Kommentaren und Leerzeichen aus Dokumenten) und das Zusammenführen von CSS und JavaScript -Dateien sind jetzt zu einer soliden Praxis geworden, um die Dateigrößen klein zu halten und die Anzahl der HTTP -Anforderungen zu verringern.

Wenn Sie einen tieferen Look erhalten möchten, ist Gary Stevens 'So optimieren Sie CSS und JS, um eine Website zu beschleunigen, ein großartiger Artikel.

Beachten Sie die Bilddateigröße

Die schwersten Teile einer Webseite werden normalerweise durch Bilddateien dargestellt, Audio- und Videodateien spielen jedoch auch eine Rolle. Die Optimierung der visuellen Assets ist daher für die Leistung der Website von entscheidender Bedeutung.

Dies beinhaltet zwei Aspekte:

Stellen Sie sicher, dass Sie das richtige Bildformat für die jeweilige Aufgabe verwenden.
Komprimieren Sie überschüssige Bytes aus Ihren Ressourcen, bevor Sie in die Produktion hochladen. Es gibt einige großartige Werkzeuge, die Ihnen helfen. Schauen Sie sich Online -Tools wie Tinypng (für Rasterbilder (PNG, JPG usw.) und Jake Archibald's SSVGOMG an (für die SVG -Optimierung). Betrachten Sie auch Tools, die Sie lokal installieren können, z. B. Ihre bevorzugten Task -Läufer (Grunzen, Schluck usw.).

Schlussfolgerung

Eine schnelle Darstellung der Website ist ein Schlüsselfaktor für die Ermittlung der Benutzererfahrung der Website. Dies wird bei der Bewertung der Webbenutzererfahrung auf mobilen Geräten noch wichtiger.

In diesem Artikel liste ich viele Technologien auf, die eine Rolle bei der Optimierung der Leistung einer Bootstrap-Website aus Sicht der Front-End-Entwicklung spielen.

Welche Front-End-Optimierungstechniken haben Sie für schnelles Laden von Bootstrap-Websites? Bitte lassen Sie es mich in den Kommentaren wissen!

Wenn Sie bereits die Grundlagen von Bootstrap haben, aber wissen möchten, wie Sie Ihre Bootstrap -Fähigkeiten auf die nächste Stufe bringen, finden Sie in unserer ersten Website mit dem Bootstrap 4 -Kurs, um schnell und einfach über die Kraft von Bootstrap zu erfahren.

FAQs zum Beschleunigen von Bootstrap -Websites (FAQ)

Warum kann meine Bootstrap -Website langsam sein?

Es kann viele Gründe geben, warum Ihre Bootstrap -Website langsam ist. Einer der häufigsten Gründe ist die Verwendung unnötiger Komponenten und Plugins. Bootstrap verfügt über viele Komponenten und Plugins. Wenn Sie sie nicht verwenden, ist es besser, sie zu entfernen. Ein weiterer Grund kann sein, dass große Bilder verwendet werden. Große Bilder können die Geschwindigkeit der Website erheblich verringern. Es wird empfohlen, das Bild zu optimieren, bevor Sie es auf die Website hochladen. Schließlich kann die Komprimierung von CSS und JavaScript -Dateien auch die Website verlangsamen. Das Komprimieren dieser Dateien kann die Geschwindigkeit Ihrer Website erheblich erhöhen.

Wie optimieren Sie meine Bootstrap -Website für eine bessere Leistung?

Es gibt mehrere Möglichkeiten, Ihre Bootstrap -Website für eine bessere Leistung zu optimieren. Zunächst sollten Sie unnötige Komponenten und Plugins entfernen. Bootstrap verfügt über viele Komponenten und Plugins. Wenn Sie sie nicht verwenden, ist es besser, sie zu entfernen. Zweitens sollten Sie das Bild optimieren, bevor Sie es auf die Website hochladen. Große Bilder können die Geschwindigkeit der Website erheblich verringern. Drittens sollten Sie CSS und JavaScript -Dateien komprimieren. Das Komprimieren dieser Dateien kann die Geschwindigkeit Ihrer Website erheblich erhöhen.

Was ist Komprimierung und wie erhöht es die Website der Website?

Komprimierung ist der Prozess des Entfernens unnötiger Zeichen (wie Leerzeichen und Kommentare) aus dem Quellcode, ohne ihre Funktionalität zu ändern. Dies verringert die Größe des Codes und verringert wiederum die Datenmenge, die an den Benutzer übertragen werden muss, wodurch die Ladezeit beschleunigt wird.

Wie komprimieren Sie meine CSS- und JavaScript -Dateien?

Es stehen mehrere Online -Tools zur Verfügung, mit denen Sie Ihre CSS- und JavaScript -Dateien komprimieren können. Diese Werkzeuge entfernen unnötige Zeichen aus Ihrem Code, verringern ihre Größe und erhöhen die Ladezeit. Einige beliebte Komprimierungswerkzeuge umfassen UglifyJs für JavaScript und CSSNano für CSS.

Wie optimieren Sie die Bilder einer Bootstrap -Website?

Es gibt verschiedene Möglichkeiten, das Bild einer Bootstrap -Website zu optimieren. Eine der effektivsten Möglichkeiten besteht darin, das Bild zu komprimieren, bevor es auf die Website hochgeladen wird. Es stehen mehrere Online -Tools zur Verfügung, um Ihre Bilder zu komprimieren, ohne ihre Qualität wesentlich zu verschlechtern. Eine andere Möglichkeit, ein Bild zu optimieren, besteht darin, das richtige Bildformat zu verwenden. Beispielsweise ist JPEG im Allgemeinen besser für Fotos geeignet, während PNG besser für Bilder mit transparenten Hintergründen geeignet ist.

Was sind einige spezifische Bootstrap -Komponenten, die meine Website verlangsamen können?

Ja, einige Bootstrap -Komponenten können die Website verlangsamen, wenn sie nicht ordnungsgemäß verwendet werden. Wenn Sie beispielsweise große Bilder verwenden, kann die Karussellkomponente die Website verlangsamen. Es wird empfohlen, Ihr Bild zu optimieren, bevor Sie es für Karussell verwenden. Wenn modale Komponenten auf jeder Seite geladen werden, kann dies die Website verlangsamen. Es wird empfohlen, modale Komponenten nur auf den erforderlichen Seiten zu laden.

Wie entfernen Sie unnötige Bootstrap -Komponenten und Plugins?

Sie können unnötige Bootstrap -Komponenten und Plugins entfernen, indem Sie die Bootstrap -Version anpassen. Dies beinhaltet das Herunterladen der Quelldatei, das Löschen unerwünschter Komponenten und Plugins und das Kompilieren der verbleibenden Dateien in eine benutzerdefinierte Version.

Kann ich CDN verwenden, um die Geschwindigkeit meiner Bootstrap -Website zu erhöhen?

Ja, die Verwendung eines Inhaltsverteilungsnetzwerks (CDN) kann die Geschwindigkeit Ihrer Bootstrap -Website erheblich erhöhen. CDN bietet statische Dateien (z. B. CSS, JavaScript und Bilder) der Website von einem Server geografisch nahe dem Benutzer und beschleunigt so die Ladezeit.

Wie benutze ich CDN auf meiner Bootstrap -Website?

Sie können CDN und Ihre Bootstrap -Website verwenden, indem Sie mit einer Bootstrap -Datei auf der CDN in einer HTML -Datei verlinken. Dies beinhaltet das Ersetzen des lokalen Dateipfads in der HTML -Datei durch die URL der Datei auf der CDN.

Gibt es noch andere Tipps, um die Bootstrap -Website zu beschleunigen?

Ja, es gibt einige andere Tipps, um die Bootstrap -Website zu beschleunigen. Beispielsweise sollten Sie die JavaScript -Datei immer am Ende einer HTML -Datei platzieren. Auf diese Weise kann der Rest der Seite vor der JavaScript -Datei geladen werden, wodurch die wahrgenommene Ladezeit beschleunigt wird. Zusätzlich sollten Sie asynchrones Laden für JavaScript -Dateien verwenden. Dadurch kann die Datei im Hintergrund geladen werden, ohne den Rest der Seite zu blockieren.

Das obige ist der detaillierte Inhalt von3 Tipps zum Beschleunigen Ihrer Bootstrap -Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!