7.0 KiB
Analiza witryny pod kątem wydajności
Przegląd zadania
Analiza wydajności jest kluczową umiejętnością współczesnych programistów webowych. W tym zadaniu przeprowadzisz kompleksowy audyt wydajności rzeczywistej strony internetowej, korzystając zarówno z narzędzi przeglądarkowych, jak i usług zewnętrznych, aby zidentyfikować wąskie gardła i zaproponować strategie optymalizacji.
Twoim zadaniem jest przygotowanie szczegółowego raportu wydajności, który pokaże Twoje zrozumienie zasad wydajności stron internetowych oraz umiejętność efektywnego korzystania z profesjonalnych narzędzi analitycznych.
Instrukcje do zadania
Wybierz stronę do analizy – wybierz jedną z poniższych opcji:
- Popularna strona, której często używasz (serwis informacyjny, media społecznościowe, e-commerce)
- Strona projektu open-source (strony na GitHub Pages, witryny dokumentacyjne)
- Strona lokalnej firmy lub portfolio
- Twój własny projekt lub poprzednie prace kursowe
Przeprowadź analizę za pomocą wielu narzędzi wykorzystując co najmniej trzy różne metody:
- Narzędzia deweloperskie przeglądarki – użyj zakładki Wydajność (Performance) w Chrome/Edge do szczegółowego profilowania
- Narzędzia audytowe online – wypróbuj Lighthouse, GTmetrix lub WebPageTest
- Analiza sieci – zbadaj ładowanie zasobów, rozmiary plików i wzorce żądań
Udokumentuj swoje ustalenia w kompleksowym raporcie, który powinien zawierać:
Analiza metryk wydajności
- Pomiar czasu ładowania z wielu narzędzi i perspektyw
- Wyniki Core Web Vitals (LCP, FID, CLS) i ich znaczenie
- Podział zasobów pokazujący, które elementy najbardziej wpływają na czas ładowania
- Analiza wykresu wodospadu sieci wskazująca zasoby blokujące
Identyfikacja problemów
- Konkretnie zidentyfikowane wąskie gardła wydajności z danymi wspierającymi
- Analiza przyczyn źródłowych wyjaśniająca, dlaczego każdy problem występuje
- Ocena wpływu na użytkownika opisująca, jak problemy wpływają na rzeczywistych użytkowników
- Lista priorytetów problemów według ich powagi i trudności naprawy
Rekomendacje optymalizacji
- Konkretne, możliwe do wdrożenia usprawnienia z oczekiwanym efektem
- Strategie wdrożeniowe dla każdej rekomendacji
- Nowoczesne najlepsze praktyki które mogą zostać zastosowane (np. lazy loading, kompresja)
- Narzędzia i techniki do ciągłego monitorowania wydajności
Wymagania badawcze
Nie ograniczaj się tylko do narzędzi przeglądarki – rozszerz swoją analizę korzystając z:
Zewnętrznych usług audytowych:
- Google Lighthouse – kompleksowe audyty
- GTmetrix – wgląd w wydajność i optymalizację
- WebPageTest – testy w warunkach rzeczywistych
- Pingdom – globalny monitoring wydajności
Specjalistyczne narzędzia analityczne:
- Bundle Analyzer – analiza rozmiaru paczek JavaScript
- Narzędzia optymalizacji obrazów – możliwości optymalizacji zasobów
- Analiza nagłówków bezpieczeństwa – wpływ zabezpieczeń na wydajność
Format dostarczonych materiałów
Stwórz profesjonalny raport (2-3 strony), który powinien zawierać:
- Streszczenie wykonawcze – kluczowe wnioski i przegląd rekomendacji
- Metodologię – użyte narzędzia i podejście testowe
- Obecną ocenę wydajności – wyjściowe metryki i pomiary
- Zidentyfikowane problemy – szczegółową analizę problemów z danymi wspierającymi
- Rekomendacje – priorytetowe strategie poprawy
- Plan wdrożenia – krok po kroku plan optymalizacji
Dołącz dowody wizualne:
- Zrzuty ekranu z narzędzi analitycznych i metryk
- Wykresy i diagramy prezentujące dane o wydajności
- Porównania przed i po tam, gdzie to możliwe
- Wykresy wodospadu sieci i podziały zasobów
Kryteria oceny
| Kryterium | Wzorowa (90-100%) | Zadowalająca (70-89%) | Wymaga poprawy (50-69%) |
|---|---|---|---|
| Głębokość analizy | Kompleksowa analiza z użyciem 4+ narzędzi, szczegółowymi metrykami, analizą przyczyn i oceną wpływu na użytkownika | Dobra analiza z 3 narzędziami, jasnymi metrykami i podstawową identyfikacją problemów | Podstawowa analiza z 2 narzędziami, ograniczona głębokość i minimalna identyfikacja problemów |
| Różnorodność narzędzi | Użycie narzędzi przeglądarki + 3+ zewnętrznych usług z analizą porównawczą i wnioskami z każdego | Użycie narzędzi przeglądarki + 2 zewnętrznych usług z częściową analizą porównawczą | Użycie narzędzi przeglądarki + 1 zewnętrznej usługi z ograniczonym porównaniem |
| Identyfikacja problemów | Identyfikacja 5+ specyficznych problemów wydajności z dokładną analizą przyczyn i określonym wpływem | Identyfikacja 3-4 problemów z dobrą analizą i częściową oceną wpływu | Identyfikacja 1-2 problemów z podstawową analizą |
| Rekomendacje | Specyficzne, wykonalne zalecenia z detalami wdrożenia, oczekiwanym efektem i nowoczesnymi praktykami | Dobre rekomendacje z pewnym wskazaniem wdrożenia i oczekiwanym wynikiem | Podstawowe zalecenia z ograniczonymi szczegółami wdrożenia |
| Prezentacja zawodowa | Raport dobrze zorganizowany, klarowna struktura, dowody wizualne, streszczenie wykonawcze i profesjonalna forma | Dobra organizacja z częściowymi dowodami wizualnymi i jasną strukturą | Podstawowa organizacja z minimalną ilością dowodów wizualnych |
Efekty uczenia się
Realizując to zadanie, wykażesz się zdolnością do:
- Stosowania profesjonalnych narzędzi i metod analizy wydajności
- Identyfikowania wąskich gardeł wydajności na podstawie analizy danych
- Analizowania związku między jakością kodu a doświadczeniem użytkownika
- Rekomendowania konkretnych, wykonalnych strategii optymalizacji
- Komunikowania wyników technicznych w profesjonalnym formacie
To zadanie utrwala poznane pojęcia dotyczące wydajności i rozwija praktyczne umiejętności, które wykorzystasz przez całą karierę web developera.
Zastrzeżenie:
Niniejszy dokument został przetłumaczony przy użyciu usługi tłumaczenia AI Co-op Translator. Mimo że dokładamy wszelkich starań, aby tłumaczenie było precyzyjne, prosimy mieć na uwadze, że automatyczne tłumaczenia mogą zawierać błędy lub niedokładności. Oryginalny dokument w języku źródłowym powinien być uznawany za ostateczne i wiążące źródło informacji. W przypadku ważnych danych zalecamy skorzystanie z profesjonalnego, ludzkiego tłumaczenia. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z wykorzystania tego tłumaczenia.