Web-Dev-For-Beginners/translations/uk/5-browser-extension/3-background-tasks-and-performance/assignment.md

<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "a203e560e58ccc6ba68bffc40c7c8676",
  "translation_date": "2025-10-24T16:00:13+00:00",
  "source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
  "language_code": "uk"
}
-->
# Аналіз сайту на продуктивність

## Огляд завдання

Аналіз продуктивності є важливим навиком для сучасних веб-розробників. У цьому завданні ви проведете всебічний аудит продуктивності реального веб-сайту, використовуючи як інструменти браузера, так і сторонні сервіси, щоб визначити вузькі місця та запропонувати стратегії оптимізації.

Ваше завдання — надати детальний звіт про продуктивність, який демонструє ваше розуміння принципів веб-продуктивності та вашу здатність ефективно використовувати професійні інструменти аналізу.

## Інструкції до завдання

**Виберіть веб-сайт** для аналізу - оберіть один із наступних варіантів:
- Популярний веб-сайт, яким ви часто користуєтеся (новинний сайт, соціальні мережі, електронна комерція)
- Веб-сайт відкритого проекту (GitHub Pages, сайти документації)
- Веб-сайт місцевого бізнесу або портфоліо
- Ваш власний проект або попередня курсова робота

**Проведіть аналіз за допомогою кількох інструментів**, використовуючи щонайменше три різні підходи:
- **DevTools браузера** - використовуйте вкладку Performance у Chrome/Edge для детального профілювання
- **Онлайн-інструменти аудиту** - спробуйте 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). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.