You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
6.8 KiB
107 lines
6.8 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "a203e560e58ccc6ba68bffc40c7c8676",
|
|
"translation_date": "2025-10-25T00:15:11+00:00",
|
|
"source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
|
|
"language_code": "hr"
|
|
}
|
|
-->
|
|
# 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](https://developers.google.com/web/tools/lighthouse) - Sveobuhvatni auditi
|
|
- [GTmetrix](https://gtmetrix.com/) - Uvidi u performanse i optimizaciju
|
|
- [WebPageTest](https://www.webpagetest.org/) - Testiranje u stvarnim uvjetima
|
|
- [Pingdom](https://tools.pingdom.com/) - Globalno praćenje performansi
|
|
|
|
**Specijalizirani alati za analizu:**
|
|
- [Bundle Analyzer](https://bundlephobia.com/) - Analiza veličine JavaScript paketa
|
|
- [Alati za optimizaciju slika](https://squoosh.app/) - Prilike za optimizaciju resursa
|
|
- [Analiza sigurnosnih zaglavlja](https://securityheaders.com/) - Utjecaj sigurnosti na performanse
|
|
|
|
## Format dostave
|
|
|
|
Izradite profesionalno izvješće (2-3 stranice) koje uključuje:
|
|
|
|
1. **Izvršni sažetak** - Pregled ključnih otkrića i preporuka
|
|
2. **Metodologija** - Korišteni alati i pristup testiranju
|
|
3. **Procjena trenutnih performansi** - Osnovne metrike i mjerenja
|
|
4. **Identificirani problemi** - Detaljna analiza problema s priloženim podacima
|
|
5. **Preporuke** - Strategije poboljšanja prema prioritetima
|
|
6. **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](https://github.com/Azure/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. |