Maschinell aus dem englischen Original übersetzt · Original ansehen
Website-Philosophie
Einleitung
Die Datenverarbeitung hat in den letzten Jahrzehnten enorme Fortschritte gemacht, aber was mich verblüfft, ist, wie unglaublich ineffizient die Dinge am Ende geworden sind. Weil die Leistung so hoch und der Speicher so günstig ist, ist Software mit totem Code aufgebläht worden, der nie verwendet wird, oder schlimmer noch mit Ressourcen, die verschwendet werden. Ich finde, die besten Beispiele sind, wenn moderne Software länger zum Laden braucht, mit Hardware, die 100-mal leistungsfähiger ist als das, was vielleicht 2 Jahrzehnte zuvor existierte
Das Web ist einer der größten Übeltäter, wobei JavaScript der Schuldige ist. Webseiten laden manchmal mehr als 10 Megabyte an Inhalten, nur um einen einfachen Blogartikel mit jemandem zu teilen. Bilder sind unkomprimiert, mehrere schwere Tracker laufen im Hintergrund, und viele Funktionen werden geladen, die nie verwendet werden. Das verschlechtert das Nutzererlebnis, verursacht unnötigen Netzwerkverkehr, verschwendet Energie und ist im Allgemeinen schlechte Praxis. Die schmutzige verborgene Wahrheit hinter der schicken Designer-Oberfläche der meisten Webseiten
Mein Bestreben mit dieser Website ist es also zu zeigen, wie weit die Dinge gehen können, wenn die Technik einfach gehalten wird.
Die Technik
Diese Website wurde mit Hugo gebaut und liefert statische Dateien, wo immer es möglich ist
Das Stylesheet ist handgeschrieben und enthält nur die Teile, die diese Website tatsächlich verwendet. Minifiziert und komprimiert kommt es auf etwa 5 kb, und die gesamte Startseite, Markup und Styles und Analytik zusammen, kommt mit unter 10 kb an
Die Analytik läuft über eine selbstgehostete Instanz von Plausible, die dem Browser nur 1 kb hinzufügt
Die statischen Dateien kommen direkt von einem einzigen kleinen Server, im Voraus mit Brotli komprimiert, sodass nichts pro Anfrage komprimiert wird
Selbst die kleinen Feinheiten sind so gemacht, dass sie fast nichts kosten. Die Farbe, die sich mit der Jahreszeit und der Stunde verschiebt, fügt dem zwischengespeicherten Stylesheet etwa ein halbes Kilobyte hinzu. Der Mond fügt jeder Seite rund zweihundert Bytes hinzu. Beide werden mit Verläufen statt mit Bildern gezeichnet, sodass sie einen Download ersetzen, statt einen hinzuzufügen
Die Akzentfarbe hier ist nicht fest. Sie verschiebt sich mit dem Kalender und der Uhr: der Monat legt einen Grundfarbton fest (Frühling neigt zu Magenta, Sommer zu Grün, Herbst zu Orange, Winter zu Violett) und die Tageszeit tönt ihn (warmes Gelb im Morgengrauen, keine Tönung mittags, Indigo in der Dämmerung, Blau in der Nacht). Jede Kombination wird angepasst, damit sie lesbar bleibt, und sie kostet keine zusätzliche Anfrage, nur die Handvoll Bytes, die die Palette enthaltenFarbwechsel
Wähle einen Monat und eine Tageszeit, und die ganze Seite färbt sich um. Ein Neuladen bringt sie zurück auf jetzt
Im Dunkelmodus sitzt ein schwacher Mond in der oberen Ecke. Es ist kein Bild: es sind zwei Verläufe und eine Maske, sodass es keine Anfrage kostet. Seine Fülle folgt der echten Mondphase, berechnet aus dem Datum, denn der Mondmonat beträgt feste 29,53 Tage, sodass die Phase reine Arithmetik ist. Er zieht mit der Stunde in einem Bogen über die Kopfzeile, sinkt tief in die Seite und verschwindet für ein paar Stunden um die Mittagszeit, so wie es der echte Mond tutDer Mond
Schau in einer klaren Nacht nach oben, und er sollte mehr oder weniger passen. Die Phase und die Position zusammen sind etwa zweihundert Bytes im selben Kopfskript, das die Farbe festlegt
Zieh, um ihn zu steuern. Im Dunkelmodus folgt der schwache Eckmond mit, und ein Neuladen bringt ihn zurück auf jetzt
Leistungsoptimierungen
Die Seite klein zu halten ist nur die Hälfte davon. Die Website ist auf jeder Ebene zwischen der Datei und dem Bildschirm abgestimmt: wie die Dinge gebaut und komprimiert werden, wie sie zwischengespeichert werden und wie die Verbindung selbst aufgebaut ist. Fast die gesamte Arbeit geschieht einmal, im Voraus, sodass ein Besucher kaum etwas davon bezahlt
Jede Textdatei wird einmal beim Bau der Website komprimiert, mit den stärksten Brotli- und Gzip-Einstellungen, und beide Kopien werden ausgeliefert. Der Server übergibt die fertige komprimierte Datei, sodass für jeden Besucher nichts erneut komprimiert wird. Dateien unter etwa 256 Bytes werden in Ruhe gelassen, da eine komprimierte Kopie von etwas so Kleinem nur größer herauskäme. Stylesheets und Skripte werden mit einem Hash ihres eigenen Inhalts benannt und ein Jahr lang zwischengespeichert, sodass ein Browser jedes einmal abruft und sich der Name nur ändert, wenn sich die Datei ändert. Selbst das Website-Icon wird direkt in die Seite geschrieben, statt als separate Datei abgerufenAufbau und Auslieferung
Die Dateien kommen von einem einzigen kleinen Server ohne CDN davor, sodass die Verbindung darauf abgestimmt ist, diesen Ursprung schnell zu machen. Er spricht sowohl HTTP/2 als auch HTTP/3 über QUIC. Ein wiederkehrender Besucher setzt die verschlüsselte Sitzung aus einem Ticket fort, statt den vollen Handshake zu wiederholen, was die größte Ersparnis von allen ist. Das Sicherheitszertifikat wird in zwei Formen ausgestellt, RSA und ECDSA, sodass jedem Browser das schnellere übergeben wird, das er verwenden kann. Die Komprimierung am Proxy ist absichtlich auf eine mittlere Stufe statt auf das Maximum gesetzt: das Maximum wurde mit rund 44 Millisekunden pro Anfrage für ein paar hundert Bytes gemessen, ein schlechter Handel ohne CDN, das es abfedern könnte, und die im Voraus gebauten Dateien tragen bereits die stärkste Einstellung. Eine Abkürzung, 0-RTT, wurde bewusst ausgeschaltet gelassen, da ihr Replay-Risiko die kleine Ersparnis nicht wert ist. Links, die du wahrscheinlich als Nächstes öffnest, werden leise im Voraus abgerufen, sodass die folgende Seite sofort erscheintDie Verbindung
Das CSS ist handgeschrieben und enthält nur die Teile, die die Website tatsächlich verwendet. Das Styling für das Kommentarfeld liegt in einer separaten Datei, die nur lädt, wenn jemand die Kommentare öffnet, sodass es dem ersten Rendern nie im Weg steht. Das eigene Stylesheet des Kommentarsystems, rund 14 kb, wurde früher bei jedem Laden der Kommentare unkomprimiert von seinem Server abgerufen; es ist jetzt in dieselbe zwischengespeicherte und komprimierte Datei eingefaltet. Kleine Feinheiten wie der Aufklapp-Pfeil werden mit CSS-Formen statt mit eingebetteten Bildern gezeichnetDas Stylesheet
Es gibt fast keins, und das wenige, das existiert, bleibt im Hintergrund. Die Analytik lädt erst, nachdem die Seite fertig ist, sodass sie nie etwas verzögert, was ein Besucher sieht. Das eine kleine Inline-Skript ist absichtlich vor dem Stylesheet platziert, sodass es nicht auf das Eintreffen des CSS warten muss. Kommentare laden nur auf Anfrage, per Klick, es sei denn, du bist bereits angemeldet. Icons werden einmal in ein verstecktes Sprite gezeichnet und von dort referenziert, statt bei jeder Verwendung wiederholtJavaScript
Jedes Bild wird in mehreren Größen vorbereitet, und der Browser wählt das, welches auf den Bildschirm passt. Alles unterhalb des sichtbaren Bereichs wartet, bis es in die Nähe gescrollt wird, und jedes Bild reserviert seine Breite und Höhe, sodass die Seite beim Laden nicht springt. Galerien zeigen ihr erstes Foto sofort und laden den Rest, während du weitergehst. Videos rufen nur ihre Metadaten ab, bis sie abgespielt werdenBilder
Jede neue Feinheit wird an dieselbe Regel gehalten: sie darf nur dann Bytes hinzufügen, wenn sie etwas Echtes hinzufügt, und wo immer möglich ersetzt sie einen Download, statt einen hinzuzufügen
Realität
Ich möchte nur klarstellen, dass dies kein überzeugendes Argument dafür sein soll, dass wir alle Stunden damit verbringen, uns über kleine Details zu ereifern. Unternehmen müssen Geld verdienen; es ist weder notwendig noch das größte Problem, das anzugehen ist. Ich hoffe, dass die Dinge eines Tages so effizient sein können wie MenuetOS