de Chiamaka Ikeanyi

Repere din Chrome Dev Summit 2018

Repere din Chrome Dev Summit 2018

Ați auzit de Google Chrome Dev Summit? Dacă nu ați auzit de asta și de lucrurile extraordinare la care lucrează in ultimul timp inginerii Chrome, acest articol este pentru dvs.

Sunt un inginer front-end care lucrează la o aplicație care servește milioane de utilizatori. De asemenea, folosesc Chrome Dev Tools în fiecare zi pentru a depana și monitoriza performanța. Așa că am găsit imperativ să aflu despre instrumentele și tehnologiile care mă vor ajuta să-mi optimizez aplicațiile și să contribui la construirea unui web mai bun. Depanarea și optimizarea devin mai ușoare atunci când sunteți conștienți de instrumentele de care puteți profita și de valorile de care trebuie să aveți grijă.

Summit-ul Chrome Dev mi-a oferit ocazia să aud despre actualizările acestor instrumente și tehnologii și mi-a arătat căi de a contribui la îmbunătățirea acestor instrumente. Am învățat multe de la inginerii Chrome în timpul summitului și aș dori să beneficiați de aceste cunoștințe, astfel încât să putem construi împreună o experiență web minunată.

Summit-ul Chrome Dev este o oportunitate pentru inginerii Google Chrome și dezvoltatorii web de frunte să celebreze platforma web, să ofere actualizări despre ultimele lor lucrări și să primească feedback de la comunitate.

Anul acesta, dezvoltatorii din întreaga lume au adunat la Centrul de Arte Yerba Buena din San Francisco, California, pentru o explorare de două zile (12 și 13 noiembrie) a experiențelor web moderne. A fost sărbătorit cu stil, în timp ce inginerii Chrome marchează aniversarea a 10 ani de la livrarea Google Chrome, cel mai folosit browser web.

Evenimentul s-a concentrat asupra a ceea ce înseamnă să construiești o experiență web rapidă și de înaltă calitate folosind tehnologii web moderne și cele mai bune practici, precum și examinarea capabilităților noi și interesante care vin pe platforma web. Cele mai importante momente importante sunt rezumate mai jos.

Bugete de performanță

Un număr din ce în ce mai mare de caracteristici în aplicațiile web de astăzi sunt de asemenea accesate folosind dispozitive low-end în rețele cu latență ridicată. Din această cauză, JavaScript devine scump necesitând astfel bugetarea performanței.

1611327849 282 Repere din Chrome Dev Summit 2018
Un buget de performanță este un cadru care vă permite să determinați ce modificări reprezintă progresul și ce modificări reprezintă regresie, luând în considerare un set de valori și bugete partajate pentru fiecare făcut acționabil

Cu toate acestea, trebuie să avem valori pentru a măsura înainte de a le putea îmbunătăți, deoarece este imposibil să măsurăm ceea ce nu urmărim. Când ne pasă de experiența excepțională a utilizatorului, indiferent de condițiile dispozitivului sau ale rețelei, construirea unui PWA având în vedere performanța devine o prioritate.

Pentru a construi o experiență web de înaltă calitate, Google a dezvoltat instrumente precum Lighthouse, PageSpeed ​​Insights și Chrome User Experience Report (CrUX) pentru a ajuta dezvoltatorii să monitorizeze și să îmbunătățească platforma web. O nouă interfață de utilizare a farului a fost anunțată la eveniment cu PWA Refactor, o reducere a duratei de funcționare a farului și un nou scor bucketing.

1611327850 476 Repere din Chrome Dev Summit 2018
Noul cupaj de scor Lighthouse

Putem de asemenea integrează Farul la fluxul nostru de lucru de dezvoltare, astfel încât să ruleze la fiecare commit. Acest lucru ne ajută să urmărim performanța.

1611327850 126 Repere din Chrome Dev Summit 2018
Farul care rulează în CI

