Hoe u snellere websites bouwen

Sep 10, 2025

Procedures

Voor zijn praten op Genereer Londen Op 21 september hebben we ingehaald Patrick Hamann , een webprestatie-ingenieur bij Snel , Wie is op een missie om voor iedereen een snellere web te bouwen.

Wat houdt jouw rol op?
Patrick Hamann: Fastly is een Edge Cloud-platform dat enkele van 's werelds grootste merken ondersteunt. Mijn rol richt zich voornamelijk op R & amp; D; Werken met teams binnen snel om client-side technologieën en webstandaarden te gebruiken om de prestaties en levering van onze producten te verbeteren en - het belangrijkste - de diensten van onze klanten. Sommige lopende projecten omvatten initiatieven rondom browserprestatiemonitoring, metrieken en servicemedewerkers.

Voordat je snel bij je bent, heb je tijd doorgebracht in zowel de voogd als de financiële tijden. Hoe benaderen ze webprestaties?
PH: Prestaties is niet langer een add-on of checklist-item na het implementeren. Het moet een constante inspanning zijn dat elke persoon in de organisatie van mening is, van ontwerp tot levering. Dit is iets dat deze nieuwsorganisaties zeer vroeg realiseerden, introduceren van praktijken zoals het bouwen van infrastructuur om de prestaties tegen concurrenten te meten en te vergelijken met betrekking tot de levering van inhoud over andere functies en het gebruik van technologieën zoals servicemedewerkers.

Wat is het grootste obstakel voor een snelle ervaring nu online?
PH: Eén woord: JavaScript. Ik denk dat ik dit enigszins moet uitwerken: het web staat op het hoogtepunt van een javascript-obesitascrisis. De gemiddelde webpagina levert nu ongeveer 500 kB van script. Script dat meer dan een seconde nodig heeft om gewoon te parseren - laat staan - op een laag aangedreven apparaat en groter dan vijf seconden om bij een staat te komen die de gebruiker kan communiceren met de pagina. Daarom is de enige manier om de gebruikerservaring van onze sites te verbeteren, om ons Javascript te meten, te optimaliseren en te verminderen - bovenal.

WebPageTest runs a free website speed test from multiple locations around the globe using real browsers and at real consumer connection speeds — WebpagetTest loopt een gratis website-snelheidstest van meerdere locaties over de hele wereld met behulp van echte browsers en bij echte consumentenverbindingssnelheden

Wat zijn je favoriete hulpmiddelen om de webprestaties te optimaliseren?
PH: Ik ben een sterke gelovige die je niet kunt optimaliseren wat je nog niet hebt gemeten. Dus mijn toolbox is zwaar gewogen tot meting en profileringstools. Voor synthetische meting zal ik altijd bereiken Webpagetest en browser ontwikkelaarstools (netwerk- en prestatieranes) eerst. Er gaat echter niets te beats meten van echte gebruikerservaringen (R.U.m), dus een goede kennis van de timing van de browserprestaties helpt ook.

Je hebt gewerkt aan een aantal zeer grote codebases. Wat zijn de uitdagingen van het werken op schaal?
PH: Tegen en groot, zou ik beweren dat een grote codebase de meeste problemen deelt die je in een kleiner zou vinden: het elimineren van ongebruikte CSS (een probleem dat ik denk dat het onopgelost is), caching, activa bouwen pijpleidingen en versies, enzovoort. Je krijgt ook meer 'bit rot' - beste praktijken die na verloop van tijd anti-patronen worden. Maar persoonlijk heb ik het grootste deel van de uitdagingen gevonden op schaal zijn mensenproblemen, niet technische. Ik moet nog werken in een grote organisatie die wordt beïnvloed door de wet van Conway.

Je noemt jezelf een progressieve versterkingstad. Wat is het over die aanpak die met je resoneert?
PH: In tegenstelling tot het populaire geloof, gebruiken onze gebruikers de producten die we in de echte wereld bouwen: een vol met niet-ideale browsomstandigheden en falen rond elke hoek. Progressive Enhancement stelt ons in staat om ervaringen op te bouwen die bij al onze gebruikers inclusief zijn en veerkrachtig zijn voor de mislukkingen van de echte wereld. Het is vrij eenvoudig: begin met de basis, geen 300KB JavaScript-bibliotheek waar je lokale Barista je over hebt verteld. We moeten de basis niet vergeten.

Wat ben je op dit moment enthousiast over in Frontend-ontwikkeling?
PH: Het web wordt bedreigd. Gebruikers brengen meer tijd door in de inheemse - en dus gewilde - app ervaart weg van de openheid van het web. Toch lijken we nog steeds sites te bouwen die 20 seconden duren en £ 1,20 per belasting kosten op mijn roamingverbinding, uiteindelijk onze gebruikers verder wegrijden.

Gelukkig zijn technologieën zoals servicemedewerker en bijbehorende API's hier om te helpen. Ik kan niet wachten op een nieuw tijdperk van snelle, veerkrachtige websites die nog steeds offline functioneren, kunnen mijn gegevens op de achtergrond synchroniseren en me op de hoogte stellen van updates. Sommige mensen noemen deze progressie 'Progressive Web Apps'. Ik geef de voorkeur aan de term '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 — In zijn gesprek bij Generate London Patrick Hamann zal de huidige, verleden en toekomstige best-praktijken voor het laden van activa in de browser onderzoeken

Wat kunnen mensen verwachten van je praten Genereer Londen
PH: Naar de buitenstaander, het dienen van een website lijkt vrij eenvoudig: stuur wat HTML en CSS naar beneden de draad, dan beslist de browser wat u vervolgens kunt doen. Er is echter veel onder de kap aan de gang, allemaal voor onze gebruikers.

Hoe bepaalt de browser welke Asset om volgende aan te vragen? Hoe kunnen we de waargenomen snelheid van onze websites meten? Hoe kunnen we moderne webplatformfuncties gebruiken om de prioriteit en snelheid van onze activa te beïnvloeden? Hopelijk zal mijn talk deze vragen en meer beantwoorden. Het publiek geven de tools om snellere, veerkrachtige ervaringen voor hun gebruikers te creëren.

Genereer Londen Op 21/22 september heeft 15 andere presentaties voor webanimaties, UX-strategie, prototyping, toegankelijkheid, responsieve CSS-componenten, en nog veel meer. Er zijn ook vier workshops om uit te kiezen op de dag voor de conferentie, maar tickets zijn zeer beperkt. Reserveer nu uw plek

Hoe u snellere websites bouwen

Procedures - Meest populaire artikelen

Hoe een lastige ontwerp op te lossen

SVG-filters toevoegen met CSS

Maak een flexibele carrouselcomponent

Grow Plants in Houdini

Hoe mythische wezens te ontwikkelen

Aan de slag met Sass

Maak een aangepaste stickerborstel in artslag

De Pro Guide to Creating 3D-texturen

Categorieën