Die Internetbandbreite wird immer größer, was offenbar zu einem qualitativen Sprung in der Ladegeschwindigkeit von Webseiten geführt hat. Tatsächlich ist dies nicht der Fall, da sich mit zunehmender Bandbreite immer mehr Objekte auf der Webseite befinden, sodass die Beschleunigung der Öffnungsgeschwindigkeit 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
Im Allgemeinen werden auf Webseiten drei Bildformate verwendet: JPG, PNG und GIF. Die spezifischen technischen Indikatoren der drei Formate sind nicht Gegenstand dieses Artikels. Wir müssen lediglich wissen, welches Format wann verwendet werden sollte, um die Ladezeit der Webseite zu verkürzen.
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
; margin
-
right: 10px;
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 in ein 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 überflüssige Attribute entfernt und die Betriebseffizienz verbessert werden. Wenn Sie zu faul sind, das CSS nach dem Schreiben zu vereinfachen, können Sie einige vereinfachte CSS-Online-Tools wie CleanCSS verwenden.
4. Fügen Sie nach der URL einen Schrägstrich hinzu
, z. B. „www.kenengba.com/220“. Wenn der Server eine solche Adressanforderung erhält, dauert es einige Zeit, den Dateityp dieser Adresse zu ermitteln. Wenn 220 ein Verzeichnis ist, können Sie nach der URL auch einen zusätzlichen Schrägstrich hinzufügen, um sie zu www.kenengba.com/220/ zu machen, damit der Server auf einen Blick klar erkennen kann, dass er auf den Index oder die Standarddatei zugreifen möchte das Verzeichnis und spart so 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 benutzerfreundlicher Bildcode:
<img id=“moon“ height=“200″ width=“450″ src=““ <p class=“pictext“>alt=“moon image“ />
</p>
Wann Der Browser kennt die Höhen- und Breitenparameter. Auch wenn das Bild vorübergehend nicht angezeigt werden kann, macht er Platz für das Bild auf der Seite und lädt weiterhin den folgenden Inhalt. Das Ergebnis sind schnellere Ladezeiten und ein besseres Surferlebnis.
6. Reduzieren Sie HTTP-Anfragen.
Wenn ein Betrachter eine Webseite öffnet, gibt der Browser viele Objektanfragen aus (Bilder, Skripte usw.). Abhängig von der Netzwerkverzögerung wird das Laden jedes Objekts verzögert. Wenn sich viele Objekte auf der Seite befinden, kann dies viel Zeit in Anspruch nehmen.
Daher ist es notwendig, die Belastung durch HTTP-Anfragen zu reduzieren. Wie kann die Belastung reduziert werden?
1. Entfernen Sie einige unnötige Gegenstände.
2. Kombinieren Sie zwei benachbarte Bilder zu einem.
3. CSS zusammenführen.
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“ />
Dadurch werden HTTP-Anfragen reduziert.
7. Weitere Tipps
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.