Wydajność sieci to kluczowy aspekt tworzenia witryn, który skupia się na szybkości wczytywania stron oraz reagowaniu na działania użytkowników. Optymalizując witrynę pod kątem skuteczności, zapewniasz użytkownikom lepsze wrażenia. Wygoda użytkowników bardzo ułatwia realizację celów związanych z witryną.
Skuteczność internetu może się wydawać niszowa, ale w rzeczywistości jest to zarówno szerokie, jak i ogólne zagadnienia. Ze względu na złożoność omawianego tematu kurs powinien być przystępny, ale zawierać dużo informacji. Pierwsze wydanie tego kursu skupiało się na podstawach zwiększenia wydajności stron internetowych, które mogą być przydatne dla początkujących.
Celem każdego modułu w tej serii jest stworzenie – tam, gdzie to możliwe – zestawu prezentacji uzupełniających treść każdego modułu i prezentujących kluczowe koncepcje związane z wydajnością. Jest to szkolenie wstępne, dlatego w najbliższych miesiącach planujemy opublikować dodatkowe moduły.
Oto co obejmuje kurs dostępny w ramach szkolenia Wydajność w nauczaniu:
Dlaczego szybkość ma znaczenie
Zanim zaczniesz analizować skuteczność uczenia się, musisz zrozumieć jej rolę w zwiększaniu wygody użytkowników i dowiedzieć się, w jaki sposób może ona wpływać na poprawę wyników. Kurs rozpoczyna się od krótkiego wprowadzenia tych zagadnień i przedstawia ważny kontekst wyjaśniający, dlaczego warto poznać wyniki.
Ogólne kwestie związane z wydajnością kodu HTML
Każda witryna zaczyna się od żądania dokumentu HTML. To żądanie ma duży wpływ na szybkość wczytywania witryny. W tym module omawiamy ważne zagadnienia, takie jak buforowanie kodu HTML, blokowanie parsera czy renderowanie, dzięki czemu pierwsze żądanie kodu HTML witryny jest realizowane w prawidłowy sposób.
Omówienie ścieżki krytycznej
Krytyczna ścieżka renderowania to pojęcie związane z wydajnością internetu, które określa, jak szybko pierwsze renderowanie strony pojawia się w przeglądarce. W tym module omawiamy teorię krytycznej ścieżki renderowania. Omawiamy w nim zagadnienia takie jak blokowanie renderowania i parserów oraz ich znaczenie dla szybkości wyświetlania strony w przeglądarce.
Zoptymalizuj wczytywanie zasobów
Gdy strona wczytuje się, kod HTML odwołuje się do wielu zasobów, które zapewniają wygląd i układ strony za pomocą CSS, a JavaScript – jej interaktywność. W tym module omawiamy szereg ważnych pojęć związanych z tymi zasobami oraz ich wpływem na czas wczytywania strony.
Wspomagaj przeglądarkę, korzystając ze wskazówek dotyczących zasobów
Wskazówki dotyczące zasobów to zbiór funkcji dostępnych w kodzie HTML, które mogą pomóc przeglądarce we wcześniejszym ładowaniu zasobów, a nawet przy wyższym priorytecie. W tym module znajdziesz kilka wskazówek dotyczących zasobów, które pomogą Ci przyspieszyć wczytywanie stron.
Wydajność obrazu
Obrazy stanowią obecnie dużą część danych przenoszonych na wiele stron internetowych. W tym module dowiesz się, jak optymalizować obrazy i wydajnie je wyświetlać, by zminimalizować ilość zużywanych bajtów niezależnie od urządzenia użytkownika.
Skuteczność filmu
Reklamy wideo to typ mediów często stosowany na stronach internetowych, ale wiedza o tym, jak je skutecznie wyświetlać, to jeden z aspektów wydajności, o których nie należy zaniedbywać. W tym module omawiamy kilka kluczowych technik umieszczania filmów w taki sposób, aby witryna działała szybko, oraz inne kwestie związane z wydajnością, które mogą wystąpić w trakcie stosowania takich tagów.
Zoptymalizuj czcionki internetowe
Czcionki internetowe to powszechnie stosowane narzędzie (i słusznie) w internecie, które wzbogaca wygląd witryny w sposób niedostępny dla innych zasobów. Mimo to czcionki internetowe nadal będą musiały generować koszty związane z wydajnością. W tym module omówimy szereg kwestii związanych z wydajnością i techniki czcionek internetowych.
JavaScript z podziałem kodu
Niektóre zasoby nie mają znaczenia przy wstępnym wczytywaniu strony internetowej. Jednym z takich zasobów jest JavaScript, który można odroczyć do momentu, gdy będzie to potrzebne. W tym celu należy użyć techniki podziału kodu. W ten sposób możesz poprawić wydajność przez zmniejszenie przepustowości sieci i rywalizacji z procesorami. Jest to niezwykle istotne, jeśli chcesz poprawić zarówno początkową szybkość wczytywania strony, jak i czas reakcji wejściowej podczas uruchamiania.
Obrazy z leniwym ładowaniem i elementy <iframe>
Obrazy i elementy <iframe> mogą znacznie wykorzystywać przepustowość i czas przetwarzania procesora. Jednak nie wszystkie obrazy i elementy <iframe> muszą być wczytywane podczas początkowego wczytywania strony. Można je też odłożyć na później, gdy jest największe prawdopodobieństwo, że użytkownik je zobaczy. Ta metoda nazywa się leniwym ładowaniem. W tym module objaśniamy funkcję leniwego ładowania obrazów i elementów <iframe>, dzięki czemu strony będą się szybciej ładować i wykorzystywać przepustowość i czas przetwarzania tylko wtedy, gdy jest to konieczne.
Pobieranie z wyprzedzeniem, renderowanie wstępne i wstępne buforowanie skryptu service worker
Choć duża część wydajności dotyczy sposobów optymalizacji i eliminowania zbędnych zasobów, sugerowanie, że niektóre zasoby powinny zostać wczytane, zanim będą potrzebne, może wydawać się paradoksalne. W niektórych przypadkach warto jednak wcześniej załadować określone zasoby. W tym module omawiamy ten aspekt wydajności, ponieważ omawiamy pobieranie z wyprzedzeniem, renderowanie wstępne i wstępne buforowanie przez mechanizmy Service Worker.
Omówienie procesów roboczych
Większość tego, co użytkownik widzi w przeglądarce, odbywa się w jednym wątku nazywanym wątkiem głównym. Istnieją jednak możliwości uruchomienia nowych wątków, aby umożliwić wykonywanie kosztownych zadań obliczeniowych, tak aby wątek główny mógł obsłużyć ważne zadania dla użytkownika. Interfejs API, który to umożliwia, nosi nazwę Web Worker API. W tym module omawiamy jego podstawy.
Konkretny przypadek użycia narzędzia internetowego
Skoro znasz już podstawowe mechanizmy robocze oraz ich możliwości i ograniczenia, nadszedł czas, aby przyjrzeć się konkretnemu przypadkowi użycia ich witryn. W tej wersji demonstracyjnej robot internetowy służy do pobierania pliku JPEG, wyodrębniania jego metadanych i wysyłania go z powrotem do wątku głównego, aby użytkownik mógł go zobaczyć w przeglądarce.
Chcesz rozpocząć naukę skuteczności w internecie? Zacznij od przeczytania pierwszego artykułu Dlaczego szybkość ma znaczenie.