Masz już konto? Zaloguj się

Wszystko o Web Vitals

Warsztat ten został przygotowany z myślą o front-end developerach, którzy chcą poszerzyć swoją wiedzę w zakresie optymalizacji stron www i aplikacji a w szczególności metryk Web Vitals

1 lekcji

1h 8min

5 (13 oceny)

Wszystko o Web Vitals - Optymalizacja Front-Endu w Praktyce

Od maja 2021 niewydajne - pod względem front-endu - strony WWW, będą najprawdopodobniej niżej pozycjonowane w wynikach wyszukiwania Google. Podczas tego warsztatu pokażę Ci przykład procesu optymalizacji niewydajnej strony od A do Z, kierując się metrykami Web Vitals (startując z noty 15/100 wg Lighthouse, osiągając wynik 90+ na mobile i desktop). Omówię krok po kroku techniki optymalizacyjne, pokazując w kodzie konkretne, praktyczne, wydajne rozwiązania.

Czym są Metryki Web Core Vitals?

Web Core Vitals to przygotowany przez Google, zbiór wskaźników mierzących doświadczenia użytkowników. Zawierają się w nich m.in. LCP - Largest Contentful Paint, FID - First Input Delay oraz CLS - Cumulative Layout Shift. Już teraz zapowiedziano, że wskaźniki te będą zmieniać się na przestrzeni czasu a obecne skupiają się na doświadczeniach związanych z wczytywaniem, interaktywnością oraz stabilnością elementów wizualnych.

Dlaczego Web Core Vitals są ważne?

Powodów jest przynajmniej kilka. Najważniejsze z nich to fakt, że Google od maja 2021 uwzględni je w czynnikach wpływających na pozycję stron w wyszukiwarce (SEO). Zatem każdy serwis który opiera swój model biznesowy o ruch organiczny, zdecydowanie powinien przygotować wsparcie dla WCV. Dodatkowo Web Core Vitals mają realne przełożenie na doświadczenia użytkowników, co zawsze powinno być naszym priorytetem.

Dobry UX a przewaga konkurencyjna

Doświadczenia użytkownika to przewaga konkurencyjna, szczególnie w czasach ogromnej konkurencji na rynku oprogramowania. Stworzenie aplikacji, która rozwiązuje konkretne problemy nie jest zwykle dużym problemem. Za to przygotowanie jej tak, aby doświadczenia płynące z jej wykorzystania zachęcały użytkowników do polecania jej innym - już tak. Na dobry UX składa się wiele różnych czynników i zaangażowania każdego działu w firmie. Ostatecznie wysiłek całej firmy może być zmarnowany w chwili gdy nasza strona www / aplikacja nie są odpowiednio wydajne.

Zasada 20 / 80

Optymalizacja nie jest prostym zadaniem a ilość pracy różni się w zależności od skali naszej aplikacji. Dobra wiadomość jest taka, że istnieje 20% działań które możemy podjąć aby uzyskać 80% efektu, co jest często w zupełności wystarczające do dostarczenia odpowiednich doświadczeń użytkownika. W tym warsztacie dowiesz się nie tylko o tych technikach ale również sposobach, które pozwolą Ci dostarczyć możliwie najlepsze efekty.

Teoria i praktyka

W tym warsztacie znajdziesz mnóstwo teoretycznych zagadnień wyjaśniających fundamenty stojące za dobrą optymalizacją aplikacji. Jednocześnie teoria ta nie jest w żaden sposób oderwana od praktyki. Na konkretnych przykładach dowiesz się jak zoptymalizować aplikację krok po kroku oraz jak monitorować bieżący postęp zmian.

Dla kogo jest ten kurs?

Warsztat ten został przygotowany z myślą o front-end developerach, którzy chcą poszerzyć swoją wiedzę i umiejętności w zakresie optymalizacji stron www i aplikacji a w szczególności metryk Web Vitals. Jest to niezbędna wiedza, która w 2021 roku będzie mieć znaczne przełożenie na wartość biznesową.

Czego się nauczysz?

  • Czym są metryki Web Vitals?

  • Czym są metryki Core Web Vitals?

  • Czym są Other Web Vitals?

  • Jak liczone są wyniki w PageSpeed Insights / Lighthouse

  • Optymalizacja strony krok po kroku

  • Najważniejsze czynniki wpływające na wydajność

  • Optymalizacja obrazków

  • Optymalizacja fontów

  • Wczytywanie CSS

  • Lazy Loading

  • Skrypty zewnętrzne

  • Zaawansowane techniki optymalizacji

Autor kursu

Bartek Miś

Co-Founder & CTO at Studio Sidekicks / Bigger Picture

Średnia ocen autora: 5

Bio
Programuję, koduję. Współtworzę polsko-angielską agencję kreatywną Studio Sidekicks / Bigger Picture. Zarządzam zespołem programistów. Tworzę szkolenia online.

Dołącz do ponad 10 tys. zadowolonych z naszych kursów

Bardzo dobry kurs. Całość omówiona na realnym przykładzie, co dla mnie jest ogromnym plusem. Cały kurs przerobiłem stosując poruszone zagadnienia na stronie, która kilka dni temu stworzyłem dla klienta. Z wyniku w Google PageSpeed Insights 72/90 strona skoczyła na 99/100. To chyba jest najlepszą rekomendacją.

Maciek Antoniewski

