7.2 KiB
Analýza webovej stránky z hľadiska výkonu
Prehľad zadania
Analýza výkonu je kľúčovou zručnosťou moderných webových vývojárov. V tomto zadaní vykonáte komplexný audit výkonu reálnej webovej stránky, pričom použijete nástroje zabudované v prehliadači aj služby tretích strán na identifikáciu úzkych miest a navrhnutie optimalizačných stratégií.
Vašou úlohou je poskytnúť podrobnú správu o výkone, ktorá preukáže vaše pochopenie princípov webového výkonu a schopnosť efektívne používať profesionálne nástroje na analýzu.
Pokyny k zadaniu
Vyberte webovú stránku na analýzu - vyberte jednu z nasledujúcich možností:
- Populárnu webovú stránku, ktorú často používate (spravodajský portál, sociálne siete, e-commerce)
- Webovú stránku open-source projektu (GitHub stránky, dokumentačné stránky)
- Webovú stránku miestneho podnikania alebo portfólia
- Váš vlastný projekt alebo predchádzajúcu školskú prácu
Vykonajte analýzu pomocou viacerých nástrojov s použitím minimálne troch rôznych prístupov:
- DevTools prehliadača - Použite kartu Výkon v Chrome/Edge na podrobné profilovanie
- Online nástroje na audit - Vyskúšajte Lighthouse, GTmetrix alebo WebPageTest
- Analýza siete - Preskúmajte načítanie zdrojov, veľkosti súborov a vzory požiadaviek
Zdokumentujte svoje zistenia v komplexnej správe, ktorá bude obsahovať:
Analýza metrík výkonu
- Merania času načítania z viacerých nástrojov a perspektív
- Skóre Core Web Vitals (LCP, FID, CLS) a ich dôsledky
- Rozpis zdrojov, ktorý ukazuje, ktoré aktíva najviac prispievajú k času načítania
- Analýza vodopádu siete, identifikácia blokujúcich zdrojov
Identifikácia problémov
- Konkrétne úzke miesta výkonu s podpornými údajmi
- Analýza príčin vysvetľujúca, prečo každý problém vzniká
- Hodnotenie dopadu na používateľov, opisujúce, ako problémy ovplyvňujú reálnych používateľov
- Prioritizácia problémov na základe závažnosti a náročnosti opravy
Odporúčania na optimalizáciu
- Konkrétne, realizovateľné zlepšenia s očakávaným dopadom
- Stratégie implementácie pre každú odporúčanú zmenu
- Moderné osvedčené postupy, ktoré by sa mohli aplikovať (lazy loading, kompresia atď.)
- Nástroje a techniky na priebežné monitorovanie výkonu
Požiadavky na výskum
Nespoliehajte sa len na nástroje prehliadača - rozšírte svoju analýzu pomocou:
Služby na audit tretích strán:
- Google Lighthouse - Komplexné audity
- GTmetrix - Informácie o výkone a optimalizácii
- WebPageTest - Testovanie v reálnych podmienkach
- Pingdom - Globálne monitorovanie výkonu
Špecializované nástroje na analýzu:
- Bundle Analyzer - Analýza veľkosti JavaScript balíkov
- Nástroje na optimalizáciu obrázkov - Príležitosti na optimalizáciu aktív
- Analýza bezpečnostných hlavičiek - Dopad bezpečnosti na výkon
Formát výstupu
Vytvorte profesionálnu správu (2-3 strany), ktorá bude obsahovať:
- Výkonný súhrn - Prehľad kľúčových zistení a odporúčaní
- Metodológia - Použité nástroje a prístup k testovaniu
- Hodnotenie aktuálneho výkonu - Základné metriky a merania
- Identifikované problémy - Podrobná analýza problémov s podpornými údajmi
- Odporúčania - Prioritizované stratégie zlepšenia
- Plán implementácie - Krok za krokom plán optimalizácie
Zahrňte vizuálne dôkazy:
- Snímky obrazovky nástrojov na analýzu výkonu a metrík
- Grafy alebo diagramy zobrazujúce údaje o výkone
- Porovnania pred a po, ak je to možné
- Grafy vodopádu siete a rozpis zdrojov
Hodnotiace kritériá
| Kritérium | Vynikajúce (90-100%) | Dostatočné (70-89%) | Potrebuje zlepšenie (50-69%) |
|---|---|---|---|
| Hĺbka analýzy | Komplexná analýza s použitím 4+ nástrojov, podrobné metriky, analýza príčin a hodnotenie dopadu na používateľov | Dobrá analýza s použitím 3 nástrojov, jasné metriky a základná identifikácia problémov | Základná analýza s použitím 2 nástrojov, obmedzená hĺbka a minimálna identifikácia problémov |
| Rozmanitosť nástrojov | Použitie nástrojov prehliadača + 3+ služieb tretích strán s porovnávacou analýzou a poznatkami z každého | Použitie nástrojov prehliadača + 2 služby tretích strán s určitými porovnávacími analýzami | Použitie nástrojov prehliadača + 1 služba tretích strán s obmedzeným porovnaním |
| Identifikácia problémov | Identifikácia 5+ konkrétnych problémov výkonu s podrobnou analýzou príčin a kvantifikovaným dopadom | Identifikácia 3-4 problémov výkonu s dobrou analýzou a určitým meraním dopadu | Identifikácia 1-2 problémov výkonu so základnou analýzou |
| Odporúčania | Poskytuje konkrétne, realizovateľné odporúčania s podrobnosťami o implementácii, očakávanom dopade a moderných osvedčených postupoch | Poskytuje dobré odporúčania s určitými pokynmi na implementáciu a očakávanými výsledkami | Poskytuje základné odporúčania s obmedzenými podrobnosťami o implementácii |
| Profesionálna prezentácia | Dobre organizovaná správa s jasnou štruktúrou, vizuálnymi dôkazmi, výkonným súhrnom a profesionálnym formátovaním | Dobrá organizácia s určitými vizuálnymi dôkazmi a jasnou štruktúrou | Základná organizácia s minimálnymi vizuálnymi dôkazmi |
Výsledky učenia
Splnením tohto zadania preukážete svoju schopnosť:
- Aplikovať profesionálne nástroje a metodiky na analýzu výkonu
- Identifikovať úzke miesta výkonu pomocou analýzy založenej na údajoch
- Analyzovať vzťah medzi kvalitou kódu a používateľskou skúsenosťou
- Odporučiť konkrétne, realizovateľné stratégie optimalizácie
- Komunikovať technické zistenia v profesionálnom formáte
Toto zadanie posilňuje koncepty výkonu, ktoré ste sa naučili počas lekcie, a zároveň rozvíja praktické zručnosti, ktoré budete využívať počas celej svojej kariéry webového vývojára.
Zrieknutie sa zodpovednosti:
Tento dokument bol preložený pomocou služby AI prekladu Co-op Translator. Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.