4 tips for å forbedre sidens ytelse

Feb 12, 2026
hvordan
Web-performance expert Henri Helvetica sitting with his laptop
[1. 3]

Web Performance Analyst Henri Helvetica. vil dele sine pro tips om hvordan du øker nettstedets ytelse på Generer New York. 2018. Få din billett nå .

Ytelsen blir endelig en større del av samtalen i webdesign og utvikling. Det kan imidlertid fortsatt være en utfordring å få folk til å faktisk konsumere det store innholdet som er der ute og vedta en ytelses tilnærming på en mer regelmessig basis.

Heldigvis er freelance utvikler og web-ytelsesanalytiker Henri Helvetica (ekte navn Henri Brisard), til stede for å tilby sine topp tips om suppe opp nettstedets ytelse.

01. Endeavour å måle

Helvetica antyder at først og fremst må du sørge for at du måler. "Du kan aldri forbedre det du ikke måler," forklarer han. "Når du har målinger og data lagt ut, må du finne ut hvilke viktige elementer som skal måle. Du kan ha to sider som lastes på ni sekunder, men man kan ha visningsporten fylt mye raskere, så du har en bedre brukeropplevelse.

"Du må måle det som er viktig i lastprosessen for nettstedet ditt og din kommersielle bedrift. Tenk på hva som er viktig for brukerne å samhandle med. Hvert nettsted har sine egne individuelle behov."

Når han har en titt på en sidebelastning, som hjelper ham med å henter hvordan og når enkelte gjenstander lastes, er Helveticas neste trinn vanligvis å brenne opp krom-devtools for å vurdere nøyaktig hva som skjer. Det er et åpenbart valg, fordi det er der, og det er gratis - du trenger ikke å hoppe inn i et annet verktøy for å prøve å oppdage hvorfor en side kan være sakte. Likevel bruker mange utviklere knapt det. "Devtools er litt som en røykvarsler," hevder Helvetica. "Hvis det er brann, vil Devtools fortelle deg. Det vil i det minste vise deg hvor røyken er. "

02. Mist litt sidevekt

Så ser Helvetica på fossen, som vil indikere ulike problemer som størrelsen på en eiendel og latensen som var involvert i å laste den. Hvis nettstedet inneholder dårlig størrelse bilder, for eksempel, vil du vanligvis se en veldig lang foss, som er en av de enklere smertepunktene for raskt å plukke opp på. Bilder er en av de største skyldige for et slow-loading-nettsted - et problem som kan løses ganske enkelt. Når de er den største datakilden, er bilder også den største kilden til datasparing.

"Jeg vil alltid ta hensyn til sidevekten din," forklarer Helvetica. "Uansett hvordan du skjærer den, hvis du har ett bilde som er 3 MB, eller til og med tre bilder på 1 MB hver, vil du sannsynligvis ha en brukeropplevelsesutfordring.

Web-performance expert Henri Helvetica coding on his laptop

"Den sidevekten vil også være offeret for nettverket ditt, fordi et mobilnettverk aldri kan bli spådd. Så du vil sørge for at dine eiendeler er små og optimalisert for visningsporten, noe som betyr at du ikke skal kunne se noen Desktop-størrelse Eiendeler på en mobil enhet. "

Helvetica anbefaler også lat lasting, en teknikk som forsinker lastingen av et objekt til det er nødvendig. "Ikke alle brukere skal gjøre det til bunnen av en side," advarer han. "Ganske ofte kan du være lurer på eiendeler som aldri kommer til å bli sett. Å ansette lat belastning kommer til å være veldig gunstig fordi du sparer på data, så vel som batteridrevne eller minnehåndtering. Hvis du ikke laster bildet, kommer du ikke til å ha noe minne til usurp på enheten. "

03. Se hvordan du stabler opp

En annen grunn Helvetica favoriserer Devtools er fordi det nå også gir beregninger som den første maling (tiden det tar for brukeren å se den første pikselet av innhold) og den første meningsfulle maling (den tiden det tar for sidens primære innhold som skal bli synlige ).

Deretter er det filmstripen (enten i DevTools eller Performance Tool WebpageTest) som viser inkrementelle skjermbilder av nettleseren som gjør et nettsted, slik at du kan se hva en side ser ut når den laster. Ved å undersøke dem kan du finne ut hvilke eiendeler som ble lastet inn når og se på måter å laste noen av dem på en tidligere tid i tidslinjen.

