6.8 KiB
Analizirajte web stranicu za performanse
Pregled zadatka
Analiza performansi ključna je vještina za moderne web programere. U ovom zadatku provest ćete sveobuhvatnu analizu performansi stvarne web stranice, koristeći alate ugrađene u preglednik i usluge trećih strana kako biste identificirali uska grla i predložili strategije optimizacije.
Vaš zadatak je izraditi detaljno izvješće o performansama koje pokazuje vaše razumijevanje principa web performansi i vašu sposobnost učinkovite upotrebe profesionalnih alata za analizu.
Upute za zadatak
Odaberite web stranicu za analizu - odaberite jednu od sljedećih opcija:
- Popularna web stranica koju često koristite (vijesti, društvene mreže, e-trgovina)
- Web stranica otvorenog koda (GitHub stranice, stranice s dokumentacijom)
- Web stranica lokalnog poduzeća ili portfelj
- Vaš vlastiti projekt ili prethodni radni zadatak
Provedite analizu pomoću više alata koristeći najmanje tri različita pristupa:
- DevTools preglednika - Koristite Chrome/Edge karticu Performanse za detaljno profiliranje
- Online alati za audit - Isprobajte Lighthouse, GTmetrix ili WebPageTest
- Analiza mreže - Istražite učitavanje resursa, veličine datoteka i obrasce zahtjeva
Dokumentirajte svoja otkrića u sveobuhvatnom izvješću koje uključuje:
Analiza metrika performansi
- Mjerenja vremena učitavanja iz više alata i perspektiva
- Core Web Vitals ocjene (LCP, FID, CLS) i njihove implikacije
- Raspodjela resursa koja pokazuje koji elementi najviše doprinose vremenu učitavanja
- Analiza mrežnog vodopada koja identificira blokirajuće resurse
Identifikacija problema
- Specifična uska grla performansi s priloženim podacima
- Analiza uzroka problema koja objašnjava zašto se svaki problem pojavljuje
- Procjena utjecaja na korisnike koja opisuje kako problemi utječu na stvarne korisnike
- Prioritetni rang problema prema ozbiljnosti i težini rješavanja
Preporuke za optimizaciju
- Specifična, provediva poboljšanja s očekivanim utjecajem
- Strategije implementacije za svaku preporučenu promjenu
- Moderne najbolje prakse koje se mogu primijeniti (lijeno učitavanje, kompresija itd.)
- Alati i tehnike za kontinuirano praćenje performansi
Zahtjevi za istraživanje
Nemojte se oslanjati samo na alate preglednika - proširite svoju analizu koristeći:
Usluge za audit trećih strana:
- Google Lighthouse - Sveobuhvatni auditi
- GTmetrix - Uvidi u performanse i optimizaciju
- WebPageTest - Testiranje u stvarnim uvjetima
- Pingdom - Globalno praćenje performansi
Specijalizirani alati za analizu:
- Bundle Analyzer - Analiza veličine JavaScript paketa
- Alati za optimizaciju slika - Prilike za optimizaciju resursa
- Analiza sigurnosnih zaglavlja - Utjecaj sigurnosti na performanse
Format dostave
Izradite profesionalno izvješće (2-3 stranice) koje uključuje:
- Izvršni sažetak - Pregled ključnih otkrića i preporuka
- Metodologija - Korišteni alati i pristup testiranju
- Procjena trenutnih performansi - Osnovne metrike i mjerenja
- Identificirani problemi - Detaljna analiza problema s priloženim podacima
- Preporuke - Strategije poboljšanja prema prioritetima
- Plan implementacije - Korak-po-korak plan optimizacije
Uključite vizualne dokaze:
- Snimke zaslona alata za performanse i metrika
- Grafikone ili dijagrame koji prikazuju podatke o performansama
- Usporedbe prije i poslije gdje je to moguće
- Dijagrame mrežnog vodopada i raspodjele resursa
Kriteriji ocjenjivanja
| Kriterij | Izvrsno (90-100%) | Zadovoljavajuće (70-89%) | Potrebno poboljšanje (50-69%) |
|---|---|---|---|
| Dubina analize | Sveobuhvatna analiza koristeći 4+ alata s detaljnim metrikama, analizom uzroka i procjenom utjecaja na korisnike | Dobra analiza koristeći 3 alata s jasnim metrikama i osnovnom identifikacijom problema | Osnovna analiza koristeći 2 alata s ograničenom dubinom i minimalnom identifikacijom problema |
| Raznolikost alata | Koristi alate preglednika + 3+ usluge trećih strana s usporednom analizom i uvidima iz svakog | Koristi alate preglednika + 2 usluge trećih strana s nekim usporednim analizama | Koristi alate preglednika + 1 uslugu treće strane s ograničenom usporedbom |
| Identifikacija problema | Identificira 5+ specifičnih problema performansi s detaljnom analizom uzroka i kvantificiranim utjecajem | Identificira 3-4 problema performansi s dobrom analizom i nekim mjerenjem utjecaja | Identificira 1-2 problema performansi s osnovnom analizom |
| Preporuke | Pruža specifične, provedive preporuke s detaljima implementacije, očekivanim utjecajem i modernim najboljim praksama | Pruža dobre preporuke s nekim smjernicama za implementaciju i očekivanim rezultatima | Pruža osnovne preporuke s ograničenim detaljima implementacije |
| Profesionalna prezentacija | Dobro organizirano izvješće s jasnom strukturom, vizualnim dokazima, izvršnim sažetkom i profesionalnim formatiranjem | Dobra organizacija s nekim vizualnim dokazima i jasnom strukturom | Osnovna organizacija s minimalnim vizualnim dokazima |
Ishodi učenja
Dovršavanjem ovog zadatka pokazat ćete svoju sposobnost:
- Primijeniti profesionalne alate i metodologije za analizu performansi
- Identificirati uska grla performansi koristeći analizu temeljenu na podacima
- Analizirati odnos između kvalitete koda i korisničkog iskustva
- Preporučiti specifične, provedive strategije optimizacije
- Komunicirati tehnička otkrića u profesionalnom formatu
Ovaj zadatak učvršćuje koncepte performansi naučene na lekciji dok razvija praktične vještine koje ćete koristiti tijekom svoje karijere u web razvoju.
Izjava o odricanju odgovornosti:
Ovaj dokument je preveden pomoću AI usluge za prevođenje Co-op Translator. Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.