# 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.