|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "a203e560e58ccc6ba68bffc40c7c8676",
|
|
|
"translation_date": "2025-10-24T23:43:44+00:00",
|
|
|
"source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
|
|
|
"language_code": "sr"
|
|
|
}
|
|
|
-->
|
|
|
# Анализа сајта за перформансе
|
|
|
|
|
|
## Преглед задатка
|
|
|
|
|
|
Анализа перформанси је кључна вештина за савремене веб програмере. У овом задатку, спровешћете свеобухватну проверу перформанси једног стварног веб сајта, користећи алате у претраживачу и услуге трећих страна како бисте идентификовали проблеме и предложили стратегије оптимизације.
|
|
|
|
|
|
Ваш задатак је да припремите детаљан извештај о перформансама који показује ваше разумевање принципа веб перформанси и вашу способност да ефикасно користите професионалне алате за анализу.
|
|
|
|
|
|
## Упутства за задатак
|
|
|
|
|
|
**Изаберите веб сајт** за анализу - изаберите једну од следећих опција:
|
|
|
- Популаран веб сајт који често користите (веб сајт са вестима, друштвене мреже, е-трговина)
|
|
|
- Веб сајт отвореног кода (GitHub странице, сајтови са документацијом)
|
|
|
- Веб сајт локалног предузећа или портфолио сајт
|
|
|
- Ваш пројекат или претходни курсни рад
|
|
|
|
|
|
**Спроведите анализу користећи више алата** користећи најмање три различита приступа:
|
|
|
- **DevTools у претраживачу** - Користите Chrome/Edge Performance таб за детаљно профилисање
|
|
|
- **Онлајн алати за проверу** - Пробајте Lighthouse, GTmetrix или WebPageTest
|
|
|
- **Анализа мреже** - Испитајте учитавање ресурса, величине датотека и обрасце захтева
|
|
|
|
|
|
**Документујте своје налазе** у свеобухватном извештају који укључује:
|
|
|
|
|
|
### Анализа метрика перформанси
|
|
|
- **Мерење времена учитавања** из више алата и перспектива
|
|
|
- **Оцене Core Web Vitals** (LCP, FID, CLS) и њихове импликације
|
|
|
- **Разложени ресурси** који показују који елементи највише доприносе времену учитавања
|
|
|
- **Анализа водопада мреже** која идентификује блокирајуће ресурсе
|
|
|
|
|
|
### Идентификација проблема
|
|
|
- **Специфични проблеми са перформансама** уз податке који их подржавају
|
|
|
- **Анализа узрока** која објашњава зашто се сваки проблем јавља
|
|
|
- **Процена утицаја на кориснике** која описује како проблеми утичу на стварне кориснике
|
|
|
- **Рангирање приоритета** проблема на основу озбиљности и тежине решавања
|
|
|
|
|
|
### Препоруке за оптимизацију
|
|
|
- **Специфична, применљива побољшања** са очекиваним утицајем
|
|
|
- **Стратегије имплементације** за сваку препоручену промену
|
|
|
- **Савремене најбоље праксе** које се могу применити (ленто учитавање, компресија итд.)
|
|
|
- **Алатке и технике** за континуирано праћење перформанси
|
|
|
|
|
|
## Захтеви за истраживање
|
|
|
|
|
|
**Не ослањајте се само на алате у претраживачу** - проширите своју анализу користећи:
|
|
|
|
|
|
**Услуге за проверу трећих страна:**
|
|
|
- [Google Lighthouse](https://developers.google.com/web/tools/lighthouse) - Свеобухватне провере
|
|
|
- [GTmetrix](https://gtmetrix.com/) - Увид у перформансе и оптимизацију
|
|
|
- [WebPageTest](https://www.webpagetest.org/) - Тестирање у реалним условима
|
|
|
- [Pingdom](https://tools.pingdom.com/) - Глобално праћење перформанси
|
|
|
|
|
|
**Специјализовани алати за анализу:**
|
|
|
- [Bundle Analyzer](https://bundlephobia.com/) - Анализа величине JavaScript пакета
|
|
|
- [Алатке за оптимизацију слика](https://squoosh.app/) - Могућности оптимизације ресурса
|
|
|
- [Анализа сигурносних заглавља](https://securityheaders.com/) - Утицај сигурности на перформансе
|
|
|
|
|
|
## Формат испоруке
|
|
|
|
|
|
Направите професионални извештај (2-3 странице) који укључује:
|
|
|
|
|
|
1. **Извршни резиме** - Преглед кључних налаза и препорука
|
|
|
2. **Методологија** - Коришћени алати и приступ тестирању
|
|
|
3. **Процена тренутних перформанси** - Основне метрике и мерења
|
|
|
4. **Идентификовани проблеми** - Детаљна анализа проблема уз податке који их подржавају
|
|
|
5. **Препоруке** - Стратегије побољшања по приоритету
|
|
|
6. **План имплементације** - Корак-по-корак план оптимизације
|
|
|
|
|
|
**Укључите визуелне доказе:**
|
|
|
- Снимке екрана алата за перформансе и метрика
|
|
|
- Дијаграми или графиконе који приказују податке о перформансама
|
|
|
- Поређења пре/после где је могуће
|
|
|
- Дијаграме водопада мреже и разложене ресурсе
|
|
|
|
|
|
## Рубрика
|
|
|
|
|
|
| Критеријум | Изузетно (90-100%) | Довољно (70-89%) | Потребно побољшање (50-69%) |
|
|
|
| ---------- | ------------------ | ---------------- | -------------------------- |
|
|
|
| **Дубина анализе** | Свеобухватна анализа користећи 4+ алата са детаљним метрикама, анализом узрока и проценом утицаја на кориснике | Добра анализа користећи 3 алата са јасним метрикама и основном идентификацијом проблема | Основна анализа користећи 2 алата са ограниченом дубином и минималном идентификацијом проблема |
|
|
|
| **Разноврсност алата** | Користи алате у претраживачу + 3+ услуге трећих страна уз упоредну анализу и увиде из сваке | Користи алате у претраживачу + 2 услуге трећих страна уз неку упоредну анализу | Користи алате у претраживачу + 1 услугу треће стране уз ограничено поређење |
|
|
|
| **Идентификација проблема** | Идентификује 5+ специфичних проблема са перформансама уз детаљну анализу узрока и квантитативни утицај | Идентификује 3-4 проблема са перформансама уз добру анализу и неку меру утицаја | Идентификује 1-2 проблема са перформансама уз основну анализу |
|
|
|
| **Препоруке** | Пружа специфичне, применљиве препоруке са детаљима имплементације, очекиваним утицајем и савременим најбољим праксама | Пружа добре препоруке са неким смерницама за имплементацију и очекиваним исходима | Пружа основне препоруке са ограниченим детаљима имплементације |
|
|
|
| **Професионална презентација** | Добро организован извештај са јасном структуром, визуелним доказима, извршним резимеом и професионалним форматирањем | Добра организација са неким визуелним доказима и јасном структуром | Основна организација са минималним визуелним доказима |
|
|
|
|
|
|
## Исходи учења
|
|
|
|
|
|
Завршетком овог задатка, показаћете своју способност да:
|
|
|
- **Примените** професионалне алате и методологије за анализу перформанси
|
|
|
- **Идентификујете** проблеме са перформансама користећи анализу засновану на подацима
|
|
|
- **Анализирате** однос између квалитета кода и корисничког искуства
|
|
|
- **Препоручите** специфичне, применљиве стратегије оптимизације
|
|
|
- **Комуницирате** техничке налазе у професионалном формату
|
|
|
|
|
|
Овај задатак јача концепте перформанси научене на часу, истовремено развијајући практичне вештине које ћете користити током своје каријере у веб програмирању.
|
|
|
|
|
|
---
|
|
|
|
|
|
**Одрицање од одговорности**:
|
|
|
Овај документ је преведен помоћу услуге за превођење вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода. |