KWALIFIKACJA INF3 - TEST WIEDZY NR 4

PYTANIE NR 15.
Podczas procesu optymalizacji strony internetowej, zauważyłeś, że strona ładuje się wolno. Które z poniższych działań najprawdopodobniej przyspieszy ładowanie strony?
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Kompresja (często połączona z minifikacją) plików CSS i JavaScript zwykle zmniejsza ich rozmiar do pobrania, co skraca transfer i przyspiesza wczytywanie strony.
Pozostałe działania zwiększają ilość danych lub pracy przeglądarki, więc zwykle spowalniają ładowanie.

Pełne wyjaśnienie:

Wydajność ładowania strony internetowej zależy w dużej mierze od rozmiaru zasobów pobieranych przez przeglądarkę oraz od tego, ile pracy musi ona wykonać, aby stronę wyrenderować i uruchomić skrypty.

Odpowiedź "Kompresja plików CSS i JavaScript" jest trafna, ponieważ w praktyce optymalizacji front-end najczęściej zaczyna się od ograniczenia "ciężaru" statycznych plików. Kompresja (a często także minifikacja) redukuje liczbę bajtów przesyłanych w sieci, co zwykle skraca czas pobierania, szczególnie na wolniejszych łączach i urządzeniach mobilnych. Mniejszy plik to także często szybsze przetworzenie przez przeglądarkę.

Dlaczego pozostałe propozycje są niekorzystne?

  • "Dodanie więcej multimediów do strony" zwykle zwiększa łączny rozmiar pobieranych danych (obrazy/wideo/audio) i liczbę żądań sieciowych. Bez dodatkowych technik (kompresja obrazów, lazy loading, odpowiednie formaty) najczęściej prowadzi to do wolniejszego ładowania.
  • "Użycie większej ilości kodu JavaScript" to zazwyczaj większy bundle do pobrania i więcej wykonywanego kodu. Może to pogorszyć zarówno czas pobierania, jak i czas wykonywania skryptów (np. blokowanie głównego wątku), co odczuwalnie spowalnia start strony.
  • "Zwiększenie ilości tekstu na stronie" może wydawać się "lekkie", ale wciąż zwiększa rozmiar HTML i pracę renderowania (DOM), a także może pociągać za sobą dodatkowe style/układy. Zwykle nie jest to działanie przyspieszające, szczególnie gdy problemem są ciężkie zasoby CSS/JS.

Wskazówka egzaminacyjna: gdy w odpowiedziach pojawia się działanie zmniejszające rozmiar zasobów (kompresja/minifikacja/cache), a inne opcje zwiększają zawartość lub kod, najczęściej poprawna będzie opcja redukująca transfer i pracę przeglądarki.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Kompresja zmniejsza liczbę bajtów przesyłanych z serwera do przeglądarki, więc pliki szybciej się pobierają, zwłaszcza na wolnych łączach. Często łączy się ją z minifikacją, co dodatkowo redukuje rozmiar kodu i może poprawić odczuwalny czas startu strony.
Minifikacja usuwa zbędne znaki (spacje, komentarze) i skraca zapis kodu, zmniejszając rozmiar "logiczny" pliku. Kompresja (np. na poziomie HTTP) pakuje dane do bardziej zwartej formy na czas transferu. W praktyce często stosuje się oba podejścia jednocześnie.
Multimedia (obrazy, wideo, audio) zwykle mają dużo większy rozmiar niż tekst czy kod, więc zwiększają transfer i liczbę żądań sieciowych. Bez optymalizacji (kompresja, odpowiedni format, lazy loading) przeglądarka musi pobrać więcej danych, co wydłuża czas wczytywania.
Tak. Więcej JavaScript to zwykle większy plik do pobrania oraz więcej kodu do parsowania i wykonania. To może blokować główny wątek, opóźniać interakcje i zwiększać czas startu aplikacji. Dlatego ogranicza się rozmiar bundla i dzieli kod na części ładowane na żądanie.
Najczęściej używa się kart Network i Performance w DevTools. W Network widać rozmiary plików, czasy pobierania i liczbę żądań. W Performance można zobaczyć, czy wykonywanie JavaScript blokuje renderowanie. To pomaga wskazać, czy problemem jest transfer czy praca CPU.
Jeśli wąskim gardłem jest np. wolna odpowiedź serwera, zbyt wiele zapytań do bazy danych albo ciężkie obrazy/wideo, sama kompresja CSS/JS może poprawić sytuację tylko częściowo. Wtedy trzeba optymalizować backend, cache, obrazy, a także ograniczyć liczbę zasobów krytycznych.
Typowe działania to: cache przeglądarki, łączenie i dzielenie plików w zależności od potrzeb, usuwanie nieużywanego CSS/JS, opóźnianie ładowania skryptów niekrytycznych, optymalizacja obrazów oraz ograniczanie liczby żądań HTTP. Wybór zależy od tego, co dominuje w pomiarach.
Więcej tekstu to większy HTML i często większy DOM, co może zwiększyć pracę renderowania i stylowania. Tekst bywa "lekki" w porównaniu z multimediami, ale nie jest to działanie przyspieszające. Optymalizacja polega raczej na redukcji zbędnych zasobów i usprawnieniu ścieżki krytycznej renderowania.
Częsty błąd to mylenie rozbudowy strony z jej przyspieszeniem (dodawanie treści zamiast redukcji). Inny błąd to skupienie się na jednym elemencie (np. tylko JS) bez patrzenia na transfer i liczbę żądań. Pomaga myślenie: "co zmniejsza dane do pobrania i pracę przeglądarki?".
Warto ćwiczyć na prostych przykładach: porównaj stronę przed i po minifikacji/kompresji CSS i JS, zobacz różnice w DevTools (Network). Naucz się pojęć: zasoby krytyczne, cache, liczba requestów, rozmiar bundla. Na egzaminie wybieraj odpowiedzi zmniejszające transfer i obciążenie przeglądarki.
info

Statystycznie 58% uczniów zna prawidłową odpowiedź. średnie

Źródła:

  • web.dev (Google Developers) – sekcja Performance / Minify and compress resources: https://web.dev/fast/ (dostęp 2026-03-01)
  • MDN Web Docs – HTTP Compression (ogólne zasady kompresji odpowiedzi): https://developer.mozilla.org/en-US/docs/Web/HTTP/Compression (dostęp 2026-03-01)
  • MDN Web Docs – JavaScript performance (wpływ ilości JS na wydajność): https://developer.mozilla.org/en-US/docs/Learn/Performance (dostęp 2026-03-01)

Materiały:

  • Dokumentacja web.dev o optymalizacji wydajności (Performance)
  • MDN Web Docs: optymalizacja zasobów, kompresja i minifikacja
  • Materiały o narzędziach developerskich przeglądarki (Network/Performance)

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego