Amit a #PerfMatters konferencián való részvételből tanultam

Jegyzetek egy front-end webes teljesítménykonferenciáról

Ezen a héten kiváltságom volt részt venni a #PerfMatters konferencián, amely a front-end webes teljesítményre összpontosított. Még soha nem voltam konferencián, de nagy örömmel vettem részt, mert elképesztő előadók és témák felsorolását ígérte.

Körülbelül egy évvel ezelőtt kezdtem el elmélyülni a webes teljesítményben, és így gondoltam, hogy ez nagyszerű esély arra, hogy elmélyítsem ismereteimet és megismerkedjek más közösségbeli emberekkel.

Ez a bejegyzés három részből áll:

(1) a konferencián való részvétel tapasztalataim,

(2) néhány dolog, amit a konferencián tanultam, és

(3) elváló gondolatok.

Gondolatok a konferencia élményéről

Mindenki olyan barátságos és megközelíthető

Egyedül mentem, és ez meglehetősen félelmetes élmény volt, mivel általában félénk ember vagyok, és eltarthat egy ideig a bemelegítés. De megfogalmaztam egy szabályt, hogy ebéd közben ne üljek egyedül, és megpróbálok minden nap legalább 2 emberrel beszélgetni. Örülök, hogy megtettem, mert mindenkivel, akivel találkoztam, kedves és szórakoztató volt beszélgetni.

Végül sok emberrel találkoztam, beszéltem a PRPL mintától kezdve, kísérleteztem a Cloudflare munkatársaival az ausztráliai felhasználók jobb kiszolgálása érdekében (az Egyesült Államok szervereitől), a funkcionális programozás növekvő elterjedtségéről a front-end webfejlesztésben, és hogyan kezdje el a snowboardozást (nem teljesítményfüggő, ha kíváncsi lenne).

A beszélgetések teljesen elképesztőek voltak

Valamennyi előadónak volt valami, ami a webes teljesítményhez kapcsolódott, ilyen vagy olyan formában, és nyilvánvaló volt, hogy nagy erőfeszítéseket tettek előadásaik során. Jenna Zeigen előadása a fellépési trükkök hosszú listájáról szólt, és minden egyes pontjához egy dalszöveg társult, amely annyira szórakoztatóan informatív volt. Azt mondta nekem, hogy körülbelül 15 percet vett igénybe minden dalhoz, és több mint 30 van bent?

A tárgyalásokról készült videókat hamarosan be kell jelenteni a @perfmattersconf oldalon, de számos dia már megjelent a #perfmattersconf oldalon.

A megbeszélések a webes teljesítmény sok szempontját érintik

A weboldal teljesítményének javítása nem csak egyszeri ellenőrzés, az adott oldalt lassító problémák megoldása, majd továbblépés. Az összes érdekelt féltől - üzlet, tervezés, mérnöki munka, marketing, termék - összehangolt erőfeszítésekre van szükség ahhoz, hogy gyors és gyors tudjon maradni.

A megbeszélések nem csupán arról szóltak, hogy miként javíthatnánk a TTI- ket vagy a töltési időket, amelyek fontosak. De kitértek arra is, hogy a web minél több ember számára elérhetővé és használhatóbbá váljon . Attól kezdve, hogy az emberek hogyan érzékelik a teljesítményt, a teljesítménykultúra erősítéséig, és attól, hogy a kiváltság meghatározza a teljesítményt , a teljesítmény és az akadálymentesség metszéspontjáig.

A megtanult teljesítménytippek és trükkök nem teljes listája

Ezek közül néhány, ha nem is mindegyik, köztudott lehet, de sok új volt számomra.

Teljesítménykultúra

  • Felhatalmazza a fejlesztőket a jobb teljesítmény érdekében. Emellett tegye a teljesítményt a fejlesztési folyamat részévé.
  • Hasonlítsa össze webhelyét versenytársaival , hogy kiválassza a vezetési teljesítményt. Használja a WebPagetest weboldalának egymáshoz viszonyított video-összehasonlítását a versenytárs terhelési útjával, hogy tömören terelje a pontot.
  • Mérje meg a webhely sebességének növelésével járó potenciális éves bevételnövekedést a Google Test My Site eszközével.

