Hur man bygger snabbare webbplatser

Sep 11, 2025

Hur

Framför hans prat på Generera london den 21 september tog vi upp med Patrick hamnann , en webbprestanda ingenjör på Snabbt , vem är på uppdrag att bygga en snabbare webb för alla.

Vad innebär din roll att snabbt involveras?
Patrick Hamann: Snabbt är en Edge Cloud-plattform som grundar sig på några av världens största varumärken. Min roll fokuserar främst på R & Amp; D; Arbeta med lag inom snabbt för att utnyttja klientside-teknik och webbstandarder för att förbättra prestanda och leverans av våra produkter och - viktigast av allt - våra kunders tjänster. Några nuvarande projekt inkluderar initiativ kring övervakning av webbläsare, mätvärden och servicearbetare.

Innan du gick med i snabb, spenderade du tid på både vårdnadshavaren och de ekonomiska tiderna. Hur kom de till webbutveckling?
PH: Prestanda är inte längre en post-distribuera tillägg eller checklista. Det måste vara en konstant ansträngning att varje person i organisationen anser, från design genom till leverans. Det här är något som dessa nyheter organiserar mycket tidigt, introducerar praxis som att bygga övervakningsinfrastruktur för att mäta och jämföra prestanda mot konkurrenter, prioritera leverans av innehåll över andra funktioner och utnyttja teknik som servicearbetare.

Vad är det största hindret för en snabb erfarenhet online just nu?
PH: Ett ord: JavaScript. Jag antar att jag borde utarbeta det här något: webben är på toppen av en javascript fetma kris. Den genomsnittliga webbsidan levererar nu runt 500kb skript. Skript som tar mer än en sekund att bara analysera - än mindre exekvera - på en lågdriven enhet och större än fem sekunder för att komma till ett tillstånd som användaren kan interagera med sidan. Därför är det enda sättet att förbättra användarupplevelsen hos våra webbplatser att mäta, optimera och minska vår JavaScript - framför allt.

WebPageTest runs a free website speed test from multiple locations around the globe using real browsers and at real consumer connection speeds — WebPagetest kör ett gratis hemsida Speed-test från flera platser runt om i världen med hjälp av riktiga webbläsare och i riktiga konsumentanslutningshastigheter

Vilka är dina favoritverktyg för att optimera webbutveckling?
PH: Jag är en stark troende som du inte kan optimera vad du ännu inte har mätt. Så min verktygslåda är tungt viktat till mät- och profileringsverktyg. För syntetisk mätning, kommer jag alltid att nå för Webpagetest och Browser Developer Tools (Network and Performance-panes) först. Men ingenting slår också som mäter riktiga användarupplevelser (R.U.M), så en bra kunskap om webbläsarens prestanda Timing Apis hjälper också.

Du har jobbat med några mycket stora kodbaser. Vad är utmaningarna att arbeta i skala?
PH: I stort sett har jag argumenterat för att en stor kodbase delar de flesta problem som du skulle hitta i en mindre. Att eliminera oanvända CSS (ett problem som jag tycker är oupplöst), caching, tillgång bygger rörledningar och versionering, och så vidare. Du får också mer "bitrot" - bästa praxis blir anti-mönster över tiden. Men personligen har jag hittat de flesta av utmaningarna i skala är människor problem, inte tekniska. Jag är ännu inte att arbeta i en stor organisation som inte påverkas av Conways lag.

Du kallar dig själv en progressiv förbättringsförespråkare. Vad handlar det om det här tillvägagångssättet som resonerar med dig?
PH: I motsats till populär tro, använder våra användare faktiskt de produkter vi bygger i den verkliga världen: en full av icke-idealiska surfförhållanden och misslyckande runt varje hörn. Progressiv förbättring gör det möjligt för oss att bygga upp erfarenheter som är inkluderande för alla våra användare och är motståndskraftiga mot den verkliga världens misslyckanden. Det är ganska enkelt: Börja med grunderna, inte ett 300kb JavaScript-bibliotek som din lokala Barista berättade om. Vi borde inte glömma grunderna.

Vad är du upphetsad om i Frontend Development för tillfället?
PH: Webben är hotad. Användare spenderar mer tid i infödda - och sålunda siled-app-upplevelser bort från nätets öppenhet. Ändå verkar vi fortfarande vara byggplatser som tar 20 sekunder och kostar £ 1,20 per belastning på min roaminganslutning, som slutligen kör våra användare bort längre.

Lyckligtvis är tekniker som servicearbetare och tillhörande APIs här för att hjälpa. Jag kan inte vänta på en ny era av snabba, fjädrande webbplatser som fortfarande fungerar offline, kan synkronisera mina data i bakgrunden och meddela mig med uppdateringar. Vissa människor kallar denna progressions progressiva webbapps. Jag föredrar termen "The Web".

In his talk at Generate London Patrick Hamann will explore the current, past, and future best-practices for loading assets in the browser — I hans samtal vid Generate London Patrick kommer Hamann att utforska det aktuella, förflutna och framtida bästa praxis för lastningstillgångar i webbläsaren

Vad kan folk förvänta sig att lära av ditt samtal på Generera london ?
PH: Till outsider, som serverar en webbplats verkar ganska enkelt: skicka några HTML och CSS ner i ledningen Då bestämmer webbläsaren vad man ska göra nästa. Men mycket går mycket under huven, alla kommer till en kostnad för våra användare.

Hur bestämmer webbläsaren vilken tillgång att begära nästa? Hur kan vi mäta våra uppfattningar på våra webbplatser? Hur kan vi använda moderna webbplattformsfunktioner för att påverka prioriteringen och hastigheten på våra tillgångar? Förhoppningsvis kommer mitt samtal att svara på dessa frågor och mer. Ge publiken verktygen för att skapa snabbare, mer fjädrande upplevelser för sina användare.

Generera london Den 21-22 september har 15 andra presentationer som täcker webbanimationer, UX-strategi, prototypning, tillgänglighet, responsiv CSS-komponenter och mycket mer. Det finns också fyra workshops att välja mellan dagen före konferensen, men biljetter är mycket begränsade. Boka din plats nu !

Hur man bygger snabbare webbplatser

Hur - Mest populära artiklar

Mixed-Media Art Tutorial: Hur vattenfärg över digitalt konstverk

Hur man skapar vattensimuleringar

Hur man riggar ett ansikte för animering

Konvertera Flash-spel till html5

Bygg Cross-Platform-mobilappar med Googles fladder

Master Bridge Tool

brudgummen en oemotståndligt furig varelse

Hur man börjar med oljemålning

Kategorier