6.7 KiB
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 - Celovite analize
- GTmetrix - Vpogledi v zmogljivost in optimizacijo
- WebPageTest - Testiranje v realnih pogojih
- Pingdom - Globalno spremljanje zmogljivosti
Specializirana orodja za analizo:
- Bundle Analyzer - Analiza velikosti JavaScript paketov
- Orodja za optimizacijo slik - Priložnosti za optimizacijo virov
- Analiza varnostnih glav - Vpliv varnosti na zmogljivost
Format oddaje
Pripravite profesionalno poročilo (2-3 strani), ki vključuje:
- Povzetek - Pregled ključnih ugotovitev in priporočil
- Metodologija - Uporabljena orodja in pristop k testiranju
- Ocena trenutne zmogljivosti - Osnovne metrike in meritve
- Identificirane težave - Podrobna analiza težav s podpornimi podatki
- Priporočila - Strategije izboljšav po prioriteti
- 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. Č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.