I WebpageTest - som Helvetica roser for sitt inspirerende detaljnivå - kan du også eksportere en video av lasten og sammenligne filmstripen med en konkurrent. "Når du kobler prikkene, kan du utforske hvordan du forbedrer brukeropplevelsen ved å bringe disse eiendelene til visningsporten raskere," forklarer Helvetica.

04. Klipp rotet

Helvetica fremhever at designbeslutninger har en innvirkning på ytelsen også, og at din første belastning i visningsporten ideelt ikke bare bør være så rask som mulig, men også så rotfri som mulig.

Derfor må du forstå serien av hendelser som finner sted for å gjøre den første visningen av en nettside - den kritiske gjengivelsesbanen. Disse hendelsene kan optimaliseres ved å unngå belastningsmidler som ikke er nødvendige og ved å ta beslutninger rundt valget av webfonter og bildeformater.

"Pass på at du holder SVGS så kompleksitetsfrie som mulig," foreslår Helvetica ved hjelp av et eksempel. "Da har du mindre kode når du gjør din SVG. Jeg hører dette fra utviklere hele tiden. De får en SVG fra designerne og må sende den tilbake fordi det ville påvirke ytelsen. "

Denne artikkelen ble opprinnelig publisert i utgave 303 i Net, verdens bestselgende magasin for webdesignere og utviklere. Kjøpe utgave 303. eller Abonner på netto .

Vil du ha videre innsikt i suppe opp nettstedets hastighet?

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 gir sin snakk planet av APIene: en fortelling om ytelse & amp; Brukeropplevelse på Generate New York fra 25 til 27. april 2018

Hvis du er interessert i å sikre sidene dine Last Lightning Fast, må du sørge for at du tar en billett for Generer New York. . Henri Helvetica vil være perusing dagens og til og med eksperimentelle praksiser som er ansatt i måling av webapplikasjoner, og gir Performant brukeropplevelser, samt å tilby mer innsikt i målinger som første maling, meningsfylt maling og tid til interaktiv.

Generer New York finner sted fra 25-27 april 2018. Få din billett nå .

Relaterte artikler:

  • 7 ekspert tips for spiking web ytelse
  • 3 Toppverktøy for testing av web ytelse
  • Hvorfor webutvikling må føles raskt

hvordan - Mest populære artikler

8 State-of-the-art CSS-funksjoner (og hvordan du bruker dem)

hvordan Feb 12, 2026

[1. 3] (Bildekreditt: Getty Images) CSS er stadig utviklende og en rekke spennende nye funksjoner er lagt til for å g..

Lag en kromatisk aberreringseffekt

hvordan Feb 12, 2026

[1. 3] Kromatisk aberrasjon (forvrengning), også kjent som "Fargefringing" er et vanlig optisk problem. Det oppstår når et kame..

Slik bruker du smarte lag i Photoshop

hvordan Feb 12, 2026

[1. 3] Når du inkorporerer gjentatte design og mønstre til en illustrasjon, vil få verktøy være like nyttige eller så krafti..

Opprett et enkelt fargediagram

hvordan Feb 12, 2026

Komme til grep med fargeteori kan virke litt for mye som å lære matematikk eller vitenskap. Du kan føle at du bare vil være kreativ og uttrykke deg selv, ikke trene beregni..

4 Essential Image Optimization Tips

hvordan Feb 12, 2026

[1. 3] Noen få heldige utviklere og denne forfatteren hadde muligheten til å tech redigere Addy Osmani nye bildeoptimalisering e..

Hvordan gjøre en fotorealistisk himmel

hvordan Feb 12, 2026

[1. 3] For denne opplæringen bruker vi Vue Xstream. å skape en himmel full av skyer. Mens du kunne velge å gjens..

Hvordan lage manga med en Wild West Twist

hvordan Feb 12, 2026

[1. 3] Westerns er noe jeg alltid har elsket. I denne opplæringen vil jeg lage et bilde i den typiske manga-stilen, men satt i en..

Lag et tegn med stilisert realisme

hvordan Feb 12, 2026

[1. 3] Flippsnormaler Er et nettsted som drives av Henning Sanden og Morten Jaeger sammen med deres dagjobber i VFX i ..

Kategorier