7 czerwca 2021

G2A.COM Miesiąc

7 czerwca 2021

Grzegorz Szymborski

7 czerwca 2021

Robert Studziński

18 lipca 2021

Dla mnie bardzo przydatny kurs

Przemysław Szliep

30 sierpnia 2021

Zuzanna

3 września 2021

Adam Grzanka

3 października 2021

Nadzieja Karpińska

13 października 2021

Sebastian Karpik

29 listopada 2021

Maciej Dzik

30 listopada 2021

Adrian Ciołkiewicz

24 lutego 2022

Adrian Kalinowski

18 stycznia 2022

Bartłomiej

2 marca 2022

Kurs Wszystko o Web Vitals

  • 1 lekcji wideo

  • 1h 8min materiału

  • Ostatnia rewizja 28.05.2021

  • Certyfikat w ramach ścieżek

  • Dostęp z urządzeń mobilnych

Dlaczego wybrać właśnie ten kurs?

Efektywna nauka

Kurs wideo to najbardziej efektywna a zarazem najprzyjemniejsza forma nauki. Jest on tak prowadzony, byś cały czas mógł go śledzić z zainteresowaniem i zaangażowaniem, a także czerpać satysfakcję ze zdobytej wiedzy!

Wiedza ekspertów

Wiedza, którą otrzymujesz w tym kursie, to nie tylko sucha teoria, ale również wskazówki od praktyka z wieloletnim doświadczeniem, dzięki którym dużo łatwiej będzie Ci opanować materiał i pracować efektywniej.

Praktyczne przykłady

Uczysz się na praktycznych przykładach. Kurs, który masz przed sobą to esencja praktycznej wiedzy i doświadczenia a także wzorów, które oszczędzą Ci godziny pracy i poszukiwań.

Pytania i odpowiedzi

Przeczytaj najczęściej zadawane pytania

Masz więcej pytań?

Porozmawiaj z nami na na czacie

Wyślij nam e-mail

Zadzwoń +48 880880606

Czy każdy kurs ma pliki źródłowe?

Nie każdy. Jeśli pliki są dostępne dla danego kursu, znajdziesz je w zakładce źródła. Niektóre kursy nie posiadają źródeł ponieważ nie są potrzebne, inne nie mogły być zamieszczone np. ze względu na prawa autorskie do wykorzystania komercyjnych prac naszych autorów. Staramy się aby kursy były maksymalnie praktyczne i chętnie pokazujemy zaplecze zawodowe naszych autorów, ale niekiedy nie możemy dołączyć go w postaci źródeł.

Jak jest skonstruowany kurs?

Kurs składa się z rozdziałów oraz lekcji. Staramy się, aby optymalnie kursy miały 5-7 rozdziałów po około 5-10 lekcji w każdym. W ten sposób nauka jest optymalna a podtrzymanie uwagi staje się łatwiejsze. Rekomendujemy przerabianie nie więcej niż jednego rozdziału naraz a po jego przerobieniu powtórzenie materiału we własnym zakresie.

Jak najlepiej wykorzystać kurs?

Potraktuj kurs jako inspirację do własnej pracy. Tam, gdzie się da staraj się powtarzać czynności, które wykonuje autor. Nie powtarzaj ich jednak bezmyślnie - spróbuj zmodyfikować przykłady i dostosować je do swoich potrzeb. W ten sposób przyswoisz materiał jeszcze lepiej!

Jak mogę uzyskać dostęp do kursu?

Możesz albo wykupić ten konkretny kurs przez koszyk, uzyskując do niego (i jego rewizji) bezterminowy dostęp, albo wykupić wariant abonamentu, który obejmuje dany kurs i w ten sposób oglądać go oraz inne materiały na platformie tak długo, jak Twój abonament jest aktywny.

Czy kurs jest aktualny?

Staramy się aby wszystkie materiały na stronie były aktualne. Nie znaczy to, że kurs powstał bardzo niedawno. Często na stronie znajdziesz trochę starsze kursy, jednak regularnie wykonujemy ich rewizję i zmieniamy lekcje - czy to przez dodanie stosownych komentarzy z aktualizacją, czy poprzez nagranie danej lekcji jeszcze raz. Datę ostatniej rewizji znajdziesz w informacjach o kursie.

Czym się różni kurs od warsztatu i ścieżki?

Kursy to kilku godzinne, kompleksowe opracowanie danego zagadnienia, podzielone na lekcje i rozdziały. Często uzupełniają je Warsztaty, które mają formę jednej dłuższej, praktycznej lekcji (30min-1h), natomiast ścieżki stanowią zbiór jednych i drugich materiałów - ułożoną z kursów i warsztatów playlistę, która pozwala Ci kompleksowo opanować dane zagadnienie.

Z kursów eduweb.pl korzystam od początku powstania platformy. Kursy są doskonałym rozwiązaniem dla osób, które chcą przekwalifikować się lub poszerzyć umiejętności. Praktyczne źródło wiedzy od ekspertów i praktyków z branży IT i kreatywnej.

Paweł Krzyściak

UI/UX Designer johnny10.com

Zacznij naukę w Wszystko o Web Vitals

  • 1 lekcji wideo

  • 1h 8min materiału

  • Ostatnia rewizja 28.05.2021

  • Certyfikat w ramach ścieżek

  • Dostęp z urządzeń mobilnych