Die meisten von uns haben vor Ort Geschwindigkeitsaudits durchgeführt oder Audits gesehen, die von anderen durchgeführt wurden. Diese können für Unternehmen wirklich hilfreich sein, aber ich finde oft, dass sie recht eng gefasst sind. Typischerweise verwenden wir bekannte Werkzeuge, die einen Haufen Dinge zum Anschauen aufwerfen, und dann tauchen wir von dort aus in die Dinge ein.
Wenn wir jedoch tiefer graben, gibt es oft andere Ideen, wie die Geschwindigkeit der Website verbessert werden kann. Ich sehe oft viele Gelegenheiten, die bei Audits der Geschwindigkeit vor Ort niemals abgedeckt werden. Die meisten Verbesserungen der Website-Geschwindigkeit sind das Ergebnis eines Bündels kleiner Änderungen, und deshalb werde ich in diesem Beitrag auf einige Ideen eingehen, die ich noch nie in einem Site-Speed-Audit gesehen habe und die alle einen Unterschied machen können.
Ich war kürzlich auf der Suche nach Tickets für Frozen 2 (wegen, ähm, meiner Kinder…) und bin so auf dieser Seite gelandet. Sie verwendet drei SVG-Bilder für Verkehrssymbole:
SVG-Bilder sind Vektorgrafiken, daher eignen sie sich gut für Dinge wie Icons; wenn Sie Bilder als PNGs anzeigen lassen, sollten Sie Ihre Designer nach den Original-SVGs fragen, da es erhebliche Einsparungen geben kann. Obwohl nicht immer besser, kann die Verwendung einer SVG 60% der Dateigrösse einsparen.
In diesem Fall sind diese Icons jeweils etwa 1,2k gross, also recht klein. Sie würden wahrscheinlich unter dem Radar der Site Speed Audits fliegen (und weder Page Speed Insights noch GTMetrix erwähnen diese Bilder überhaupt für diese Seite).
Sie denken vielleicht: «Sie sind zusammen weniger als 5k – Sie sollten sich nach grösseren Themen umsehen», aber schauen wir uns das mal an. Zunächst einmal können wir sie alle durch Jake Archibalds SVG-Komprimierungstool laufen lassen; dies ist ein grossartiges kostenloses Tool, und bei grösseren SVGs kann es einen grossen Unterschied machen.
In diesem Fall sind die Dateien klein, so dass Sie vielleicht immer noch denken: «Wozu die Mühe? Das Tool komprimiert sie ohne Qualitätsverlust von ~1240 Bytes auf ~630 Bytes – ein gutes Verhältnis, aber keine grosse Gesamteinsparung.
Wie auch immer… jetzt, wo wir sie komprimiert haben, können wir anders darüber nachdenken, sie zu liefern…
GTMetrix gibt Empfehlungen zum Einfügen kleiner Teile von CSS oder JS, erwähnt aber nicht das Einfügen von Bildern. Bilder können auch eingefärbt werden, und manchmal kann dies der richtige Ansatz sein.
Wenn man bedenkt, dass selbst eine sehr kleine Bilddatei einen kompletten Round-Trip erfordert (was einen sehr realen Einfluss auf die Geschwindigkeit haben kann), kann dies selbst bei kleinen Dateien lange dauern. Im Fall der obigen Cineworld-Transportbilder habe ich eine «Schnelle 3G»-Verbindung simuliert und gesägt:
Die Site verwendet kein HTTP2, so dass es eine lange Wartezeit gibt, und dann dauert es fast 600 ms, bis das Bild (das 1,2kb gross ist) geladen ist (kein HTTP2 bedeutet auch, dass dies andere Anfragen blockiert). Es gibt drei dieser Bilder, so dass sie sich zwischen ihnen auf die Geschwindigkeit der Seite auswirken können.
Wir haben sie jetzt jedoch auf nur ein paar hundert Bytes pro Bild komprimiert, und SVG-Bilder bestehen in Wirklichkeit aus Markup, ähnlich wie HTML:
Sie können SVG-Markup sogar direkt in ein HTML-Dokument einfügen!
Wenn wir dies mit allen drei Transportbildern tun, erhöht sich das komprimierte HTML für diese Seite, das vom Server an unseren Browser gesendet wird, von 31.182 Bytes auf 31.532 Bytes – eine Zunahme von nur 350 Bytes für alle 3 Bilder!
Also, um zusammenzufassen:
Einige von Ihnen haben vielleicht bemerkt, dass die Bilder, wenn sie nicht inline sind, separat zwischengespeichert werden können, so dass zukünftige Seitenabrufe nicht erneut abgerufen werden müssen. Aber wenn wir bedenken:
Zum Mitnehmen: Überlegen Sie, wo es Möglichkeiten gibt, SVGs anstelle von PNGs zu verwenden.
Dank der Vorherrschaft von JavaScript-Bibliotheken, die eine Standardlösung bieten, finde ich heutzutage so oft, dass JavaScript für Funktionen verwendet wird, die ohne JavaScript erreicht werden könnten. Mehr JS-Bibliotheken bedeuten mehr zum Herunterladen, vielleicht mehr Hin- und Rückfahrten für zusätzliche Dateien vom Server, und dann die JavaScript-Ausführungszeit und -kosten selbst.
Ich habe viel Verständnis dafür, wie Sie zu diesem Punkt kommen. Entwickler erhalten oft schlechte Anweisungen/Spezifikationen, die nichts über die Leistung, sondern nur über die Funktion aussagen. Sie sind oft zeitarm, und so kann es leicht passieren, dass sie am Ende einfach etwas hineinwerfen.
Hinsichtlich der Funktionalität, die mit HTML und/oder CSS erreicht werden kann, sind jedoch grosse Fortschritte erzielt worden. Sehen wir uns einige Beispiele an.
Dropdown-Boxen, die über eine Textsuchoption verfügen, sind heutzutage ein ziemlich verbreitetes Schnittstellenelement. In einem neueren Artikel, auf den ich gestossen bin, wurde beschrieben, wie man die Javascript-Bibliothek Select2 verwendet, um eine solche Liste zu erstellen:
Sie ist ein nützliches UI-Element und kann Ihren Benutzern helfen. In der Select2-Bibliothek befindet sich jedoch eine JavaScript-Bibliothek, die sich wiederum auf einige CSS und die JQuery-Bibliothek stützt. Das bedeutet drei Hin- und Rückfahrten, um eine Menge Dateien unterschiedlicher Grössen zu sammeln:
Dies ist nicht ideal für die Geschwindigkeit der Website, aber wir könnten sicherlich dafür plädieren, dass es sich lohnt, um für die Benutzer eine gestraffte Oberfläche zu haben.
Es ist jedoch tatsächlich möglich, diese Funktionalität mit dem HTML-Datalist-Element «out of the box» zu haben:
Dadurch kann der Benutzer die Liste durchsuchen oder seine eigene Antwort frei eingeben, so dass dieselbe Funktionalität zur Verfügung steht. Ausserdem hat es eine native Schnittstelle auf Smartphones!
Sie können dies in diesem Codepen in Aktion sehen.
LonelyPlanet hat eine schöne Website, und ich habe mir diese Seite über Spanien angesehen, die einen ‹Weiterlesen›-Link hat, der den meisten Web-Benutzern bekannt sein dürfte:
Wie bei fast jeder Implementierung, die ich sehe, haben sie eine JavaScript-Bibliothek verwendet, um dies zu implementieren, und wieder einmal ist dies mit einem Haufen Overhead verbunden.
HTML hat jedoch ein Paar eingebaute Tags namens Details und Zusammenfassung, die genau diese Funktionalität implementieren sollen. Kostenlos und nativ in HTML. Ohne Overheads und leichter zugänglich für Benutzer, die einen Bildschirmleser benötigen, während gleichzeitig die semantische Bedeutung an Google übermittelt wird.
Diese Tags können auf verschiedene flexible Weise mit CSS gestaltet werden und bilden die meisten der JS-Versionen nach, die ich da draussen gesehen habe.
Weitere Beispiele für Funktionen, die Sie mit HTML statt JS erreichen können, finden Sie unter diesen Links:
Zum Mitnehmen: Untersuchen Sie die Funktionalität Ihrer Sites und sehen Sie, wo es Möglichkeiten gibt, Ihre Abhängigkeit von grossen Javascript-Bibliotheken zu reduzieren, wenn es native HTML/CSS-Optionen gibt.
Zum Mitnehmen: Denken Sie daran, dass nicht nur die Grösse der JS-Dateien problematisch ist, sondern auch die Anzahl der erforderlichen Rundreisen.
Hinweis: Es gibt Fälle, in denen Sie die JS-Lösung verwenden sollten, aber es ist wichtig, die Vor- und Nachteile abzuwägen.
Jedes Mal, wenn der Browser Ressourcen von einem Server sammeln muss, muss er eine Nachricht über das Internet und zurück senden; die Geschwindigkeit ist durch die Lichtgeschwindigkeit begrenzt. Es mag lächerlich klingen, sich damit zu beschäftigen, aber es bedeutet, dass selbst kleine Anfragen den Seitenaufbau verlängern. Falls Sie den obigen Link nicht mitbekommen haben, wird dieses Thema in meinem Beitrag zur Erläuterung von HTTP2 ausführlicher behandelt.
Es gibt einige Dinge, die wir tun können, um entweder die Entfernung dieser Anfragen zu verringern oder um die Anzahl der erforderlichen Rundreisen zu reduzieren. Diese sind etwas technischer, können aber einige echte Gewinne erzielen.
TLS (oder SSL) ist die Verschlüsselungstechnologie, die zur Sicherung von HTTPS-Verbindungen verwendet wird. In der Vergangenheit wurden zwei Hin- und Rückwege zwischen dem Browser und dem Server benötigt, um diese Verschlüsselung einzurichten – wenn der Benutzer 50 ms vom Server entfernt ist, bedeutet dies 200 ms pro Verbindung. Denken Sie daran, dass Google in der Vergangenheit empfohlen hat, 200 ms anzustreben, um den HTML-Code zu liefern (dies scheint in neueren Aktualisierungen etwas gelockert zu sein); Sie verlieren hier eine Menge dieser Zeit.
Der vor kurzem definierte TLS 1.3-Standard reduziert dies von zwei Roundtrips auf nur einen, was den Nutzern wertvolle Zeit bei der ersten Verbindung zu Ihrer Website ersparen kann.
Sprechen Sie mit Ihrem technischen Team über die Migration auf TLS 1.3; Browser, die den TLS 1.3-Standard nicht unterstützen, werden ohne Probleme auf TLS 1.2 zurückgreifen. All dies geschieht hinter den Kulissen und ist keine Migration irgendwelcher Art. Es gibt keinen Grund, dies nicht zu tun.
Wenn Sie ein CDN benutzen, dann kann es so einfach sein, es einfach einzuschalten.
Sie können dieses Tool verwenden, um zu überprüfen, welche Versionen von TLS Sie aktiviert haben.
In den letzten 2-3 Jahren haben wir gesehen, wie eine Reihe von Sites von HTTP 1.1 auf HTTP 2 umgestiegen sind. Dies ist ein Upgrade hinter den Kulissen, das eine echte Verbesserung der Geschwindigkeit bewirken kann (siehe meinen Link oben, wenn Sie mehr darüber lesen möchten).
Direkt dahinter verbirgt sich ein aufkommendes Normenpaar, bekannt als QUIC + HTTP/3, das die Verbindung zwischen Browser und Server weiter optimiert und die erforderlichen Round-Trips weiter reduziert.
Die Unterstützung dafür steht erst am Anfang, aber wenn Sie ein CloudFlare-Kunde sind, können Sie heute und in den kommenden 6 Monaten, wenn die Unterstützung für Chrome und Firefox eingeführt wird, Ihren Benutzern einen Geschwindigkeitsschub geben.
Wenn sich Benutzer mit Ihrer Website verbinden, müssen sie von überall her Netzwerkverbindungen zu Ihren Servern (oder Ihrem CDN) öffnen. Wenn Sie sich das Internet als eine Reihe von Strassen vorstellen, dann könnten Sie sich vorstellen, dass sie über diese Strassen zu Ihrem Server «fahren» müssen. Das bedeutet jedoch Stau und Verkehrsbehinderungen.
Wie sich herausstellt, haben einige der grossen Cloud-Firmen ihre eigenen privaten Strassen, die weniger Schlaglöcher, weniger Verkehr und verbesserte Geschwindigkeitsbegrenzungen haben. Wenn nur Ihre Website-Besucher Zugang zu diesen Strassen bekämen, könnten sie schneller zu Ihnen «fahren»!
Nun, raten Sie mal? Sie können es!
Für CloudFlare bieten sie diesen Zugang über ihr Argo-Produkt an, während Sie, wenn Sie überhaupt AWS nutzen, ihren Global Accelerator verwenden können. Dies ermöglicht es Anfragen an Ihre Website, deren private Netzwerke zu nutzen und einen potentiellen Geschwindigkeitsschub zu erhalten. Beides ist sehr günstig, wenn Sie bereits Kunde sind.
Zum Mitnehmen: Viele dieser Vorteile sind wesentlich einfacher zu bekommen, wenn Sie ein CDN benutzen. Wenn Sie nicht bereits ein CDN nutzen, dann sollten Sie es wahrscheinlich tun. CloudFlare ist eine gute Wahl, ebenso wie CloudFront, wenn Sie AWS verwenden. Fast Fast ist die am besten konfigurierbare von ihnen, wenn Sie eher ein Profi sind.
Zum Mitnehmen: TLS 1.3 wird jetzt sehr breit unterstützt und bietet eine erhebliche Geschwindigkeitsverbesserung für neue Verbindungen.
Zum Mitnehmen: QUIC / HTTP3 werden gerade erst unterstützt, aber in den kommenden Monaten wird dies in grösserem Umfang eingeführt. QUIC umfasst sowohl die Vorteile von TLS 1.3 als auch mehr. Eine typische HTTP2-Verbindung benötigt heutzutage 3 Roundtrips zum Öffnen; QUIC benötigt nur einen!
Zum Mitnehmen: Wenn Sie mit CloudFlare oder AWS arbeiten, dann besteht die Möglichkeit, Geschwindigkeitssteigerungen zu erzielen, indem Sie einfach einen Schalter umlegen, um intelligente Routing-Funktionen zu aktivieren.
Oben habe ich darüber gesprochen, wie HTML eingebaute Funktionen hat, die Sie nutzen können, um sich nicht mehr auf Lösungen verlassen zu müssen, die «hausgemacht» sind und daher mehr Code (und Verarbeitung auf der Browserseite) zur Implementierung erfordern. Hier werde ich über einige Beispiele sprechen, bei denen CSS das Gleiche für Sie tun kann.
Häufig finden Sie Seiten, die an mehreren Stellen auf der Seite ähnliche Bilder verwenden. Zum Beispiel Variationen eines Logos in verschiedenen Farben oder Pfeile, die in beide Richtungen zeigen. Als einzigartige Assets (so ähnlich sie sich auch sein mögen) muss jedes davon separat heruntergeladen werden.
Zurück zu meiner Jagd nach Kinokarten oben, wo ich mir diese Seite angesehen habe, sehen wir ein Karussell mit Pfeilen nach links und rechts:
Ähnlich wie bei der oben verwendeten Logik sind diese Bilddateien zwar klein, aber sie müssen dennoch hin und zurück vom Server geholt werden.
Die Pfeile sind jedoch identisch – sie zeigen nur in entgegengesetzte Richtungen! Es ist für uns einfach, die CSS-Transformationsfunktionalität zu nutzen, um ein Bild für beide Richtungen zu verwenden:
Sie können sich dieses Codepen als Beispiel ansehen.
Ein anderes Beispiel ist, wenn dasselbe Logo in verschiedenen Stilen auf verschiedenen Teilen der Seite erscheint; oft werden mehrere Variationen geladen, was nicht notwendig ist. Mit CSS können Logos für Sie auf verschiedene Weise umgefärbt werden:
Es gibt hier einen Codepen, der diese Technik in Aktion zeigt. Wenn Sie den CSS-Filterwert berechnen möchten, der erforderlich ist, um eine beliebige Farbe zu erreichen, dann schauen Sie sich diesen erstaunlichen Farbrechner an.
Häufig sind Navigationselemente wie Menüs und Registerkarten in JavaScript implementiert, aber auch diese können in reinem CSS ausgeführt werden. Sehen Sie sich dieses Codepen für ein Beispiel an:
Mit CSS3 wurden viele leistungsstarke Animationsfunktionen in CSS eingeführt. Oft sind diese nicht nur schneller als JavaScript-Versionen, sondern können auch flüssiger sein, da sie im nativen Code des Betriebssystems laufen können, anstatt relativ langsameres Javascript ausführen zu müssen.
Sehen Sie sich Dozing Bird als ein Beispiel an:
Sie können in diesem Artikel noch viel mehr finden. CSS-Animationen können den Seiten bei relativ geringen Leistungskosten viel Charakter verleihen.
Weitere Beispiele für Funktionalitäten, die Sie mit reinen CSS-Lösungen erreichen können, finden Sie hier:
http://youmightnotneedjs.com/
https://dev.to/ananyaneogi/css-can-do-that-18g7m
Zum Mitnehmen: Verwenden Sie CSS, um mithilfe von Rotationen oder Filtern zu optimieren, wie viele Dateien Sie laden müssen.
Zum Mitnehmen: CSS-Animationen können den Seiten Charakter verleihen und benötigen oft weniger Ressourcen als JavaScript.
Zum Mitnehmen: CSS ist perfekt geeignet, um viele interaktive UI-Elemente zu implementieren.
Ich hoffe, dass Sie diese Beispiele an sich nützlich gefunden haben, aber der umfassendere Punkt, auf den ich hinweisen möchte, ist, dass wir alle versuchen sollten, in Bezug auf die Geschwindigkeit der Website etwas mehr über den Tellerrand hinauszuschauen. Von besonderer Bedeutung ist die Verringerung der Anzahl der erforderlichen Hin- und Rückfahrten zum Server; selbst kleine Assets benötigen einige Zeit zum Abholen und können sich spürbar auf die Leistung (insbesondere bei mobilen Geräten) auswirken.
Es gibt noch viel mehr Ideen, als wir hier behandelt haben, also springen Sie bitte in die Kommentare, wenn Sie auf andere Dinge gestossen sind.
© 2012-2024, MIK Group GmbH | AGB | Impressum | Datenschutzerklärung