Instrumente pentru a monitoriza costul pachetelor:

  • Webpack Bundle Analyzer care creează o vizualizare a hărții copiilor a conținutului pachetelor dvs. Ajută la determinarea modulelor care alcătuiesc cea mai mare parte a dimensiunii sale.
  • Bundlefobie vă ajută să descoperiți costul adăugării unui pachet npm la pachet.
  • Pachet vă ajută să țineți sub control dimensiunea pachetului. Îl puteți integra în așa fel încât PR-urile să nu poată fi îmbinate odată ce dimensiunea pachetului este mai mare decât dimensiunea maximă țintă.
1611327851 841 Repere din Chrome Dev Summit 2018
Verifică dimensiunea pachetului în procesul CI

PageSpeed ​​Insights Powered by Lighthouse

Datorită diferitelor analize de rezultate obținute de la PageSpeed ​​Insights și Lighthouse atunci când se măsoară performanța site-urilor web, echipa Chrome a introdus PageSpeed ​​API v5. Este în esență Lighthouse API v1 pentru a alimenta PageSpeed ​​Insights. Aceasta înseamnă că rezultatele diferite vor fi istorice. PageSpeed ​​Insights încorporează, de asemenea, date de câmp furnizate de CrUX.

await fetch(`https://www.googleapis.com/pagespeedonline/v5/runPagespeed?&url=${url}`)
1611327851 230 Repere din Chrome Dev Summit 2018
De Paul Irish și Elizabeth Sweeny la Chrome Dev Summit

Prima întârziere de intrare

Suntem familiarizați cu măsurarea indicelui de viteză (SI), First Contentful Paint (FCP), Time to Interactive (TTI), First CPU Idle (FCPI) și alte valori pe care probabil le-ați văzut folosind Far sau WebPageTest. Pentru a măsura prima impresie a unui utilizator despre interactivitatea și reacția site-ului dvs., a fost introdusă o nouă valoare numită First Input Delay.

1611327852 706 Repere din Chrome Dev Summit 2018
De Paul Irish la Summitul Chrome Dev

First Input Delay (FID) măsoară timpul de la prima interacțiune a utilizatorului cu site-ul dvs. (adică atunci când faceți clic pe un link, atingeți un buton sau utilizați un control personalizat cu JavaScript) până la momentul în care firul principal este liber de sarcina lungă pe care o îndeplinește, făcând posibil ca browserul să răspundă la interacțiunea utilizatorului.

Nu este același lucru cu TTI pe care îl puteți întreba? Ei bine, nu, nu este. Timpul până la interactivitate (TTI) măsoară cât durează încărcarea aplicației și devine capabilă să răspundă rapid la interacțiunile utilizatorilor. Pe de altă parte, First Input Delay (FID) este o valoare care măsoară întârzierea pe care o experimentează utilizatorii atunci când interacționează cu pagina în timp ce aceasta nu este încă interactivă.

1611327852 353 Repere din Chrome Dev Summit 2018
Browserul primește intrarea atunci când firul principal este ocupat, deci trebuie să aștepte până nu este ocupat pentru a răspunde la intrare. Timpul pe care trebuie să îl aștepte este valoarea FID pentru acest utilizator de pe această pagină.

FID este o metrică de câmp, ceea ce înseamnă că poate fi văzut atunci când utilizatorii reali interacționează cu aplicația web, în ​​timp ce TTI este o metrică de laborator. Valorile de teren surprind un spectru larg de condiții de rețea și dispozitive din lumea reală utilizate de utilizatorii Chrome. Acest lucru poate fi bine măsurat folosind instrumente RUM (Real User Monitoring), cum ar fi Raport Chrome UX.

Aplicațiile și site-urile JavaScript randate de server cu iframe terțe trebuie să fie deosebite cu privire la urmărirea acestei valori. Acestea sunt susceptibile de valori FID ridicate, în special pe dispozitivele low-end care necesită mai mult timp pentru a analiza și executa JavaScript.

1611327853 526 Repere din Chrome Dev Summit 2018
Unde să adunați aceste valori

