Webdesigner sollten Webseiten unter drei Aspekten optimieren

Mit der zunehmenden Bandbreite werden immer mehr Objekte auf Webseiten angezeigt. Daher ist die Beschleunigung des Öffnens von Webseiten weiterhin ein wichtiges Thema. Es gibt drei Möglichkeiten, das Öffnen von Webseiten zu beschleunigen. Die erste besteht darin, die Netzwerkbandbreite zu erhöhen, die zweite besteht darin, dass Benutzer ihre lokalen Computer optimieren, und die dritte besteht darin, dass Website-Designer die Webseiten optimieren. Dieser Artikel gibt aus der Sicht eines Website-Designers einige Tipps zur Optimierung der Ladegeschwindigkeit von Webseiten.
1. Bilder optimieren Es gibt fast keine Webseite ohne Bilder. Wenn Sie die Zeit der 56K-Modems miterlebt haben, werden Sie Websites mit vielen Bildern bestimmt nicht mögen. Denn das Laden einer solchen Webseite würde viel Zeit in Anspruch nehmen.
Auch wenn sich die Netzwerkbandbreite stark verbessert hat und 56K-Modems allmählich aussterben, ist es immer noch notwendig, Bilder zu optimieren, um Webseiten zu beschleunigen.
Zur Bildoptimierung gehört die Reduzierung der Bildanzahl, die Verringerung 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 es nicht nötig ist, versuchen Sie, die Qualität des Bildes zu reduzieren, insbesondere im JPG-Format. Eine Reduzierung der Qualität um 5 % scheint nicht viel zu ändern, aber die Änderung der Dateigröße ist relativ groß.
3. Verwenden Sie eine geeignete Formatierung: Siehe nächsten Punkt.
Daher müssen Sie das Bild vor dem Hochladen bearbeiten. Wenn Ihnen Photoshop zu umständlich erscheint, können Sie einige Online-Bildbearbeitungstools ausprobieren. Sie sind zu faul zum Bearbeiten, möchten aber Spezialeffekte auf Ihren Bildern? Sie können versuchen, JavaScript zu verwenden, um Bildeffekte zu erzielen.
2. Auswahl des Bildformats Im Allgemeinen werden auf Webseiten drei Bildformate verwendet: JPG, PNG und GIF. Die spezifischen technischen Merkmale der drei Formate werden in diesem Artikel nicht erläutert. Wir müssen nur wissen, wann welches Format verwendet werden muss, um die Ladezeit der Webseite zu verkürzen.
1. JPG: Wird im Allgemeinen zur Anzeige fotografischer Arbeiten von Landschaften, Figuren und künstlerischen Fotos verwendet. Wird manchmal auch für Computer-Screenshots verwendet.
2. GIF: Es bietet weniger Farben und kann an Stellen verwendet werden, an denen keine hohen Farbanforderungen bestehen, wie z. B. bei Website-Logos, Schaltflächen, Emoticons usw. Eine wichtige Anwendung von GIF sind natürlich animierte Bilder. Genau wie die mit Lunapic gemachten Reflexionsbilder.
3. PNG: Das PNG-Format kann einen transparenten Hintergrund bereitstellen und ist ein Bildformat, das speziell für die Anzeige von Webseiten entwickelt wurde. Es wird im Allgemeinen auf Webseiten verwendet, die einen transparenten Hintergrund erfordern oder hohe Anforderungen an die Bildqualität stellen.
3. CSS optimieren
CSS-Cascading Style Sheets sorgen für ein effizienteres Laden von Webseiten und verbessern das Surferlebnis. Mit CSS können Tabellen als Layoutmethode abgeschafft werden.
Manchmal verwenden wir beim Schreiben von CSS jedoch ausführlichere Anweisungen, wie diese:
Rand oben: 10px;
Rand rechts: 20px;
Rand unten: 10px;
Rand links: 20px;
Sie können es folgendermaßen vereinfachen:
Rand: 10px 20px 10px 20px;

Oder dieses:
Ein Absatz mit dekoriertem Text
Zweiter Absatz
Dritter Absatz
Vierter Absatz
Sie können div verwenden, um Folgendes einzuschließen:
<div Klasse="dekoriert">
Ein Absatz mit verziertem Text
Zweiter Absatz
Dritter Absatz
Vierter Absatz
</div>
Durch die Vereinfachung von CSS können redundante Attribute entfernt und die Betriebseffizienz verbessert werden. Wenn Sie zu faul sind, Ihr CSS nach dem Schreiben zu minimieren, können Sie einige Online-Minimierungstools wie CleanCSS verwenden.

Vorherige Seite 1 2 Nächste Seite Gesamten Artikel lesen

<<: So steuern Sie den Anteil untergeordneter Flex-Elemente auf der Hauptachse

>>: Lösen Sie das Problem der inkonsistenten MySQL-Speicherzeit

Detaillierte Einführung in das benutzerdefinierte Docker-Netzwerk

Webdesigner sollten Webseiten unter drei Aspekten optimieren

Detaillierte Einführung in das benutzerdefinierte Docker-Netzwerk

WeChat-Applet-Picker - Mehrspalten-Selektor (Modus = MultiSelector)

Detaillierte Erklärung zum Ziehen von Tabellenspalten mit Vue Element Sortablejs

So schreiben Sie mit nodejs ein Tool zur Generierung von Entitätsklassen für Datentabellen für C#

Nach dem Absenden des Formulars zu einer anderen Datei wechseln

Detaillierte Erläuterung des Speichermodells der JVM-Serie

MySQL-Lösung zur Datenpaging-Abfrageoptimierung auf Millionenebene

Einführung in die Anwendung der HTML-Tags superscript sup und subscript sub

Implementierung der Anmeldeseite des tatsächlichen Kampfprotokolls von Vue

Schritte für Docker zum Erstellen eines privaten Lagerhafens

Artikel empfehlen

Umfassende Analyse von optimistischer Sperre, pessimistischer Sperre und MVCC in MySQL

Eine kurze Einführung in die MySQL MyCat-Middleware

Beispiel für die Verwendung von Nginx zur Implementierung eines TCP-Proxys mit Portweiterleitung

Lernen Sie die Prinzipien und allgemeinen Operationen von MySQL-Partitionstabellen anhand von Beispielen kennen

js, um einen 3D-Karusselleffekt zu erzielen

CSS erzielt den „Bottom Absorption“-Effekt im Footer

So importieren Sie CSS-Stile in externe HTML-Stylesheets

Erstellen einer LEMP-Umgebung (Linux+Nginx+MySQL+PHP) unter CentOS 8.1 (Details zum Tutorial)

Verwenden Sie Angular CDK, um eine Service-Popup-Toast-Komponentenfunktion zu implementieren

Wichtige Hinweise zu PHP-HTMLhtml-Wissenspunkten (unbedingt lesen)

Verwenden Sie CSS, um die Breite von INPUT in TD festzulegen

5 einfache XHTML-Webformulare für Webdesign

So schreiben Sie DROP TABLE in verschiedene Datenbanken

Die Prinzipien und Mängel der MySQL-Volltextindizierung

MySQL umgeht die Gewährung von information_schema-Objekten und meldet den Fehler ERROR 1044 (4200)