Hvad jeg lærte af at deltage i konferencen #PerfMatters

Noter fra en front-end konference med web-performance

Denne uge havde jeg privilegiet at deltage i #PerfMatters, en konference med fokus på front-end web-ydeevne. Jeg har aldrig været på en konference før, men jeg var begejstret for at være til stede, fordi det lovede en fantastisk række højttalere og emner.

Jeg begyndte at fordybe mig i webpræstationer for over et år siden, og så tænkte, at dette ville være en god chance for at uddybe min viden og møde andre mennesker i samfundet.

Dette indlæg består af tre dele:

(1) min erfaring med at deltage i konferencen,

(2) nogle af de ting, jeg lærte på konferencen, og

(3) afskedstanker.

Tanker om konferencens oplevelse

Alle er så venlige og tilgængelige

Jeg gik alene, og det var en ret skræmmende oplevelse, da jeg generelt er en genert person og kan tage et stykke tid at varme op. Men jeg lavede en regel om ikke at sidde alene under frokosten og at prøve at tale med mindst 2 personer hver dag. Jeg er glad for, at jeg gjorde det, fordi alle jeg mødte var hyggelige og sjove at tale med.

Jeg endte med at møde mange mennesker, tale om ting lige fra PRPL-mønsteret, eksperimentere med Cloudflare-medarbejdere for bedre at betjene brugere i Australien (fra servere i USA), funktionel programmerings stigende forekomst i front-end webudvikling og hvordan man Kom i gang med snowboarding (ikke præstationsrelateret, hvis du undrer dig).

Samtalerne var helt fantastiske

Alle højttalerne havde noget relateret til webydelse i en eller anden form at tale om, og det var tydeligt, at de lagde en stor indsats i deres præsentationer. Jenna Zeigens tale dækkede en lang liste over performance-tricks, og hver af hendes punkter havde en sangtekst at følge med dem, som var så underholdende informativ. Hun fortalte mig, at det tog hende cirka 15 minutter for hver sang, og at der er over 30 derinde?

Videoer af samtalerne bør snart annonceres på @perfmattersconf, men en række af diasene er allerede blevet offentliggjort med #perfmattersconf.

Samtalerne dækker de mange aspekter af arbejdet med webpræstationer

Forbedring af en webside præstation er ikke kun en engangsrevision, løsning af de problemer, der gør siden langsom og derefter videre. Det kræver en samordnet indsats fra alle interessenter - forretning , design, teknik, markedsføring, produkt - i en organisation for at komme og forblive hurtig.

Samtalerne handlede ikke kun om, hvordan vi kunne forbedre TTI'er eller indlæsningstider, hvilket er vigtigt. Men de dækkede også de andre vigtige dele af at gøre internettet tilgængeligt og anvendeligt for så mange mennesker som muligt . Fra hvordan folk opfatter ydeevne til at styrke en præstationskultur og fra hvordan privilegium definerer ydeevne til skæringspunktet mellem ydeevne og tilgængelighed.

En ikke-udtømmende liste over indlærte tip og tricks til ydeevne

Nogle, hvis ikke alle, af disse kan være almindeligt kendt, men mange var nye for mig.

Performance Kultur

  • Giv udviklere mulighed for værktøjer, der giver bedre ydelse Gør også ydeevne til en del af udviklingsprocessen.
  • Sammenlign dit websted med dine konkurrenters for at få ledende buy-in på køreegenskaber. Brug WebPagetests side-om-side-videosammenligning af din webside mod en konkurrents lastningsrejse for kortfattet at køre dit punkt over.
  • Mål de potentielle årlige indtægtsgevinster ved at øge hastigheden på webstedet med Googles værktøj Test My Site.

Ydeevne på Internettet

  • Latency har en for stor indflydelse på båndbredde på netværksanmodninger.
  • SVG-animationer er gode til animering af læssere på grund af deres (relativt) mindre størrelser.
  • Klem din side ind i 14 KB, hvis det er muligt, for at undgå flere rundrejser på grund af langsom start af TCP.
  • Ikke alle CDN'er foretager HTTP / 2-prioritering som forventet.
  • Hvis du skal bruge webskrifttyper , skrev Zach Leatherman en god guide til, hvordan du indlæser dem godt.
  • Oplevet ydeevne er påvirket af varighed (faktisk varighed, som en proces tager, kaldet ”ydeevne”), lydhørhed , flydende (opfattet glathed af en proces) og tolerance (hvor lang tid forventer brugeren, at en proces tager). Slides fra Gemma Petrie og Heather McGaw's tale om måling af opfattet ydeevne for at prioritere produktarbejde .

Nogle pæne værktøjer

  • Chrome's kodedækningsværktøj er nyttigt til at bestemme, hvor og hvornår der skal opdeles ting. Interagere med siden lidt for at se, hvordan tallene ændrer sig, og ifølge Tim Kaldec er cirka 45% ubrugt kode normal, og det vil være faldende marginale gevinster at optimere over det.
  • Chrome's overstyringsnetværksressourcefunktion giver udviklere mulighed for at returnere en lokalt gemt fil, hvilket er nyttigt til debugging af noget på farten.
  • Google Docs Regneark til at foretage bulk WebPagetest-revisioner .
  • Online JavaScript AST explorer (okay, denne er ikke ligefrem relateret til webydelse, men jeg fandt ud af det under konferencen og kan ikke stoppe med at lege med det).
  • Request Map opretter en netværksgraf fra en webside og er nyttig til visualisering af anmodninger fra tredjepart.

Afskedstanker

Hvis der er et overordnet tema, jeg fik fra konferencen, er det at være god til webpræstation, det er afgørende at forstå, hvordan browseren fungerer (ting som hvordan gengivelse sker og den kritiske gengivelsessti). Men ydeevne stopper ikke kun med tekniske gevinster .

At få buy-in fra alle interessenter, ikke kun teknik, er afgørende for at forbedre og vedligeholde ydeevnen, fordi webydelse går ud over at indlæse en side så hurtigt som muligt.

Der er også opfattet ydeevne at overveje, og derefter afgøre, om yderligere forbedringer i ydeevne skaber yderligere betydelige forretnings- eller brugerforbedringer . Det er vigtigt at huske på, at ydeevne kun er en del af brugeroplevelsen .

Jeg tog ikke for mange fotos under konferencen (note til mig selv for bestemt at tage flere fotos næste gang), men det lykkedes mig at tage denne.

Hvis du er interesseret i webydelse eller bare webudvikling generelt, er dette en fantastisk konference at tjekke ud, og den er planlagt til at ske også næste år! Der er også et stipendieprogram for dem, der ikke er i stand til at deltage uden økonomisk hjælp. Ser frem til at se dig der næste år!

Tak til Hui Yi, Jingwen Chen og Yao Hui Chua for at have læst et tidligere udkast og delt deres feedback.