WebP Image Format

Imaginile nu devin doar performante din mers – există măsuri adecvate care trebuie puse în aplicare pentru a realiza acest lucru. Trebuie să luați în considerare utilizarea formatului potrivit, a tehnicilor de compresie și a încărcării lente a imaginii. Odată cu introducerea WebP, un nou format de imagine care are ca rezultat o economie medie de 30%, costul de difuzare a imaginilor – care este cea mai mare componentă a majorității site-urilor – este redus.

WebP oferă o compresie superioară cu pierderi și pierderi pentru imaginile de pe web, cu suport pentru transparență, făcând webul mai rapid. Datorită faptului că WebP nu este încă acceptat în toate browserele, este recomandabil să utilizați <picture> element pentru a oferi alternative. Formatul imaginii va fi apoi utilizat pe browserele acceptate, în timp ce browserele web care nu acceptă încă WebP vor folosi imaginea în formatul pe care îl acceptă.

1611327853 690 Repere din Chrome Dev Summit 2018
Stat de suport WebP pe caniuse.com
1611327854 247 Repere din Chrome Dev Summit 2018
Statistică de asistență WebP de Katie Hempenius la Chrome Dev Summit
<picture>  <source type="image/webp" >  <source type="image/jpeg" >  <img src="https://www.freecodecamp.org/news/highlights-from-chrome-dev-summit-2018-c7f1f1a7e6ae/imagename.jpeg" alt="image description"></picture>

Pentru a comprima imagini în și din formatul WebP, cwebp și dwebp instrumentele din linia de comandă pot fi utilizate respectiv. Mergeți și încercați acest format de imagine squoosh (încărcați imaginea și vizualizați rata de compresie).

Native Lazy Loading

Pentru a îmbunătăți experiența utilizatorului pe web, încărcarea leneșă nativă va veni pe Chrome. Când se adaugă etichetelor de imagine și iframe-urilor încrucișate, aceasta diferă încărcarea resursei până când pagina este derulată în jos lângă ele. Este acceptat pe toate platformele Chrome – Mac, Windows, Linux, Chrome OS, Android

Pentru a încărca leneș resursele, utilizați lazyload atribut cu valoarea „activat sau dezactivat”. Dacă nu este specificată nicio valoare, browserul decide ce resursă să încarce leneș.

<img src="https://www.freecodecamp.org/news/highlights-from-chrome-dev-summit-2018-c7f1f1a7e6ae/imagename.png" lazyload="on">

Navigare fără frecare pe web

Navigarea pe web nu a fost simplă în comparație cu experiența cu aplicațiile native. Este o experiență dureroasă, mai ales atunci când navigați pe web utilizând dispozitive low-end pe rețele lente, lăsând utilizatorii să privească un ecran alb în așteptarea afișării conținutului pe ecran. Pentru a veni în ajutorul acestor utilizatori web, au anunțat inginerii Chrome Ambalaje web și portaluri.

1611327854 187 Repere din Chrome Dev Summit 2018
Disponibil numai pe dispozitive mobile. Pictograma identifică site-urile care au implementat AMP

Construită pe modelul Accelerated Mobile Pages (AMP) și realizată prin schimburi semnate, Ambalare web introduce posibilitatea de a semna o pagină web cu o cheie specială de criptare care dovedește domeniul original al paginii. Apoi creează un pachet care poate fi servit de oriunde, care va fi folosit de browser pentru a reprezenta domeniul care permite navigarea instantanee care păstrează confidențialitatea.

Portaluri funcționează ca un iframe, dar poate fi navigat pentru a permite utilizatorilor să treacă la conținutul portalului. Rezumă navigarea între pagini, făcându-l pe utilizator să se simtă ca și cum ar fi pe o aplicație cu o singură pagină.

<portal src="https://mywebsite.com"></portal>

Când se face clic pe vizualizarea creată, adăugați câteva animații și declanșați evenimentul de activare:

portal.activate();

