Dlaczego potrzebujesz tych informacji?

Niebawem, każda strona WWW, pomimo wartościowego contentu, jeśli ładuje się wolno i powoduje frustrację wśród użytkowników podczas długiego ładowania i nieintuicyjnej obsługi, zostanie gorzej traktowana w rankingach wyszukiwania i będzie flagowana jako nieprzyjazna.

Pomijając kwestię SEO, jako frontend developer, powinieneś po prostu dbać o to, aby User Experience strony WWW był jak najlepszy.

Dołącz do darmowego mailingu

Dlatego powstał ten kurs o optymalizacji stron i aplikacji WWW!

Jako frontend developer powinieneś dbać, by strony/aplikacje, które tworzysz w swojej firmie lub na własny użytek ładowały się jak naszybszciej i były mega przyjazne dla użytkowników.

Zoptymalizowany frontend to Twój obowiązek!

Sprawdź, czego się nauczysz

Czego się nauczysz

Po ukończeniu tego kursu, zastosujesz:

Performance Budget

Kulturę Performance Budget i jak być krok przed konkurencją

Dla siebie samego lub dla całego zespołu, w którym pracujesz. Nauczysz się dobierać techniki optymalizacji WWW, które mają bezpośredni wpływ na biznes.

Optymalizacja renderowania

Optymalizację
renderowania

Krytyczna ścieżka renderowania, Critical CSS Path, rendering elementów DOM, Layout Shifts, CSS Containment.

Metryki Lighthouse, Google Pagespeed Insights

Wyciąganie wniosków
z metryk

Core Web Vitals (LCP, FDI, CLS), Time To Interactive, Time To First Byte i wiele innych na podstawie narzędzi DevTools, Lighthouse i innych.

Skrypty zewnętrzne 3rd parties

Techniki optymalizacji skryptów zewnętrznych

Skrypty zewnętrzne tzw. 3rd parties spowalniają niemal każdą stronę i wiem, co można poprawić!

Ładowanie fontów

Strategie ładowania
fontów

Google Web Fonts, Typekit, do tego prefetching, preloading i wiele ciekawych technik radzenia z ich ładowaniem.

Jak ładować obrazki, wideo i iframe

Optymalne ładowanie obrazków, wideo, iframe

Kompresja assetów, picture sety, lazy loading (obrazków, teł, wideo), komponenty connection-aware.

Accessibility

Zoptymalizowanie strony/aplikacji pod kątem użytkowników niepełnosprawnych to bardzo ważny element procesu optymalizacji.

Web performance a CMSy

Techniki optymalizacji z rozbudowanymi CMSami

Wordpressa nie da się zoptymalizować? Potrzymaj mi piwo...

Animacje CSS i Javascript

Techniki optymalizacji animacji CSS i Javascript

Dowiesz się, co można zrobić, aby przyspieszyć animacje w CSS lub JS.

O programie

Zoptymalizowany frontend to 12-tygodniowy program nauki tworzenia szybkiej, intuicyjnej warstwy frontendowej projektów webowych.

Kurs ten kierowany jest dla frontend developerów (poziom mid, mid+, senior) oraz UX designerów, pracujących w ścisłej współpracy z frontend developerami.

Poznaj program

Agenda kursu (12 modułów)

Moduł 1: Plan gry i ustalenia

  • Lekcja 1: Powitanie
  • Lekcja 2: Po co optymalizować frontend?
  • Lekcja 3: Przegląd narzędzi do pomiaru wydajności
  • Lekcja 4: Czym jest Performance Budget i KPI?
  • Lekcja 5: Psychologia a wydajność; zarządzanie percepcją, zarządzanie tolerancją
  • Lekcja 6: Jak sprzedawać optymalizację biznesowi?
  • Lekcja 7: Wymagania
  • Lekcja 8: Założenia projektu (praca domowa), efekt początkowy i końcowy
  • Lekcja 9: Praca domowa

Moduł 2: Metryki

  • Lekcja 1: Wyjaśnienie pojęć
  • Lekcja 2: Jak działa przeglądarka i proces renderowania strony WWW
  • Lekcja 3: Krytyczna ścieżka renderowania
  • Lekcja 4: Najczęściej używane metryki
  • Lekcja 5: Google Web Core Vitals
  • Lekcja 6: First Contentful Paint
  • Lekcja 7: Largest Contentful Paint
  • Lekcja 8: Time To Interactive, First Input Delay
  • Lekcja 9: Cumulative Layout Shifts
  • Lekcja 10: Time To First Byte
  • Lekcja 11: Total Blocking Time
  • Lekcja 12: Customowe metryki
  • Lekcja 13: Praca domowa

Moduł 3: Ładowanie fontów

  • Lekcja 1: Omówienie problemów w projekcie
  • Lekcja 2: Najszybszy sposób na przyspieszenie ładowania fontów Google'a
  • Lekcja 3: Ogólne porady dotyczące serwowania fontów
  • Lekcja 3: Resource hinty w kontekście fontów
  • Lekcja 4: Sztuczki z Google Web Fonts
  • Lekcja 5: Lokalnie ładowane fonty
  • Lekcja 6: Jednoczesne synchroniczne i asynchroniczne ładowanie fontów
  • Lekcja 7: Praca domowa

Moduł 4: Lazy loading

Moduł 5: Optymalizacja serwowania obrazków i wideo

Moduł 6: HTML / Accessibility

Moduł 7: Wydajny i lekki Javascript

Moduł 8: Skrypty zewnętrzne (3rd parties)

Moduł 9: Optymalizacja CSS

Moduł 10: Animacje CSS / JS

Moduł 11: Server-hardening a web performance

Moduł 12: Dalsze wskazówki

Co i kiedy?

Program rusza jesienią 2020.

Póki co zapisz się na mailing - otrzymasz masę cennej wiedzy za darmo na temat optymalizacji frontendu.

Zapraszam również na mój Instagram - zobaczysz jak powstaje specjalna platforma kursowa, którą buduję specjalnie pod ten kurs!

Kto?

Jestem Bartek Miś i od ponad 7 lat jestem założycielem i technicznym liderem Software House'u Studio Sidekicks / Bigger Picture, który tworzy wyjątkowe strony i aplikacje WWW zorientowane na efekt WOW, użyteczność i przede wszystkim szybkość działania. Projekty, które tworzymy wielokrotnie zdobywały prestiżowe nagrody, np. Mobile Site of The Week.

To właśnie ja poprowadzę program nauki pisania zoptymalizowanego frontendu.

A to jest serio dobre...

Zobacz blog o optymalizacji