4 tips om de prestaties van uw pagina te verbeteren

Feb 2, 2026

Procedures

Web-performance expert Henri Helvetica sitting with his laptop

Web Performance Analyst Henri Helvetica zal zijn pro-tips delen over het verhogen van de prestaties van uw site bij Genereer New York 2018. KRIJG NU

De prestaties worden eindelijk een groter deel van het gesprek in webdesign en ontwikkeling. Het kan echter nog steeds een uitdaging zijn om mensen daadwerkelijk de geweldige inhoud te laten consumeren die er is en een prestatie-aanpak op regelmatiger wordt aangenomen.

Gelukkig is Freelance Developer and Web-Performance Analyst Henri Helvetica (echte naam Henri Brisard), bij de hand om zijn toptips aan te bieden over de prestaties van uw site.

01. Stroeven om te meten

Helvetica suggereert dat u allereerst u moet zorgen. "Je kunt nooit verbeteren wat je niet meet," legt hij uit. "Nadat u uw metingen en gegevens hebt aangelegd, moet u erachter komen welke belangrijke elementen te meten. Je zou twee pagina's kunnen hebben die in negen seconden laden, maar men kan de viewport veel sneller hebben ingevuld, dus je hebt een betere gebruikerservaring.

"U moet meten wat belangrijk is in het laadproces voor uw site en uw commerciële onderneming. Denk na over wat belangrijk is voor uw gebruikers om mee te communiceren. Elke site heeft zijn eigen individuele behoeften."

Als hij eenmaal een pagina heeft gehad naar een paginabele lading, die hem helpt bij het ophalen van hoe en wanneer bepaalde items laden, is Helvetica's volgende stap meestal om Chrome Devtools op te warmen om precies te beoordelen wat er aan de hand is. Het is een voor de hand liggende keuze, omdat het daar is en het is gratis - je hoeft niet in een ander hulpmiddel te springen om te ontdekken waarom een pagina langzaam kan zijn. Toch gebruiken veel ontwikkelaars het nauwelijks. "Devtools is een beetje op een rookmelder," betoogt Helvetica. "Als er een brand is, zullen Devtools je vertellen. Het zal je tenminste laten zien waar de rook is. "

02. Verlies wat pagina Gewicht

Dan kijkt Helvetica naar de waterval, die verschillende kwesties zoals de grootte van een actief en de latentie die betrokken was bij het laden ervan aan te geven. Als de site bijvoorbeeld slecht formaatafbeeldingen bevat, ziet u bijvoorbeeld meestal een zeer lange waterval, wat een van de gemakkelijker pijnpunten is om snel op te pakken. Afbeeldingen zijn een van de grootste boosdoeners voor een slow-loading-site - een probleem dat redelijk gemakkelijk kan worden bevestigd. Omdat ze de grootste bron van gegevens zijn, zijn afbeeldingen ook de grootste bron van gegevensbesparingen.

"Ik zou altijd rekening houden met het gewicht van uw pagina", legt Helvetica uit. "Het maakt niet uit hoe je het snijdt, als je één afbeelding hebt die 3MB is, of zelfs drie afbeeldingen op 1 MB elk, ga je waarschijnlijk een uitdaging voor gebruikerservaring.

Web-performance expert Henri Helvetica coding on his laptop

"Die paginagwicht zal ook het slachtoffer van uw netwerk zijn, omdat een mobiel netwerk nooit echt kan worden voorspeld. Dus u wilt ervoor zorgen dat uw activa klein en geoptimaliseerd zijn voor de viewport, wat betekent dat u er geen kunt zien Desktop-maat activa op een mobiel apparaat. "

Helvetica beveelt ook luie laden aan, een techniek die het laden van een object vertraagt totdat het nodig is. "Niet alle gebruikers gaan het naar de bodem van een pagina," waarschuwt hij. "Heel vaak kunt u activa laden die nooit zichtbaar zijn. Het gebruik van luie lading zal zeer gunstig zijn omdat je op gegevens en batterijafvoer of geheugenbeheer bespaart. Als u de afbeelding niet laadt, krijgt u geen geheugen aan usurp op het apparaat. "

03. Zie hoe je stapelt