Cele două propuneri combinate permit tranziții de pagină cu frecare zero pe web. Acest lucru este încă devreme în etapa de dezvoltare și, prin urmare, poate fi modificat.

Web.dev

O platformă web creată pentru a ajuta dezvoltatorii să învețe cum să construiască pentru web și să se asigure că site-ul web îndeplinește obiectivele de bune practici. Web.dev se concentrează pe motivul pentru care dezvoltatorii trebuie să aibă grijă de un anumit concept și oferă sfaturi pentru a-i ajuta pe dezvoltatori să construiască un web mai bun, păstrându-l rapid, descoperibil, accesibil, sigur și rezistent.

1611327855 646 Repere din Chrome Dev Summit 2018

VisBug

Construită având în vedere accesibilitatea, VisBug este un instrument care poate fi util pentru ingineri. Cu această extensie, vă puteți explora și regla site-ul chiar în browser pentru a vizualiza elementele de bază și cum arată dacă este conceput diferit.

1611327855 20 Repere din Chrome Dev Summit 2018
Folosind VisBug pe site-ul meu

Squoosh

Squoosh este o aplicație web progresivă de 15kB bazată pe JavaScript pentru compresia imaginii scrisă în C. Este compilată folosind emscripten la asamblarea web cu cele mai bune codecuri din clasă chiar în browser.

1611327856 768 Repere din Chrome Dev Summit 2018
O dimensiune originală a imaginii 163kB: Observați rata de compresie a WebP comparativ cu MozJPEG

Având în vedere performanța, echipa a folosit tehnologii adecvate, urmând cele mai bune practici de codificare și performanță pentru a produce o aplicație performantă:

  • Pregătiți (o bibliotecă de 3 KB) pentru a orchestra DOM
  • WebPack pentru grupare și divizarea codului
  • Lucrători web pentru încărcare leneșă și concurență
  • Importuri de module dinamice
  • Componente web (o primitivă de nivel inferior utilizată de Polymer) pentru polimerizarea elementelor personalizate pe Edge

După cum ar spune Jake Archibald, du-te squoosh câteva imagini.

Puncte cheie

  • Deciziile de performanță ar trebui luate pe baza datelor. Respectați utilizatorul, datele și preferințele acestuia.
  • Ca dezvoltatori, trebuie să testăm folosind dispozitive low-end pe conexiuni de rețea lente. Când ne dezvoltăm pentru web folosind dispozitive rapide pe conexiuni de rețea rapide, nu putem simți cu adevărat ceea ce simt utilizatorii noștri și cred că ne-am îndeplinit obiectivele de performanță.
  • Performanța nu este o prioritate inginerească. Succesul inițiativelor de performanță depinde de buy-in-uri multifuncționale. Ar trebui să existe o aliniere organizațională între toate echipele care afectează site-ul web (marketing, proiectare, inginerie etc.).
  • Înțelegeți modul în care lucrătorii din service afectează performanța site-ului dvs. Acestea îl pot afecta pozitiv sau negativ în funcție de implementare.
  • Utilizatorii apreciază o călătorie consecventă a utilizatorului. Deci, încercați să reduceți frecarea aplicațiilor dvs. web.
  • Măsurați aplicațiile utilizând modelul RAIL – Răspuns, animație, inactivitate și încărcare.
  • Utilizați cadrul HEART (Happiness, Engagement, Adoption, Retention, Task Success) pentru a determina calitatea interfeței de utilizare a aplicației dvs. web.
  • Unele dintre aceste caracteristici anunțate acoperite aici și multe altele se află în spatele steagurilor Chrome – chrome: // flags /

Concluzie

Acesta este doar vârful aisbergului – nu ați vrea să pierdeți detaliile. Viitorul este pe web, iar performanța este la baza tuturor. Toate sesiunile înregistrate pe tot parcursul evenimentului sunt disponibile pe Canalul dezvoltatorilor Google Chrome. Codul este disponibil pe GitHub.

Să construim un web mai bun?