Sådan opbygges hurtigere websteder

Sep 16, 2025

hvordan

Forud for hans tale på Generere London. Den 21. september fangede vi med Patrick Hamann. , en web performance ingeniør på Hurtigt , hvem er på mission for at bygge en hurtigere web for alle.

Hvad involverer din rolle hurtigt?
Patrick Hamann: Hurtigt er en Edge Cloud platform, der understøtter nogle af verdens største mærker. Min rolle fokuserer overvejende på R & Amp; D; Arbejder med hold inden for hurtigt at udnytte klientsiden teknologier og webstandarder for at forbedre ydeevnen og leveringen af vores produkter og - vigtigst af alt - vores kunders tjenester. Nogle nuværende projekter omfatter initiativer omkring Browser Performance Monitoring, Metrics and Service Workers.

Før du sluttede sig hurtigt, brugte du tid på både Guardian og Financial Times. Hvordan kom de til at nærme sig webpræstationer?
PH: Performance er ikke længere en post-implementering add-on eller checkliste element. Det skal være en konstant indsats, at hver person i organisationen betragter, fra design til levering. Dette er noget, som disse nyhedsorganisationer realiserede meget tidligt, indfører praksis som at opbygge overvågningsinfrastruktur til måling og sammenligne præstationer mod konkurrenter, prioritere levering af indhold over andre funktioner og udnytte teknologier som servicearbejdere.

Hvad er den største hindring for en hurtig oplevelse online lige nu?
PH: Et ord: JavaScript. Jeg tror jeg skal uddybe dette lidt: nettet er på toppen af en JavaScript fedme krise. Den gennemsnitlige webside leverer nu omkring 500kb script. Script, der tager mere end et sekund til bare at analysere - endsige udfører - på en lavdrevet enhed og mere end fem sekunder for at komme til en tilstand, som brugeren kan interagere med siden. Derfor er den eneste måde at forbedre brugeroplevelsen af vores websteder til at måle, optimere og reducere vores JavaScript - frem for alt.

WebPageTest runs a free website speed test from multiple locations around the globe using real browsers and at real consumer connection speeds — WebpageTest kører en gratis hjemmesidehastighedstest fra flere steder rundt om i verden ved hjælp af rigtige browsere og på reelle forbrugerforbindelseshastigheder

Hvad er dine yndlingsværktøjer til at optimere web ydeevne?
PH: Jeg er en stærk troende, at du ikke kan optimere, hvad du endnu ikke har målt. Så min værktøjskasse er stærkt vejet til måling og profileringsværktøjer. For syntetisk måling, vil jeg altid nå frem til WebpageTest. og browser udvikler værktøjer (netværk og performance ruder) først. Imidlertid slår intet til at måle reelle brugeroplevelser (r.u.m), så et godt kendskab til browserens præstation timing API'er hjælper også.

Du har arbejdet på nogle meget store kodebaser. Hvad er udfordringerne ved at arbejde på skalaen?
PH: I det store og store vil jeg argumentere for, at en stor kodebase deler de fleste af de problemer, du ville finde i en mindre en: Eliminerer ubrugte CSS (et problem, jeg tror, er uløst), caching, Asset Build Pipelines og Versionering, og så videre. Du får også mere 'bit rot' - bedste praksis bliver anti-mønstre over tid. Men personligt har jeg fundet de fleste udfordringer på skalaen, er mennesker problemer, ikke tekniske. Jeg er endnu ikke på arbejde i en stor organisation, der ikke påvirkes af Conways lov.

Du kalder dig selv en progressiv forbedringsforstyrrelse. Hvad handler det om den tilgang, der resonerer med dig?
PH: I modsætning til den populære tro bruger vores brugere faktisk de produkter, vi bygger i den virkelige verden: en fuld af ikke-ideelle browsingforhold og svigt rundt om hvert hjørne. Progressiv forbedring gør det muligt for os at opbygge erfaringer, der er inkluderende for alle vores brugere og er modstandsdygtige over for de virkelige verdens fejl. Det er ret simpelt: Bare start med det grundlæggende, ikke et 300kb JavaScript-bibliotek, som din lokale barista fortalte dig om. Vi bør ikke glemme det grundlæggende.

Hvad er du begejstret for i Frontend Development i øjeblikket?
PH: Nettet er truet. Brugere bruger mere tid i indfødte - og dermed siled - app oplevelser væk fra åbenhed af internettet. Men vi synes stadig at være byggepladser, der tager 20 sekunder og koster £ 1,20 pr. Belastning på min roamingforbindelse, der i sidste ende kører vores brugere væk længere.

Heldigvis er teknologier som servicearbejder og tilhørende API'er her for at hjælpe. Jeg kan ikke vente på en ny æra af hurtige, modstandsdygtige websteder, der stadig fungerer offline, kan synkronisere mine data i baggrunden og underrette mig med opdateringer. Nogle kalder denne progression 'progressive web apps'. Jeg foretrækker udtrykket 'nettet'.

In his talk at Generate London Patrick Hamann will explore the current, past, and future best-practices for loading assets in the browser — I sin tale om generere vil London Patrick Hamann undersøge den nuværende, fortid og fremtidige bedste praksis for at indlæse aktiver i browseren

Hvad kan folk forvente at lære af din tale på Generere London. ?
PH: Til outsider, der serverer et websted, virker ret simpelt: Send nogle HTML og CSS ned ad tråden, og browseren beslutter, hvad de skal gøre næste gang. Men meget foregår faktisk under hætten, alle kommer til en pris til vores brugere.

Hvordan bestemmer browseren, hvad aktivet skal anmode om næste? Hvordan kan vi måle den opfattede hastighed på vores hjemmesider? Hvordan kan vi bruge moderne webplatformsfunktioner til at påvirke prioriteten og hastigheden af vores aktiver? Forhåbentlig vil min tale besvare disse spørgsmål og mere. Giver publikum værktøjerne til at skabe hurtigere, mere elastiske oplevelser for deres brugere.

Generere London. Den 21.-24. September har 15 andre præsentationer, der dækker web-animationer, UX-strategi, prototyping, tilgængelighed, lydhør CSS-komponenter og meget mere. Der er også fire workshops at vælge imellem dagen før konferencen, men billetter er meget begrænsede. Reserver dit sted nu !

Sådan opbygges hurtigere websteder

hvordan - Mest populære artikler

En guide til Googles Cloud Vision

Sådan implementeres lys eller mørke tilstande i CSS

Brug marmoset værktøjsbag til at præsentere modeller i VR

Level up din vr-kunst

Download filer til 3D World 232

En introduktion til frontendprøvning

Opret malerisk virkninger i Photoshop CC

Sådan laver du 3D-bogstaver i Illustrator

Kategorier