Nog een reden waarom Helvetica-gunsten Devtools is, is omdat het nu ook metrics zoals de eerste verf biedt (de tijd die nodig is voor de gebruiker om de eerste pixel van inhoud te zien) en de eerste zinvolle verf (de tijd die nodig is voor de primaire inhoud van de pagina om zichtbaar te maken ).

Dan is er de filmstrip (in Devtools of Performance Tool Webpagetest) die incrementele screenshots van de browser weergeven die een site weergeven, zodat je ziet hoe een pagina eruit ziet als het laadt. Door ze te onderzoeken, kunt u erachter komen welke activa werden geladen wanneer en het bekijken op manieren om sommigen van hen op een eerdere tijd in de tijdlijn te laden.

In Webpagetest - welke Helvetica prijst voor zijn inspirerende detailniveau - kunt u ook een video van de lading exporteren en de filmstrip vergelijken met die van een concurrent. "Zodra u de stippen hebt verbonden, kunt u onderzoeken hoe u de gebruikerservaring kunt verbeteren door deze activa sneller in de viewport te brengen", legt Helvetica uit.

04. Snijd de rommel

Helvetica benadrukt dat ontwerpbeslissingen ook een impact hebben op de prestaties, en dat uw eerste lading in het viewport idealiter niet zo snel mogelijk zou moeten zijn, maar ook zo rommelvrij mogelijk.

Om die reden moet u de reeks gebeurtenissen begrijpen die plaatsvinden om de eerste weergave van een webpagina te maken - het kritieke renderpad. Deze gebeurtenissen kunnen worden geoptimaliseerd door het vermijden van laadactiva die niet nodig zijn en door beslissingen te nemen over de selectie van weblettertypen en afbeeldingsindelingen.

"Zorg ervoor dat u uw SVGS zo complexiteitsvrij mogelijk houdt," suggereert Helvetica bij wijze van voorbeeld. "Dan heb je minder code wanneer je je SVG geeft. Ik hoor dit de hele tijd van ontwikkelaars. Ze krijgen een SVG van de ontwerpers en moeten het terugsturen omdat het van invloed zou zijn op de prestaties. "

Dit artikel is oorspronkelijk gepubliceerd in kwestie 303 van net, 's werelds best verkochte magazine voor webontwerpers en ontwikkelaars. Kopen uitgave 303 of Abonneer u op NET

Wil je verder inzicht in de snelheid van je site?

Henri Helvetica is giving his talk Planet of the APIs: A Tale of Performance & User Experience at Generate New York from 25 - 27 April 2018 — Henri Helvetica geeft zijn gespreksplaneet van de API's: een verhaal van Performance & Amp; Gebruikerservaring bij Generate New York van 25 - 27 april 2018

Als u geïnteresseerd bent om ervoor te zorgen dat uw pagina's Lightning Snel laadt, zorg er dan voor dat u een ticket voor Genereer New York Henri Helvetica zal de huidige tijd en zelfs experimentele praktijken in werking zijn in het meten van web-apps en het leveren van uitvoerende gebruikerservaringen, evenals het aanbieden van meer inzicht in metingen zoals eerste verf, zinvolle verf en tijd tot interactief.

Genereer New York vindt plaats van 25-27 april 2018. KRIJG NU

Gerelateerde artikelen:

7 Deskundige tips voor het spijkeren van webprestaties
3 Tophulpmiddelen voor het testen van webprestaties
Waarom webprestaties zich snel moeten voelen

4 tips om de prestaties van uw pagina te verbeteren

01. Stroeven om te meten

02. Verlies wat pagina Gewicht

03. Zie hoe je stapelt

04. Snijd de rommel

Wil je verder inzicht in de snelheid van je site?

Procedures - Meest populaire artikelen

Referentiebeelden gebruiken: 13 Essentiële tips voor artiesten

Het maken van toegankelijke webformulieren

Stijl een site met Sass

Gebruik Marmoset Toolbag om modellen in VR

Hoe een 2D-personage tot leven in VR

Haal je hoofd rond reageren met deze vijf factoren

Verf een klassieke sprookjescène met uitspreiding

Krijg de grip met de nat-in-natte schildertechniek

Categorieën