4 Tips til at forbedre din side ydelsen

Sep 12, 2025

hvordan

Web-performance expert Henri Helvetica sitting with his laptop

Web Performance Analyst. Henri Helvetica. vil dele sine pro tips om, hvordan du øger dit websteds præstationer på Generere New York. 2018. Få din billet nu .

Resultatet bliver endelig en større del af samtalen i webdesign og udvikling. Det kan dog stadig være en udfordring at få folk til faktisk at forbruge det store indhold, der er derude og vedtage en præstationsstrategi mere regelmæssigt.

Heldigvis er Freelance Developer og Web-Performance analytiker Henri Helvetica (ægte navn Henri Brisard) til rådighed for at tilbyde sine toptips om at suppe dit websteds ydeevne.

01. Forsøg at måle

Helvetica tyder på, at du først og fremmest skal sikre dig. "Du kan aldrig forbedre, hvad du ikke måler," forklarer han. "Når du har dine målinger og data, der er lagt ud, skal du finde ud af, hvilke vigtige elementer der skal måles. Du kunne have to sider, der indlæses på ni sekunder, men man kan få visningsporten i meget hurtigere, så du har en bedre brugeroplevelse.

"Du skal måle, hvad der er vigtigt i lastprocessen for dit websted og din kommercielle virksomhed. Tænk på, hvad der er vigtigt for dine brugere at interagere med. Hvert websted har sine egne individuelle behov."

Når han har haft et kig på en sidebelastning, som hjælper ham med at afhente, hvordan og når visse ting belastes, er Helvetica's næste trin normalt at skyde Chrome Devtools for at vurdere præcis, hvad der foregår. Det er et indlysende valg, fordi det er lige der, og det er gratis - du behøver ikke at hoppe ind i et andet værktøj for at forsøge at opdage, hvorfor en side kan være langsom. Men mange udviklere bruger næppe det. "Devtools er lidt som en røgdetektor," argumenterer Helvetica. "Hvis der er en ild, vil Devtools fortælle dig. Det vil i det mindste vise dig, hvor røgen er. "

02. Taber nogle sidevægt

Derefter ser Helvetica på vandfaldet, hvilket vil indikere forskellige problemer som størrelsen af et aktiv og den latens, der var involveret i at indlæse den. Hvis webstedet indeholder dårligt størrelse billeder, vil du f.eks. Ville normalt se et meget langt vandfald, hvilket er et af de lettere smertepunkter for hurtigt at afhente. Billeder er en af de største synder til et langsomt lastningssted - et problem, der kan løses ret let. Da de er den største kilde til data, er billeder også den største kilde til databesparelser.

"Jeg ville altid tage hensyn til din sidevægt," forklarer Helvetica. "Uanset hvordan du skærer det, hvis du har et billede, der er 3MB, eller endda tre billeder på 1MB hver, vil du sandsynligvis have en brugeroplevelse udfordring.

Web-performance expert Henri Helvetica coding on his laptop

"Denne side vægt vil også være offer for dit netværk, fordi et cellulært netværk aldrig virkelig kan forudsiges. Så du vil sikre, at dine aktiver er små og optimeret til visningsporten, hvilket betyder, at du ikke bør kunne se nogen desktop-størrelse aktiver på en mobil enhed. "

Helvetica anbefaler også doven indlæsning, en teknik, der forsinker indlæsningen af et objekt, indtil det er nødvendigt. "Ikke alle brugere skal gøre det til bunden af en side," advarer han. "Ofte kan du være laste aktiver, der aldrig vil blive set. At anvende doven belastning vil være meget gavnlig, fordi du sparer på data samt batteriafløb eller hukommelsesstyring. Hvis du ikke lægger billedet, vil du ikke have nogen hukommelse til USURP på enheden. "

03. Se, hvordan du stabler op

En anden grund Helvetica favoriserer Devtools er, fordi det nu også giver metrics som den første maling (den tid det tager for brugeren at se den første pixel indhold) og den første meningsfulde maling (den tid det tager for sidens primære indhold at blive synligt ).

Derefter er der filmstrip (enten i Devtools eller Performance Tool WebpageTest), der viser inkrementale skærmbilleder af browseren, der gengiver et websted, så du kan se, hvad en side ser ud, når den læser. Ved at undersøge dem kan du finde ud af, hvilke aktiver der blev lastet, når og se på måder at indlæse nogle af dem på et tidligere tidspunkt i tidslinjen.

I WebpageTest - Hvilke Helvetica roser for sit inspirerende niveau af detaljer - kan du også eksportere en video af belastningen og sammenligne filmstripet med en konkurrents. "Når du har tilsluttet prikkerne, kan du undersøge, hvordan du forbedrer brugeroplevelsen ved at bringe disse aktiver i visningsporten hurtigere," forklarer Helvetica.

04. Skær rodet

Helvetica fremhæver, at designbeslutninger har indflydelse på resultaterne også, og at din første belastning i visningsporten ideelt set ikke bare skal være så hurtig som muligt, men også som rodfri som muligt.

Af den grund skal du forstå de arrangementer, der finder sted for at gøre det oprindelige billede af en webside - den kritiske gengivelsesvej. Disse begivenheder kan optimeres ved at undgå indlæsningsaktiver, der ikke er nødvendige, og ved at træffe beslutninger omkring udvælgelsen af webfontakter og billedformater.

"Sørg for, at du holder dine SVG'er som kompleksitetsfri som muligt," antyder Helvetica som et eksempel. "Så har du mindre kode, når du gør din SVG. Jeg hører dette fra udviklere hele tiden. De får en SVG fra designere og nødt til at sende det tilbage, fordi det ville påvirke ydeevnen. "

Denne artikel blev oprindeligt offentliggjort i udstedelse 303 af netto, verdens bedst sælgende magasin for webdesignere og udviklere. Købe Udgave 303. eller Abonner på Net. .

Vil du have yderligere indsigt i at suppe dit websteds hastighed?

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 giver sin taleplanet af API'erne: En fortælling om Performance & Amp; Brugeroplevelse hos generere New York fra 25 - 27. april 2018

Hvis du er interesseret i at sikre, at dine sider lægger lynet hurtigt, skal du sørge for at få fat i en billet til Generere New York. . Henri Helvetica vil gennemføre nutidens og endog eksperimentelle praksis, der anvendes til måling af webapps, og tilvejebringelse af forestående brugeroplevelser, såvel som at tilbyde mere indsigt i målinger som første maling, meningsfuld maling og tid til interaktive.

Generer New York finder sted fra 25.-27. April 2018. Få din billet nu .

Relaterede artikler:

7 ekspert tips til negle web ydeevne
3 Topværktøj til test af web ydeevne
Hvorfor webpræstation skal føle sig hurtigt

4 Tips til at forbedre din side ydelsen

01. Forsøg at måle

02. Taber nogle sidevægt

03. Se, hvordan du stabler op

04. Skær rodet

Vil du have yderligere indsigt i at suppe dit websteds hastighed?

hvordan - Mest populære artikler

Sådan Download Instagram Photos: Alt du behøver at kende

Tilføj flersproget support til vinkel

Kom i gang med monotypeudskrivning

Mal et udtryksfuldt stilleben i akryl

Sådan oprettes tegneseriefigurer i Cinema 4D

Opret organiske teksturer i blæk

Sådan designer brugervenlige mobilgrænseflader

Top tips til at forfine dine hånddragte illustrationsteknikker

Kategorier