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.7 KiB
107 lines
6.7 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "a203e560e58ccc6ba68bffc40c7c8676",
|
|
"translation_date": "2025-10-25T00:45:38+00:00",
|
|
"source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
|
|
"language_code": "sl"
|
|
}
|
|
-->
|
|
# Analizirajte spletno mesto glede zmogljivosti
|
|
|
|
## Pregled naloge
|
|
|
|
Analiza zmogljivosti je ključna veščina sodobnih spletnih razvijalcev. V tej nalogi boste izvedli celovito analizo zmogljivosti pravega spletnega mesta, pri čemer boste uporabili tako orodja v brskalniku kot storitve tretjih oseb za prepoznavanje ozkih grl in predlaganje strategij optimizacije.
|
|
|
|
Vaša naloga je pripraviti podrobno poročilo o zmogljivosti, ki bo pokazalo vaše razumevanje načel spletne zmogljivosti in vašo sposobnost učinkovite uporabe profesionalnih orodij za analizo.
|
|
|
|
## Navodila za nalogo
|
|
|
|
**Izberite spletno mesto** za analizo - izberite eno od naslednjih možnosti:
|
|
- Priljubljeno spletno mesto, ki ga pogosto uporabljate (novičarsko spletno mesto, družbena omrežja, e-trgovina)
|
|
- Spletno mesto odprtokodnega projekta (strani GitHub, dokumentacijska mesta)
|
|
- Spletno mesto lokalnega podjetja ali portfeljsko mesto
|
|
- Vaš lasten projekt ali prejšnje študijsko delo
|
|
|
|
**Izvedite analizo z več orodji** z uporabo vsaj treh različnih pristopov:
|
|
- **DevTools v brskalniku** - Uporabite zavihek Performance v Chrome/Edge za podrobno profiliranje
|
|
- **Orodja za spletno analizo** - Preizkusite Lighthouse, GTmetrix ali WebPageTest
|
|
- **Analiza omrežja** - Preučite nalaganje virov, velikosti datotek in vzorce zahtev
|
|
|
|
**Dokumentirajte svoje ugotovitve** v celovitem poročilu, ki vključuje:
|
|
|
|
### Analiza zmogljivostnih metrik
|
|
- **Meritve časa nalaganja** z več orodji in perspektivami
|
|
- **Rezultati Core Web Vitals** (LCP, FID, CLS) in njihov pomen
|
|
- **Razčlenitev virov**, ki prikazuje, kateri elementi najbolj prispevajo k času nalaganja
|
|
- **Analiza omrežnega vodopada**, ki identificira blokirajoče vire
|
|
|
|
### Identifikacija težav
|
|
- **Specifična ozka grla zmogljivosti** s podpornimi podatki
|
|
- **Analiza vzrokov** z razlago, zakaj se vsaka težava pojavi
|
|
- **Ocena vpliva na uporabnike**, ki opisuje, kako težave vplivajo na resnične uporabnike
|
|
- **Razvrstitev po prioriteti** težav glede na resnost in težavnost odprave
|
|
|
|
### Priporočila za optimizacijo
|
|
- **Specifične, izvedljive izboljšave** z pričakovanim vplivom
|
|
- **Strategije implementacije** za vsako priporočeno spremembo
|
|
- **Sodobne najboljše prakse**, ki bi jih lahko uporabili (leno nalaganje, stiskanje itd.)
|
|
- **Orodja in tehnike** za stalno spremljanje zmogljivosti
|
|
|
|
## Zahteve za raziskavo
|
|
|
|
**Ne zanašajte se samo na orodja v brskalniku** - razširite svojo analizo z uporabo:
|
|
|
|
**Storitev za analizo tretjih oseb:**
|
|
- [Google Lighthouse](https://developers.google.com/web/tools/lighthouse) - Celovite analize
|
|
- [GTmetrix](https://gtmetrix.com/) - Vpogledi v zmogljivost in optimizacijo
|
|
- [WebPageTest](https://www.webpagetest.org/) - Testiranje v realnih pogojih
|
|
- [Pingdom](https://tools.pingdom.com/) - Globalno spremljanje zmogljivosti
|
|
|
|
**Specializirana orodja za analizo:**
|
|
- [Bundle Analyzer](https://bundlephobia.com/) - Analiza velikosti JavaScript paketov
|
|
- [Orodja za optimizacijo slik](https://squoosh.app/) - Priložnosti za optimizacijo virov
|
|
- [Analiza varnostnih glav](https://securityheaders.com/) - Vpliv varnosti na zmogljivost
|
|
|
|
## Format oddaje
|
|
|
|
Pripravite profesionalno poročilo (2-3 strani), ki vključuje:
|
|
|
|
1. **Povzetek** - Pregled ključnih ugotovitev in priporočil
|
|
2. **Metodologija** - Uporabljena orodja in pristop k testiranju
|
|
3. **Ocena trenutne zmogljivosti** - Osnovne metrike in meritve
|
|
4. **Identificirane težave** - Podrobna analiza težav s podpornimi podatki
|
|
5. **Priporočila** - Strategije izboljšav po prioriteti
|
|
6. **Načrt implementacije** - Koraki za optimizacijo
|
|
|
|
**Vključite vizualne dokaze:**
|
|
- Posnetke zaslona orodij za zmogljivost in metrik
|
|
- Grafike ali diagrame, ki prikazujejo podatke o zmogljivosti
|
|
- Primerjave pred/po, kjer je to mogoče
|
|
- Diagrame omrežnega vodopada in razčlenitve virov
|
|
|
|
## Merila ocenjevanja
|
|
|
|
| Merilo | Odlično (90-100%) | Zadostno (70-89%) | Potrebno izboljšanje (50-69%) |
|
|
| ------ | ----------------- | ----------------- | ----------------------------- |
|
|
| **Globina analize** | Celovita analiza z uporabo 4+ orodij z podrobnimi metrikami, analizo vzrokov in oceno vpliva na uporabnike | Dobra analiza z uporabo 3 orodij z jasnimi metrikami in osnovno identifikacijo težav | Osnovna analiza z uporabo 2 orodij z omejeno globino in minimalno identifikacijo težav |
|
|
| **Raznolikost orodij** | Uporaba orodij v brskalniku + 3+ storitev tretjih oseb z primerjalno analizo in vpogledi iz vsakega | Uporaba orodij v brskalniku + 2 storitev tretjih oseb z nekaj primerjalne analize | Uporaba orodij v brskalniku + 1 storitev tretjih oseb z omejeno primerjavo |
|
|
| **Identifikacija težav** | Identificira 5+ specifičnih težav zmogljivosti z podrobno analizo vzrokov in kvantificiranim vplivom | Identificira 3-4 težave zmogljivosti z dobro analizo in nekaj merjenja vpliva | Identificira 1-2 težavi zmogljivosti z osnovno analizo |
|
|
| **Priporočila** | Ponuja specifična, izvedljiva priporočila s podrobnostmi implementacije, pričakovanim vplivom in sodobnimi najboljšimi praksami | Ponuja dobra priporočila z nekaj smernicami za implementacijo in pričakovanimi rezultati | Ponuja osnovna priporočila z omejenimi podrobnostmi implementacije |
|
|
| **Profesionalna predstavitev** | Dobro organizirano poročilo z jasno strukturo, vizualnimi dokazi, povzetkom in profesionalno oblikovanjem | Dobra organizacija z nekaj vizualnimi dokazi in jasno strukturo | Osnovna organizacija z minimalnimi vizualnimi dokazi |
|
|
|
|
## Cilji učenja
|
|
|
|
Z dokončanjem te naloge boste dokazali svojo sposobnost:
|
|
- **Uporabe** profesionalnih orodij in metodologij za analizo zmogljivosti
|
|
- **Identifikacije** ozkih grl zmogljivosti z analizo, ki temelji na podatkih
|
|
- **Analize** povezave med kakovostjo kode in uporabniško izkušnjo
|
|
- **Priporočanja** specifičnih, izvedljivih strategij optimizacije
|
|
- **Komuniciranja** tehničnih ugotovitev v profesionalnem formatu
|
|
|
|
Ta naloga krepi koncept zmogljivosti, obravnavan v lekciji, hkrati pa gradi praktične veščine, ki jih boste uporabljali skozi celotno kariero spletnega razvijalca.
|
|
|
|
---
|
|
|
|
**Omejitev odgovornosti**:
|
|
Ta dokument je bil preveden z uporabo storitve za prevajanje AI [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku naj se šteje za avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne odgovarjamo za morebitna nesporazumevanja ali napačne razlage, ki izhajajo iz uporabe tega prevoda. |