Teljesítmény az interneten

  • A késés túl nagy hatást gyakorol a sávszélességre a hálózati kérelmekre.
  • Az SVG animációk (viszonylag) kisebb méretük miatt kiválóan alkalmasak a rakodók animálására .
  • Ha lehetséges, nyomja össze az oldalát 14 KB-ba , hogy elkerülje a több oda- vissza útat a TCP lassú indítása miatt.
  • Nem minden CDN végez HTTP / 2 prioritást a várakozásoknak megfelelően.
  • Ha webes betűtípusokat kell használnia , Zach Leatherman nagyszerű útmutatót írt arról, hogyan lehet jól betölteni őket.
  • Az észlelt teljesítményt befolyásolja az időtartam (a folyamat tényleges időtartama, amelyet „teljesítménynek” nevezünk), az érzékenység , a folyékonyság (a folyamat észlelt simasága) és a tolerancia (a felhasználó mennyi ideig várja a folyamatot). Diák Gemma Petrie és Heather McGaw beszédéből: Az észlelt teljesítmény mérése a termékmunka prioritása érdekében .

Néhány ügyes eszköz

  • A Chrome kódfedezeti eszköze hasznos annak meghatározásához, hogy hol és mikor kell szétválasztani a dolgokat. Kicsit lépjen kapcsolatba az oldallal, hogy lássa, hogyan változnak a számok, és Tim Kaldec szerint a használaton kívüli kód kb. 45% -a normális, és az optimális optimalizáláshoz csökken a marginális nyereség.
  • A Chrome felülbírálja a hálózati erőforrás funkciót, amely lehetővé teszi a fejlesztők számára, hogy visszaküldjék a helyileg mentett fájlokat, amelyek hasznosak lehetnek valami menet közbeni hibakereséshez.
  • Google Dokumentumok Táblázat tömeges WebPagetest auditok elvégzéséhez .
  • Online JavaScript AST explorer (rendben, ez nem pontosan kapcsolódik a webes teljesítményhez, de a konferencia során megtudtam, és nem tudom abbahagyni a játékot).
  • A Request Map hálózati grafikont hoz létre egy weboldalról, és hasznos harmadik felek kéréseinek megjelenítéséhez.

Bontó gondolatok

Ha van egy átfogó téma, amelyet a konferenciától kaptam, az az, hogy jó legyen a webes teljesítményhez, elengedhetetlen a böngésző működésének megértése (például a megjelenítés módja és a kritikus megjelenítési útvonal). De a teljesítmény nem csak a technikai előnyöknél áll meg .

A teljesítmény javítása és fenntartása szempontjából döntő jelentőségű az összes érdekelt fél részvétele, nemcsak a mérnöki munka, mert a webes teljesítmény túlmutat az oldal lehető leggyorsabb betöltésén.

Figyelembe kell venni az észlelt teljesítményt is, majd meghatározni, hogy a teljesítmény további javulása további jelentős üzleti vagy felhasználói fejlesztéseket eredményez-e . Fontos szem előtt tartani, hogy a teljesítmény csak egy része a felhasználói élménynek .

A konferencia alatt nem készítettem túl sok fényképet (vegye figyelembe, hogy a következő alkalommal mindenképpen több fotót készítsen), de sikerült ezt elkészítenem.

Ha érdekel a webes teljesítmény vagy csak a webes fejlesztés általában, ez egy csodálatos konferencia, amelyet meg kell nézni, és a tervek szerint jövőre is megtörténik! Van egy ösztöndíjprogram azok számára is, akik pénzügyi segítség nélkül nem tudnak részt venni. Várom, hogy jövőre ott láthassuk!

Köszönet Hui Yinek, Jingwen Chennek és Yao Hui Chua-nak, hogy elolvastak egy korábbi tervezetet és megosztották visszajelzéseiket.