Innhold
- 01. Forsøk å måle
- 02. Mister noe sidevekt
- 03. Se hvordan du stabler
- 04. Kutt rotet
- Vil du ha mer innblikk i å øke hastigheten på nettstedet ditt?
Web ytelsesanalytiker Henri Helvetica vil dele sine profesjonelle tips om hvordan du kan øke ytelsen til nettstedet ditt påGenerer New York2018.Få billetten din nå.
Ytelse blir endelig en større del av samtalen innen nettdesign og utvikling. Det kan likevel være en utfordring å få folk til å konsumere det flotte innholdet som finnes der, og tilegne seg en ytelsesmetode på en mer regelmessig basis.
Heldigvis er frilansutvikler og web-ytelsesanalytiker Henri Helvetica (ekte navn Henri Brisard) klar til å tilby sine beste tips om hvordan du kan forbedre nettstedets ytelse.
01. Forsøk å måle
Helvetica foreslår at du først og fremst må sørge for at du måler. "Du kan aldri forbedre det du ikke måler," forklarer han. Når du har lagt ut målingene og dataene dine, må du finne ut hvilke viktige elementer du måler. Du kan ha to sider som lastes inn på ni sekunder, men en kan ha visningsfeltet fylt ut mye raskere, slik at du får en bedre brukeropplevelse.
"Du må måle hva som er viktig i belastningsprosessen for nettstedet ditt og din kommersielle virksomhet. Tenk på hva som er viktig for brukerne å samhandle med. Hvert nettsted har sine individuelle behov."
Når han har sett på sidelastingen, som hjelper ham å finne ut hvordan og når enkelte varer lastes inn, er Helveticas neste trinn vanligvis å fyre opp Chrome DevTools for å vurdere nøyaktig hva som skjer. Det er et opplagt 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 treg. Likevel bruker mange utviklere knapt det. "DevTools er litt som en røykvarsler," argumenterer Helvetica. “Hvis det er brann, vil DevTools fortelle deg det. Det vil i det minste vise deg hvor røyken er. ”
02. Mister noe sidevekt
Deretter ser Helvetica på fossen, som vil indikere forskjellige problemer, for eksempel størrelsen på en eiendel og ventetiden som var involvert i å laste den. Hvis nettstedet for eksempel inneholder bilder av dårlig størrelse, vil du for eksempel se en veldig lang foss, noe som er et av de enkleste smertepunktene du raskt kan ta opp. Bilder er en av de største synderne for et nettsted med langsom belastning - et problem som kan løses ganske enkelt. Siden de er den største datakilden, er bilder også den største kilden til datasparing.
"Jeg vil alltid ta hensyn til sidens vekt," forklarer Helvetica. "Uansett hvordan du skjærer det, 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.
"Denne sidevekten vil også være offer for nettverket ditt, fordi et mobilnettverk egentlig aldri kan forutsies. Så du vil forsikre deg om at eiendelene dine er små og optimaliserte for visningsområdet, noe som betyr at du ikke skal kunne se noen ressurser på stasjonær størrelse på en mobil enhet. ”
Helvetica anbefaler også lat lasting, en teknikk som utsetter lasting av et objekt til det er nødvendig. "Ikke alle brukere kommer til bunnen av en side," advarer han. “Ofte laster du kanskje inn eiendeler som aldri kommer til å bli sett. Å bruke lat belastning vil være veldig gunstig fordi du sparer både data og batteridrift eller minnestyring. Hvis du ikke laster inn bildet, kommer du ikke til å ha noe minne til å usurpe på enheten. "
03. Se hvordan du stabler
En annen grunn til at Helvetica favoriserer DevTools, er at den nå også gir beregninger som den første malingen (tiden det tar for brukeren å se den første piksel med innhold) og den første meningsfulle malingen (tiden det tar før sidens primære innhold blir synlig ).
Så er det filmstripen (enten i DevTools eller ytelsesverktøyet WebPagetest) som viser inkrementelle skjermbilder av nettleseren som gjengir et nettsted, slik at du kan se hvordan en side ser ut når den lastes inn. 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å et tidligere tidspunkt i tidslinjen.
I WebPagetest - som Helvetica berømmer for sitt inspirerende detaljnivå - kan du også eksportere en video av lasten og sammenligne filmstripen med en konkurrent. "Når du har koblet sammen punktene, kan du utforske hvordan du kan forbedre brukeropplevelsen ved å bringe disse eiendelene raskere inn i visningsområdet," forklarer Helvetica.
04. Kutt rotet
Helvetica understreker at designbeslutninger også har innvirkning på ytelsen, og at din første last i visningen ideelt sett ikke bare skal være så rask som mulig, men også så rotfri som mulig.
Av den grunn må du forstå rekken av hendelser som finner sted for å gjengi den første visningen av en webside - den kritiske gjengivelsesstien. Disse hendelsene kan optimaliseres ved å unngå å laste inn eiendeler som ikke er nødvendige, og ved å ta avgjørelser rundt valget av nettfonter og bildeformater.
"Sørg for at du holder SVG-ene så kompliserte som mulig," foreslår Helvetica som et eksempel. “Da får du mindre kode når du gjengir SVG-en. Jeg hører dette fra utviklere hele tiden. De får en SVG fra designerne og må sende den tilbake fordi det vil påvirke ytelsen. "
Denne artikkelen ble opprinnelig publisert i utgave 303 av net, verdens mest solgte magasin for webdesignere og utviklere. Kjøpe utgave 303 eller abonner på nett.
Vil du ha mer innblikk i å øke hastigheten på nettstedet ditt?
Hvis du er interessert i at sidene dine lastes lynraskt, må du ta tak i en billett for Generer New York. Henri Helvetica vil gjennomgå dagens og til og med eksperimentelle praksiser som brukes til å måle webapps, og tilby performante brukeropplevelser, samt tilby mer innsikt i målinger som første maling, meningsfull maling og tid til interaktiv.
Generate New York finner sted fra 25. til 27. april 2018. Få billetten din nå.
Relaterte artikler:
- 7 eksperttips for spikring av nettytelse
- Tre toppverktøy for testing av ytelse på nettet
- Hvorfor ytelse på nettet må føles raskt
