Sådan opbygges hurtigere websteder

Jan 30, 2026
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 !

hvordan - Mest populære artikler

Sådan tegner du en person

hvordan Jan 30, 2026

Uanset hvilken slags kunstner du er, forstå, hvordan man tegner en person, er en grundlæggende færdighed. Master den menneskelige form, og når det er p..

Forbered et bord til maleri i 3 nemme trin

hvordan Jan 30, 2026

Jeg skal dele den hurtigste maleri teknik Jeg bruger til 'Gessoing' et panel og får en glat finish. Det her ..

Reglerne for lydhør web typografi

hvordan Jan 30, 2026

Responsive Web Typografi er hård - du skal have både design koteletter og teknisk knowhow. Men dog vanskelig, det kan være, at få det forkert, er ikke en mulighed, fordi typografi er hjø..

Opret en realistisk fantasy ridder

hvordan Jan 30, 2026

I denne workshop vil vi vise dig, hvordan du maler en ridder ved hjælp af Photoshop. , såvel som maleri med trad..

Sådan prototype En mobilapp med Adobe XD

hvordan Jan 30, 2026

Denne vejledning, der viser dig, hvordan du laver en mobilapprototype i Adobe XD, blev sat sammen ved hjælp af ..

Hemmelighederne for at opfylde en kreativ design brief

hvordan Jan 30, 2026

En af mine vejledere fortalte mig engang, at hvis han var låst op i fængslet for resten af ​​sit liv, med intet andet end en pen og papir, ville han ikke skrive en ting, bortset fra må..

Opret sensationelle solnedgange i Photoshop

hvordan Jan 30, 2026

En smuk solnedgang er sådan en ting, der spekulerer på, at nogen med et kamera føles næsten pligt - bundet til at fange det. ..

Sådan opretter du et animeret webbanner i Photoshop

hvordan Jan 30, 2026

At skabe webbannere er ikke de mest glamourøse job i verden, men det er noget, som hver designer vil blive forpligtet til at gøre på et tidspunkt i deres karriere, sandsynligvis mange gang..

Kategorier