Website-Leistung: Bild- und Cookie-Optimierung und Optimierung mobiler Anwendungen
|
In den vorherigen Abschnitten haben wir Aspekte zur Verbesserung der Website-Leistung besprochen, wie Inhalt, Server, JavaScript und CSS. Darüber hinaus sind Bilder und Cookies unverzichtbare Bestandteile unserer Website. Angesichts der Popularität mobiler Geräte ist zudem die Optimierung mobiler Anwendungen sehr wichtig. Hierzu zählen vor allem: Plätzchen:
Bild:
Mobile App:
27. Reduzieren Sie die Größe von Cookies HTTP-Cookies können für verschiedene Zwecke verwendet werden, beispielsweise zur Authentifizierung und zur personalisierten Identität. Die Informationen im Cookie werden über den HTTP-Dateiheader zwischen dem Webserver und dem Browser übermittelt. Daher ist es wichtig, das Cookie so klein wie möglich zu halten, um die Reaktionszeit des Benutzers zu verkürzen. Weitere Informationen finden Sie im Artikel „When the Cookie Crumbles“ von Tenni Theurer und Patty Chi. Die Untersuchung umfasst hauptsächlich: Entfernen unnötiger Cookies, Minimieren der Cookie-Größe, um die Auswirkungen auf die Benutzerreaktion zu verringern, und Setzen von Cookies auf Domänen auf Anpassungsebene, damit Subdomänen nicht betroffen sind. Festlegen einer angemessenen Ablaufzeit. Lassen Sie Cookies früher ablaufen und löschen Sie sie nicht zu früh. Beides verbessert die Reaktionszeit für den Benutzer. 28. Cookie-freie Domains für Seiteninhalte verwenden Wenn der Browser ein statisches Bild anfordert und in der Anforderung ein Cookie sendet, verwendet der Server das Cookie nicht. Es handelt sich also lediglich um Netzwerkübertragungen, die aufgrund negativer Faktoren entstehen. Sie sollten daher sicherstellen, dass es sich bei Anfragen für statische Inhalte um Anfragen ohne Cookies handelt. Erstellen Sie eine Subdomäne und verwenden Sie sie zum Speichern aller statischen Inhalte. Wenn Ihre Domäne www.example.org ist, können Sie statische Inhalte unter static.example.org hosten. Wenn Sie das Cookie jedoch auf der Top-Level-Domain example.org statt auf www.example.org setzen, enthalten alle Anfragen an static.example.org das Cookie. In diesem Fall können Sie einen neuen Domänennamen erwerben, um statische Inhalte zu speichern und diesen Domänennamen cookiefrei zu halten. Yahoo! verwendet ymig.com, YouTube verwendet ytimg.com, Amazon verwendet images-anazon.com und so weiter. Ein weiterer Vorteil der Verwendung einer cookiefreien Domäne für statische Inhalte besteht darin, dass einige Proxys (Server) die Zwischenspeicherung von Cookie-Inhaltsanforderungen möglicherweise ablehnen. Ein damit verbundener Vorschlag ist, dass Sie die Auswirkungen von Cookies berücksichtigen sollten, wenn Sie sich entscheiden, ob Sie example.org oder www.example.org als Ihre Homepage verwenden möchten. Wenn Sie das „www“ weglassen, bleibt Ihnen keine andere Wahl, als das Cookie auf *.example.org zu setzen. Aus Leistungsgründen ist es daher besser, eine Subdomäne mit „www“ zu verwenden und das Cookie darauf zu setzen. 29. Bilder optimieren Nachdem der Designer die Seiten fertig gestaltet hat, sollten Sie diese nicht voreilig auf den Webserver hochladen. Hier gibt es einiges zu tun: Sie können überprüfen, ob die Anzahl der Bildfarben in Ihrem GIF-Bild mit den Palettenspezifikationen übereinstimmt. Dies lässt sich leicht mit der folgenden Befehlszeile in Imagemagick überprüfen: identifizieren -verbose image.gif Wenn Sie feststellen, dass im Bild nur 4 Farben verwendet werden und in der Palette Farbplätze mit 256 Farben angezeigt werden, besteht für dieses Bild noch Raum zur Komprimierung. Versuchen Sie, Ihr GIF in PNG zu konvertieren, um zu sehen, ob das Platz spart. In den meisten Fällen ist es komprimierbar. Aufgrund der eingeschränkten Browserunterstützung zögerten Designer häufig, PNG-Bilder zu verwenden. Das ist jedoch Vergangenheit. Das einzige Problem ist jetzt die Durchsichtigkeit des Alphakanals im Echtfarb-PNG-Format. Aber GIF ist wiederum kein Echtfarbformat und unterstützt keine Durchsichtigkeit. PNG (PNG8) kann also alles, was GIF kann, auch (außer Animation). Mit dem folgenden einfachen Befehl können Sie GIF sicher in PNG konvertieren: Konvertieren Sie image.gif image.png „Wir sagen: Geben Sie PNG eine Chance!“ Führen Sie pngcrush (oder ein anderes PNG-Optimierungstool) auf allen Ihren PNG-Bildern aus. Zum Beispiel: pngcrush image.png -rem alla -reduce -brute result.png Führen Sie jpegtran auf allen JPEG-Bildern aus. Mit diesem Tool können Sie verlustfreie Operationen an gezackten Kanten in Bildern durchführen. Es kann auch zum Optimieren und Entfernen von Anmerkungen und anderen nutzlosen Informationen (wie EXIF-Informationen) in Bildern verwendet werden: jpegtran -copy none -optimize -perfect src.jpg dest.jpg 30. Optimieren Sie CSS Spirite. Ordnen Sie Ihre Bilder in Spirite horizontal an. Wenn Sie sie vertikal anordnen, wird die Dateigröße leicht größer. Wenn Sie in Spirite ähnliche Farben zusammenfassen, kann die Anzahl der Farben reduziert werden. Idealerweise sollten es weniger als 256 Farben sein, um sich an das PNG8-Format anzupassen. Lassen Sie in Spirite keine großen Lücken in der Mitte der Bilder, um die Bewegung zu erleichtern. Dadurch erhöht sich die Dateigröße nicht wesentlich, aber der Benutzeragent benötigt weniger Speicher, um das Bild in eine Pixelkarte zu dekomprimieren. Ein 100 x 100 Bild hat 10.000 Pixel, während ein 1000 x 1000 Bild 1 Million Pixel hat. 31. Bilder in HTML nicht skalieren Verwenden Sie keine Bilder, die größer als nötig sind, nur um die Breite und Höhe in HTML festzulegen. Bei Bedarf: <img width="100" height="100" src="mycat.jpg" alt="Meine Katze" /> Dann sollte Ihr Bild (mycat.jpg) 100 x 100 Pixel groß sein, anstatt ein 500 x 500 Pixel großes Bild zu verkleinern. 32. favicon.ico sollte klein und zwischenspeicherbar sein favicon.ico ist eine Bilddatei, die sich im Stammverzeichnis des Servers befindet. Es muss vorhanden sein, da der Browser es anfordert, auch wenn es Ihnen egal ist, ob es nützlich ist oder nicht. Daher ist es am besten, keine 404-Antwort „Nicht gefunden“ zurückzugeben. Da es sich auf demselben Server befindet, wird das Cookie bei jeder Anforderung gesendet. Diese Bilddatei beeinflusst auch die Download-Reihenfolge. Wenn Sie beispielsweise im Internet Explorer zusätzliche Dateien in onload anfordern, wird das Favicon heruntergeladen, bevor diese zusätzlichen Inhalte geladen werden. Um die Nachteile von favicon.ico zu verringern, sollten Sie daher Folgendes tun: Machen Sie die Datei so klein wie möglich, vorzugsweise kleiner als 1 KB. Legen Sie den Dateiheader „Expires“ zum geeigneten Zeitpunkt fest (d. h., wenn Sie nicht vorhaben, favicon.ico erneut zu ändern, da es beim Ersetzen durch die neue Datei nicht umbenannt werden kann). Sie können den Expires-Header problemlos auf mehrere Monate in der Zukunft setzen. Sie können dies feststellen, indem Sie prüfen, wann die aktuelle Datei favicon.ico zuletzt bearbeitet wurde. Imagemagick kann Ihnen beim Erstellen kleiner Favicons helfen. 33. Halten Sie einzelne Inhalte kleiner als 25 KB Diese Einschränkung liegt hauptsächlich daran, dass das iPhone keine Dateien zwischenspeichern kann, die größer als 25 KB sind. Beachten Sie, dass sich dies auf die dekomprimierte Größe bezieht. Da eine einfache GIF-Komprimierung die Anforderungen möglicherweise nicht erfüllt, ist es sehr wichtig, die Dateien zu optimieren. Weitere Informationen finden Sie im Aufsatz „Performance Research, Part 5: iPhone Cacheability - Making it Stick“ von Wayne Shea und Tenni Theurer. 34. Komponenten in zusammengesetzten Text packen Das Verpacken von Seiteninhalten in zusammengesetzten Text ist wie eine E-Mail mit mehreren Anhängen. Es ermöglicht Ihnen, mehrere Komponenten in einer HTTP-Anfrage abzurufen (denken Sie daran: HTTP-Anfragen sind sehr luxuriös). Wenn Sie diese Regel verwenden, stellen Sie zunächst sicher, dass der Benutzeragent sie unterstützt (beim iPhone ist dies nicht der Fall). |
<<: Eine kurze Diskussion über die Ausführungsdetails der Mysql Multi-Table Join-Abfrage
>>: Detaillierte Erläuterung der Anwendungsbeispiele für Vue-Router 4
Artikel empfehlen
So verwenden Sie crontab zum Hinzufügen geplanter Aufgaben in Linux
Vorwort Das Linux-System wird durch den Systemdie...
Einige „Fallstricke“ beim Upgrade der MySQL-Datenbank
Bei kommerziellen Datenbanken hat die Datenbankak...
Die Eltern-Kind-Knoten-Zuordnung des El-Tree-Mehrfachauswahlbaums (Kontrollkästchen) des Elements ist nicht zugeordnet
Streng geprüfte Attribute Das offizielle Dokument...
Detaillierte Analyse jeder Phase der HTTP-Anforderungsverarbeitung von Nginx
Beim Schreiben des HTTP-Moduls von nginx müssen d...
Was ist ein MySQL-Index? Fragen Sie, wenn Sie es nicht verstehen
Inhaltsverzeichnis Überblick Vom Binärbaum zum B+...
Detaillierte Analyse von Homologie und Domänenübergreifendkeit, JSONP (Funktionskapselung), CORS-Prinzip
Inhaltsverzeichnis Same-Origin-Richtlinie Ajax-An...
So zeigen Sie den Typ des gemounteten Dateisystems in Linux an
Vorwort Wie Sie wissen, unterstützt Linux viele D...
Bereitstellung und chinesische Übersetzung des Docker-Visualisierungstools Portainer
#Docker-Suche #Docker-Pull-Portainer 1. Laden Sie...
Tipps zur Optimierung von CSS-Schattenanimationen
Diese Technik stammt aus diesem Artikel - So anim...
So ändern Sie die Master-Slave-Replikationsoptionen in MySQL online
Vorwort: Die am häufigsten verwendete Architektur...
Implementierung einer nicht geheimen SSH-Kommunikation in Linux
Was ist SSH? Administratoren können sich remote a...
Ein Beispiel für die Verwendung von nginx zum Konfigurieren mehrerer Laravel-Projekte mit einem Domänennamen
Hintergrund Da die Anzahl der Unterprojekte des U...
Verwenden Sie die CSS Paint API, um auflösungsunabhängige, variable Hintergrundeffekte dynamisch zu erstellen
Quelle: https://medium.com/better-programming, Au...
jQuery ermöglicht nahtloses Scrollen von Tabellen
In diesem Artikelbeispiel wird der spezifische Co...
Das Prinzip und die Implementierung des JS-Drag-Effekts
Die Drag-Funktion wird hauptsächlich verwendet, u...