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
7.2 KiB
107 lines
7.2 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "a203e560e58ccc6ba68bffc40c7c8676",
|
|
"translation_date": "2025-10-24T21:50:14+00:00",
|
|
"source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
|
|
"language_code": "sk"
|
|
}
|
|
-->
|
|
# 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](https://developers.google.com/web/tools/lighthouse) - Komplexné audity
|
|
- [GTmetrix](https://gtmetrix.com/) - Informácie o výkone a optimalizácii
|
|
- [WebPageTest](https://www.webpagetest.org/) - Testovanie v reálnych podmienkach
|
|
- [Pingdom](https://tools.pingdom.com/) - Globálne monitorovanie výkonu
|
|
|
|
**Špecializované nástroje na analýzu:**
|
|
- [Bundle Analyzer](https://bundlephobia.com/) - Analýza veľkosti JavaScript balíkov
|
|
- [Nástroje na optimalizáciu obrázkov](https://squoosh.app/) - Príležitosti na optimalizáciu aktív
|
|
- [Analýza bezpečnostných hlavičiek](https://securityheaders.com/) - Dopad bezpečnosti na výkon
|
|
|
|
## Formát výstupu
|
|
|
|
Vytvorte profesionálnu správu (2-3 strany), ktorá bude obsahovať:
|
|
|
|
1. **Výkonný súhrn** - Prehľad kľúčových zistení a odporúčaní
|
|
2. **Metodológia** - Použité nástroje a prístup k testovaniu
|
|
3. **Hodnotenie aktuálneho výkonu** - Základné metriky a merania
|
|
4. **Identifikované problémy** - Podrobná analýza problémov s podpornými údajmi
|
|
5. **Odporúčania** - Prioritizované stratégie zlepšenia
|
|
6. **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](https://github.com/Azure/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. |