Mit zunehmender Bandbreite gibt es immer mehr Objekte auf Webseiten, sodass die Beschleunigung des Öffnens von Webseiten immer noch ein wichtiges Thema ist. Es gibt drei Möglichkeiten, die Öffnungsgeschwindigkeit von Webseiten zu beschleunigen. Eine besteht darin, die Netzwerkbandbreite zu erhöhen, die andere darin, den lokalen Computer des Benutzers zu optimieren, und die dritte darin, die Webseite bis zu einem gewissen Grad durch den Website-Designer zu optimieren. Dieser Artikel stammt aus der Sicht eines Website-Designers und gibt einige Tipps zur Optimierung der Ladegeschwindigkeit von Webseiten.
1. Bilder optimieren
Es gibt fast keine Webseite ohne Bilder. Wenn Sie die Ära der 56K-Katzen erlebt haben, werden Ihnen Websites mit vielen Bildern nicht gefallen. Denn das Laden einer solchen Webseite wird viel Zeit in Anspruch nehmen.
Selbst jetzt hat sich die Netzwerkbandbreite stark verbessert und 56.000 Cats verschwinden allmählich. Es ist immer noch notwendig, Bilder zu optimieren, um Webseiten zu beschleunigen.
Zur Optimierung von Bildern gehört die Reduzierung der Anzahl der Bilder, die Reduzierung der Bildqualität und die Verwendung geeigneter Formate.
1. Reduzieren Sie die Anzahl der Bilder: Entfernen Sie unnötige Bilder.
2. Reduzieren Sie die Bildqualität: Wenn dies nicht erforderlich ist, versuchen Sie, die Qualität des Bildes zu verringern, insbesondere im JPG-Format. Eine Verringerung der Qualität um 5 % scheint keine große Änderung zu sein, aber die Änderung der Dateigröße ist relativ groß.
3. Verwenden Sie eine geeignete Formatierung: siehe nächster Punkt.
Daher müssen Sie das Bild vor dem Hochladen bearbeiten. Wenn Sie der Meinung sind, dass Photoshop zu mühsam ist, können Sie einige Online-Bildbearbeitungstools ausprobieren. Sie sind zu faul zum Bearbeiten, möchten aber spezielle Effekte auf Ihre Bilder anwenden? Sie können versuchen, Javascript aufzurufen, um Bildeffekte zu erzielen.
2. Auswahl der Bildformate:
Auf Webseiten werden im Allgemeinen drei Bildformate verwendet: JPG, PNG und GIF. Die spezifischen technischen Indikatoren der drei Formate sind nicht Gegenstand dieses Artikels Wird verwendet, wenn die Ladezeit von Webseiten verkürzt wird.
1. JPG: Wird im Allgemeinen zur Anzeige von Fotografien von Landschaften, Menschen und künstlerischen Fotos verwendet. Wird manchmal in Computer-Screenshots verwendet.
2. GIF: Es bietet weniger Farben und kann an Orten verwendet werden, an denen keine hohen Farbanforderungen bestehen, z. B. bei Website-Logos, Schaltflächen, Emoticons usw. Eine wichtige Anwendung von GIF sind natürlich animierte Bilder. Wie ein Spiegelbild, erstellt mit Lunapic.
3. PNG: Das PNG-Format kann einen transparenten Hintergrund bieten und ist ein Bildformat, das speziell für die Anzeige von Webseiten entwickelt wurde. Wird im Allgemeinen auf Webseiten verwendet, die eine transparente Hintergrundanzeige oder hohe Anforderungen an die Bildqualität erfordern.
3. Optimieren Sie CSS.
CSS-Cascading-Stylesheets sorgen dafür, dass Webseiten effizienter geladen werden und das Surferlebnis verbessert wird. Mit CSS kann das Tabellenlayout deaktiviert werden.
Aber manchmal verwenden wir beim Schreiben von CSS einige wortreichere Anweisungen, wie zum Beispiel diesen Satz:
margin-top: 10px;
Rand rechts: 20px;
Rand unten: 10px;
margin-left: 20px;
Sie können es vereinfachen zu:
margin: 10px 20px 10px 20px;
oder dieser Satz:
＜p class="decorated">Ein Absatz mit dekoriertem Text＜/p>
＜p class="decorated">Zweiter Absatz＜/p>
＜p class="decorated">Dritter Absatz＜/p>
＜p class="decorated">Vierter Absatz＜/p>
kann mit div eingefügt werden:
＜div class="decorated">
＜p>Ein Absatz mit dekoriertem Text＜/p>
＜p>Zweiter Absatz＜/p>
＜p>Dritter Absatz＜/p>
＜p>Vierter Absatz＜/p>
＜/div>
Durch die Vereinfachung von CSS können redundante Attribute entfernt und die Betriebseffizienz verbessert werden. Wenn Sie zu faul sind, das CSS nach dem Schreiben zu vereinfachen, können Sie einige vereinfachte Online-CSS-Tools wie CleanCSS
4 verwenden. Fügen Sie
beispielsweise einen Schrägstrich nach der URL hinzu, wenn der Server eine solche Adressanforderung erhält. Es kostet Zeit, den Dateityp an dieser Adresse zu ermitteln. Wenn es sich bei dem Web um ein Verzeichnis handelt, können Sie nach der URL auch einen zusätzlichen Schrägstrich hinzufügen, um sie in / zu ändern, damit der Server auf einen Blick klar erkennen kann, dass er auf den Index oder die Standarddatei im Verzeichnis zugreifen und so sparen möchte Ladezeit.
5. Das Markieren von Höhe und Breite
ist sehr wichtig, aber viele Leute ignorieren es immer aus Faulheit oder aus anderen Gründen. Wenn Sie Bilder oder Tabellen zu einer Webseite hinzufügen, sollten Sie deren Höhe und Breite angeben, also die Parameter Höhe und Breite. Wenn der Browser diese beiden Parameter nicht findet, muss er beim Herunterladen des Bildes die Größe berechnen. Bei vielen Bildern muss der Browser die Seite ständig anpassen. Dies wirkt sich nicht nur auf die Geschwindigkeit aus, sondern auch auf das Surferlebnis.
Das Folgende ist ein relativ benutzerfreundlicher Bildcode:
<img id="moon" height="200" width="450" src=" />
Wenn der Browser die Höhen- und Breitenparameter kennt, auch wenn das Bild nicht angezeigt werden kann Vorübergehend wird auf der Seite auch Speicherplatz für Bilder freigegeben, und die folgenden Inhalte werden dann weiter geladen. Dadurch wird die Ladezeit verkürzt und das Surferlebnis verbessert.
6.
Reduzieren Sie HTTP-Anfragen
Auf der Webseite gibt der Browser viele Objektanfragen (Bilder, Skripte usw.) aus. Abhängig von der Netzwerkverzögerung wird jedes Objekt verzögert. Wenn sich viele Objekte auf der Webseite befinden, kann dies viel Zeit in Anspruch nehmen
Wie kannman
alsodie Belastung bei http-Anfragen reduzieren?
2. Kombinieren Sie zwei benachbarte Bilder.
Sehen
Sie sich den folgenden Code an.
＜link rel="stylesheet" type="text/css" href="/body.css" />
＜link rel="stylesheet" type="text/css" href="/side.css" />
＜link rel="stylesheet" type="text/css" href="/footer.css" />
Wir können es zu einem kombinieren:
＜link rel="stylesheet" type="text/css" href="/style .css" />
wodurch http-Anfragen reduziert werden.
7. Weitere Tipps (vom Übersetzer hinzugefügt)
1. Entfernen Sie unnötige Add-ons.
2. Wenn Widgets von anderen Websites in die Webseite eingebettet sind und Sie die Wahl haben, wählen Sie unbedingt das mit hoher Geschwindigkeit.
3. Versuchen Sie, Bilder anstelle von Flash zu verwenden, was auch gut für SEO ist.
4. Wenn einige Inhalte statisch gemacht werden können, machen Sie sie statisch, um die Belastung des Servers zu reduzieren.
5. Der Statistikcode wird am Ende der Seite platziert.