Maskinoversat fra den engelske original · Se originalen
Website-filosofi
Introduktion
Databehandling er nået utroligt langt gennem de seneste årtier, men én ting undrer mig: hvor forfærdeligt ineffektivt det hele er endt med at blive. Fordi ydeevnen er så høj og lagerplads så billig, er software blevet oppustet med død kode, der aldrig bruges, eller værre endnu ressourcer, der spildes. De bedste eksempler er efter min mening, når moderne software er længere om at indlæse på hardware, der er 100X kraftigere end det, som fandtes måske 2 årtier tidligere
Nettet er en af de værste syndere, og javascript er den skyldige. Websider indlæser undertiden mere end 10 megabyte indhold blot for at dele en simpel blogartikel med nogen. Billeder er ukomprimerede, flere tunge trackere kører i baggrunden, og der indlæses mange funktioner, som aldrig bliver brugt. Det forringer brugeroplevelsen, skaber unødig netværkstrafik, spilder energi og er generelt dårlig praksis. Den beskidte, skjulte sandhed bag de fleste websiders elegante designer-UI
Så min mission med dette website er at bevise, hvor langt man kan nå, når teknologien holdes simpel.
Teknikken
Dette website er bygget med Hugo og serverer statiske filer, hvor det er muligt
Stylesheetet er håndskrevet og indeholder kun de dele, siden faktisk bruger. Minificeret og komprimeret fylder det omkring 5 kb, og hele forsiden, markup og styles og analytics tilsammen, ankommer under 10 kb
Analytics klares med en selvhostet instans af Plausible, som kun tilføjer 1 kb i browseren
De statiske filer kommer direkte fra en enkelt lille server, brotli-komprimeret på forhånd, så intet komprimeres per forespørgsel
Selv de små detaljer er lavet til at koste næsten ingenting. Farven, der skifter med årstiden og timen, tilføjer omkring et halvt kilobyte til det cachede stylesheet. Månen tilføjer cirka to hundrede byte til hver side. Begge er tegnet med gradienter frem for billeder, så de erstatter et download i stedet for at tilføje et
Accentfarven her er ikke fast. Den skifter med kalenderen og uret: måneden sætter en grundtone (foråret hælder mod magenta, sommeren mod grøn, efteråret mod orange, vinteren mod lilla), og tidspunktet på dagen toner den (varm gul ved daggry, ingen ved middag, indigo i skumringen, blå om natten). Hver kombination er justeret, så den forbliver læsbar, og den koster ingen ekstra forespørgsel, kun de få byte, der rummer palettenFarveskift
Vælg en måned og et tidspunkt på dagen, og hele siden skifter farve. Genindlæsning bringer den tilbage til nu
I mørk tilstand sidder der en svag måne i det øverste hjørne. Det er ikke et billede: det er to gradienter og en maske, så den koster ingen forespørgsel. Dens fylde følger den virkelige månefase, udregnet ud fra datoen, fordi månemåneden er faste 29,53 dage, så fasen er ren aritmetik. Den buer hen over headeren med timen, går lavt ned i siden og forsvinder i nogle timer omkring middag, ligesom den rigtige måne gørMånen
Kig op en klar nat, og den bør nogenlunde passe. Fasen og positionen tilsammen fylder omkring to hundrede byte i det samme head-script, som sætter farven
Træk for at styre den. I mørk tilstand følger den svage måne i hjørnet med, og genindlæsning bringer den tilbage til nu
Ydelsesoptimeringer
At holde siden lille er kun det halve. Siden er finpudset i hvert lag mellem filen og skærmen: hvordan tingene bygges og komprimeres, hvordan de caches, og hvordan selve forbindelsen sættes op. Næsten alt arbejdet sker én gang, på forhånd, så en besøgende betaler for næsten intet af det
Hver tekstfil komprimeres én gang, når siden bygges, med de stærkeste brotli- og gzip-indstillinger, og begge kopier sendes med. Serveren udleverer den færdige komprimerede fil, så intet komprimeres igen for hver besøgende. Filer under omkring 256 byte lades i fred, da en komprimeret kopi af noget så lille kun ville blive større. Stylesheets og scripts navngives med et hash af deres eget indhold og caches i et år, så en browser henter hver af dem én gang, og navnet ændrer sig kun, når filen gør. Selv sidens ikon skrives direkte ind i siden i stedet for at blive hentet som en separat filBygning og levering
Filerne kommer fra en enkelt lille server uden CDN foran, så forbindelsen er tunet til at gøre den oprindelsesserver hurtig. Den taler både HTTP/2 og HTTP/3 over QUIC. En tilbagevendende besøgende genoptager den krypterede session ud fra en billet i stedet for at gentage hele håndtrykket, hvilket er den største besparelse af dem alle. Sikkerhedscertifikatet udstedes i to former, RSA og ECDSA, så hver browser får den hurtigste, den kan bruge. Komprimeringen i proxyen er sat til et middelniveau frem for maksimum med vilje: maksimum blev målt til omkring 44 millisekunder per forespørgsel for nogle få hundrede byte, en dårlig handel uden et CDN til at opsuge det, og filerne bygget på forhånd bærer allerede den stærkeste indstilling. En genvej, 0-RTT, er bevidst slået fra, da dens replay-risiko ikke er den lille besparelse værd. Links, du sandsynligvis åbner som de næste, hentes stille og roligt på forhånd, så den følgende side dukker op med det sammeForbindelsen
Css’en er håndskrevet og indeholder kun de dele, siden faktisk bruger. Stylingen til kommentarfeltet ligger i en separat fil, der kun indlæses, hvis nogen åbner kommentarerne, så den aldrig står i vejen for den første rendering. Kommentarsystemets eget stylesheet på omkring 14 kb blev tidligere hentet ukomprimeret fra dets server, hver gang kommentarerne indlæstes; det er nu foldet ind i den samme cachede og komprimerede fil. Små detaljer som udfoldningspilen er tegnet med css-former frem for indlejrede billederStylesheetet
Der er næsten ingen, og det lidt, der findes, holder sig af vejen. Analytics indlæses først, efter siden er færdig, så de aldrig forsinker noget, en besøgende ser. Det ene lille inline-script er med vilje placeret før stylesheetet, så det ikke skal vente på, at css’en ankommer. Kommentarer indlæses kun, når der bedes om dem, med et klik, medmindre du allerede er logget ind. Ikoner tegnes én gang ind i en skjult sprite og refereres derfra i stedet for at blive gentaget ved hver brugJavaScript
Hvert billede forberedes i flere størrelser, og browseren vælger den, der passer til skærmen. Alt under folden venter, indtil der scrolles i nærheden af det, og hvert billede reserverer sin bredde og højde, så siden ikke hopper, mens den indlæses. Gallerier viser deres første foto med det samme og indlæser resten, efterhånden som du går videre. Videoer henter kun deres metadata, indtil de afspillesBilleder
Hver ny detalje holdes op mod den samme regel: den må kun tilføje byte, hvis den tilfører noget reelt, og hvor den kan, erstatter den et download i stedet for at tilføje et
Virkeligheden
Jeg vil bare gøre klart, at dette ikke er ment som et overbevisende argument for, at vi alle skal bruge timer på at fiksere på små detaljer. Virksomheder er nødt til at tjene penge; det er hverken nødvendigt eller det største problem at tage fat på. Jeg håber, at tingene en dag kan være lige så effektive som MenuetOS