Wielu właścicieli firm, managerów oraz front-end developerów skupia się jedynie na tym, aby projekt internetowy po prostu działał i wyglądał.
Tymczasem kwestia JAK SZYBKO działa i czy jest użyteczny jest szczególnie ważna, aby przynosił oczekiwane rezultaty biznesowe i wizerunkowe.
Każde 100ms opóźnienia podczas ładowania front-endu, przynosi średnio 1% mniej sprzedaży online dla Amazon lub Walmart.
O 27% wzrosła konwersja nowych użytkowników AliExpress po zoptymalizowaniu czasu ładowania strony o 36%.
Netflix zanotował 43% spadku kosztów utrzymania przepustowości łącza po optymalizacji swoich serwisów online.
To niejedyny powód, dlaczego optymalizacja front-endu ma większe znaczenie niż kiedykolwiek...
Od czerwca 2021 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 Google'a i będzie flagowana jako nieprzyjazna.
Pomijając kwestię SEO, jako front-end developer, powinieneś po prostu dbać o to, aby User Experience strony WWW był jak najlepszy. Warstwa front-endowa projektu, którą tworzysz to wizytówka całego biznesu, który reprezentuje.
Dlatego powstał ten kurs o optymalizacji stron i aplikacji WWW!
Jako front-end developer powinieneś dbać, by strony/aplikacje, które tworzysz w swojej firmie lub na własny użytek ładowały się jak najszybciej i były mega przyjazne dla użytkowników.
Zoptymalizowany front-end to Twój obowiązek!
Po ukończeniu tego kursu, zastosujesz:
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.
Optymalizację
renderowania
Krytyczna ścieżka renderowania, Critical CSS Path, rendering elementów DOM, Layout Shifts, CSS Containment.
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.
Techniki optymalizacji skryptów zewnętrznych
Skrypty zewnętrzne tzw. 3rd parties spowalniają niemal każdą stronę i wiem, co można poprawić!
Strategie ładowania
fontów
Google Web Fonts, Typekit, do tego prefetching, preloading i wiele ciekawych technik radzenia z ich ładowaniem.
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.
Techniki optymalizacji z rozbudowanymi CMSami
Wordpressa nie da się zoptymalizować? Potrzymaj mi piwo...
Techniki optymalizacji animacji CSS i Javascript
Dowiesz się, co można zrobić, aby przyspieszyć animacje w CSS lub JS.
Dla kogo ten kurs?
Zoptymalizowany front-end to 13-modułowy program nauki tworzenia szybkiej, intuicyjnej warstwy front-endowej projektów webowych.
Kurs ten kierowany jest dla front-end developerów (poziom mid, mid+, senior) oraz UX designerów, pracujących w ścisłej współpracy z front-end developerami.
Jeżeli dopiero zaczynasz przygodę z front-endem, to ten kurs jeszcze NIE JEST dla Ciebie - zapraszam do wzięcia udziału w kursie nieco później. Optymalizacja front-endu powinna być obowiązkowym etapem nauki tworzenia stron i aplikacji WWW.
Agenda kursu (13 modułów)
Moduł 1: Optymalizacja wydajności a biznes i zespół
- Powitanie
- Lekcja 2: Po co optymalizować frontend?
- Lekcja 3: Jak przekonać (się / lub biznes) do optymalizacji webowej?
- Lekcja 4: Kultura wydajności (w zespole)
- Lekcja 5: Kultura wydajności (w biznesie)
- Lekcja 6: Estetyka a wydajność, czyli design vs development
- Lekcja 7: Performance Budget
- Lekcja 8: Psychologia a wydajność
- Lekcja 9: Narzędzia do pomiaru wydajności
- Lekcja 10: Proces optymalizacji (+ infografika)
- Lekcja 11: Wymagania techniczne względem projektu w kursie
- Lekcja 12: Przegląd możliwości starter kitu do optymalizacji
- Lekcja 13: Założenia projektu, stan początkowy i końcowy, zasady
- Lekcja 12: Praca domowa
Moduł 2: Przeglądarka a krytyczna ścieżka renderowania
- Lekcja 1: Wyjaśnienie pojęć
- Lekcja 2: Przeglądarka i proces renderowania
- Lekcja 3: Krytyczna ścieżka renderowania
- Lekcja 4: Zrozumieć przeglądarkę i CRP (load-time perf)
- Lekcja 5: Zrozumieć przeglądarkę i CRP (run-time perf)
- Lekcja 6: Jak dokonywać pomiarów wydajności, pomiarów CRP?
- Lekcja 7: Analiza waterfall
- Lekcja 8: Jak analizować waterfall (na przykładzie WebPageTest)
- Lekcja 9: Zakładka Performance w DevTools
- Lekcja 10: Optymalizacja krytycznej ścieżki renderowania
- Lekcja 11: Praca domowa
Moduł 3: Wzorce i metryki
- Lekcja 1: Wzorzec RAIL
- Lekcja 2: Wzorzec PRPL
- Lekcja 3: TTFB
- Lekcja 4: First Paint / First Render
- Lekcja 5: First Contentful Paint
- Lekcja 6: Speed Index
- Lekcja 7: Time to Interactive
- Lekcja 8: Web Vitals
- Lekcja 9: First Input Delay, Total Blocking Time
- Lekcja 10: FID, TBT, TTI - jak optymalizować?
- Lekcja 11: Largest Contentful Paint
- Lekcja 12: Largest Contentful Paint - jak optymalizować?
- Lekcja 13: Cumulative Layout Shift
- Lekcja 14: Cumulative Layout Shift - jak optymalizować?
- Lekcja 15: Customowe metryki / Timing API
- Lekcja 16: Która metryka jest najważniejsza?
- Lekcja 17: Praca domowa
Moduł 4: Fonty
- Lekcja 1: Porównanie typów fontów
- Lekcja 2: Wyjaśnienie pojęć (font subsetting, CSS unicode-range, CSS Font Loading API i inne)
- Lekcja 3: Kolejność ładowanych zasobów a fonty
- Lekcja 4: Kolejność ładowanych zasobów a fonty - przykład
- Lekcja 5: Lokalnie ładowane fonty
- Lekcja 6: Jak optymalnie ładować Google Fonts?
- Lekcja 7: Jak optymalnie ładować Typekit?
- Lekcja 8: Jak ładować fonty z ikonkami?
- Lekcja 9: Jak walczyć z FOUT i CLS z powodu fontów?
- Lekcja 10: Strategie ładowania fontów
- Praca domowa
Moduł 5: Lazy loading
- Lekcja 1: Wprowadzenie - co to, po co, dlaczego?
- Lekcja 2: Czego nie ładować "leniwie"?
- Lekcja 3: Metody lazy loadingu
- Lekcja 4: Lazy loading obrazków a SEO
- Lekcja 5: Lazy loading threshold
- Lekcja 6: Lazy loading obrazków i iframe'ów
- Lekcja 7: Lazy loading wideo
- Lekcja 8: Lazy loading widgetów
- Lekcja 9: Lazy loading (responsywnych) teł (background-image)
- Lekcja 10: Lazy loading komponentów
- Lekcja 11: Placeholdery (LQIP, loadery, skeleton placeholders)
- Praca domowa
Moduł 6: Obrazki i wideo
- Lekcja 1: Wprowadzenie
- Lekcja 2: picture set / img@srcset
- Lekcja 3: Obrazki w HTML vs. w CSS
- Lekcja 4: <img> ładowane warunkowo
- Lekcja 5: Kompresja obrazków
- Lekcja 6: WebP, AVIF
- Lekcja 7: Obrazki, wideo @ CDN - czy warto?
- Lekcja 8: Szybkie wdrożenie zoptymalizowanych obrazków
- Lekcja 9: SVG, SVG sprites, base64
- Lekcja 10: Warunkowe ładowanie <video> dla danej rozdzielczości
- Lekcja 11: GIF czy <video>?
- Lekcja 12: Obrazki/wideo connection-aware
- Lekcja 13: Obrazek hero (hero image)
- Lekcja 14: Hero image - przykład zoptymalizowanej implementacji
- Lekcja 15: Serwuj obrazki przez Service Worker
- Praca domowa
Moduł 7: HTML i podstawy Accessibility
- Lekcja 1: Minifikacja & kompresja HTML
- Lekcja 2: Semantyka, optymalizacja DOM, divitis
- Lekcja 3: Page regions
- Lekcja 4: Uporządkowane dane (JSON-LD, Open Graph)
- Lekcja 5: Czym jest dostępność strony?
- Lekcja 6: Nagłówki a SEO i dostępność
- Lekcja 7: Formularze a UX + dostępność
- Lekcja 8: Obrazki, ikonki a dostępność i SEO
- Lekcja 9: Nawigacja na stronach
- Lekcja 10: Kontrast (contrast ratio)
- Lekcja 11: Linki, przyciski
- Praca domowa
Moduł 8: CSS
- Lekcja 1: Jak pisać wydajny CSS?
- Lekcja 2: Jak ładować CSS? [mega ważne]
- Lekcja 3: Alternatywny sposób ładowania CSS
- Lekcja 4: Krytyczny CSS - czy warto?
- Lekcja 5: Minifikacja, kompresja, unused CSS
- Lekcja 6: CSS Containment
- Lekcja 7: prefers-reduced-data
- Praca domowa
Moduł 9: Javascript
- Lekcja 1: Wprowadzenie (problemy z JS)
- Lekcja 2: Przeglądarka a ładowanie JS
- Lekcja 3: Jak ładować pliki JS?
- Lekcja 4: Zmniejszanie rozmiaru plików JS (minifikacja, tree shaking, code splitting, nowoczesny JS)
- Lekcja 5: Jak tworzyć wydajny JS?
- Lekcja 6: Jak tworzyć wydajny JS? (proces + techniczne porady)
- Lekcja 7: Web Workers
- Lekcja 8: Service Worker
- Lekcja 9: Frameworki a wydajność
- Lekcja 10: Dynamiczna strona bez frameworków
- Lekcja 11: Predictive prefetching
- Praca domowa
Moduł 10: Skrypty zewnętrzne
- Lekcja 1: Problemy ze skryptami zewnętrznymi
- Lekcja 2: Optymalizacja ładowania czatu
- Lekcja 3: Optymalizacja ładowania leadboxa z LeadPages
- Lekcja 4: Optymalizacja ładowania Google reCAPTCHA
- Lekcja 5: Technika opóźniania skryptów JS (mega trik)
- Lekcja 6: Tag Manager
- Praca domowa
Moduł 11: Wydajność renderowania, animacji & interakcji
- Lekcja 1: Zrozumieć płynność animacji, scrollowania & interakcji (60fps, jank, warstwy, paint, repaint)
- Lekcja 2: Jak testować płynność animacji & interakcji (analiza wolnych klatek)
- Lekcja 3: CSS a płynność renderowania
- Lekcja 4: Promowanie warstw
- Lekcja 5: requestAnimationFrame
- Lekcja 6: Forced synchronous layout & Layout Trashing
- Lekcja 7: Optymalizacja scrollowania
- Lekcja 8: Animacje CSS vs. JS
- Lekcja 9: Animacje na żądanie
- Lekcja 10: Więcej materiałów + podsumowanie
- Praca domowa
Moduł 12: Server side a front-end
- Lekcja 1: HTTP 1, 2 czy 3 (QUIC)?
- Lekcja 2: Nagłówki HTTP a wydajność
- Lekcja 3: Gzip vs. Brotli
- Lekcja 4: Wolne certyfikaty SSL
- Lekcja 5: Cloudflare
Moduł 13: No-code / low-code + zakończenie
Moduł dostępny na początku marca 2021
- Lekcja 1: Podsumowanie procesu optymalizacji
- Lekcja 2: Pokazanie zoptymalizowanej strony w kursie (na życzenie)
- Lekcja 3: Wydajność a CMSy
- Lekcja 4: Zoptymalizowany Wordpress
- Lekcja 5: AMP
- Lekcja 6: Ciągłe testowanie wydajności
- Lekcja 7: Inspiracje
- Lekcja 8: Co dalej?
Lekcje demo z kursu
Przekonaj się sam, jak one wyglądają.
Wybrane opinie o kursie
(do tej pory dołączyło
101 osób!)
Poniżej znajdziesz wybrane opinie o kursie. Niezmiernie cieszy mnie to, że są tak pozytywne, a dodatkowo jest mi dane słyszeć historie o podwyżkach, jakie front-end developerzy po przebyciu mojego szkolenia otrzymali lub prawdziwe zlecenia, skoncentrowane na optymalizacji wydajności.
Szczególnie przypadła mi do gustu forma prowadzenia kursu, gdyż wymusza własną inicjatywę i nie jest to bierne przepisywanie kodu, co dla mnie było ogromnym plusem. Bartek poruszył tematy, których czasem celowo nie rozwinął, a na koniec modułu wymagał wykonania tych elementów, co było super rozwiązaniem „zmuszającym” do działania. Tak czy siak tematy bardzo dogłębnie rozwinięte, przez co widać, że prowadzącemu zależy, aby kursant zrozumiał przyczynę problemu. Świetny kurs, bardzo dużo się nauczyłem.
Jestem w pełni zadowolony z kursu pomimo tego, że jestem dopiero w połowie, to już widzę, że kurs poukładał mi wiele tematów oraz nauczył nowych. Lekcje są zwięzłe i dobrze przemyślane, a na końcu każdego modułu zwieńczone zadaniem w dedykowanym projekcie, w którym jest co optymalizować. Polecam początkującym programistom jak i tym bardziej doświadczonym, którzy wcześniej nie mieli czasu zgłębić tematu performance.
Długo czekałem na tego typu inicjatywę, ze względu na duży chaos w dokumentacjach oraz niezrozumiałe komunikaty w pagespeed insightcie. Do teraz wszystkie moje działania optymalizacyjne nie dawały efektów jakich chciałem. Dzięki temu kursowi w końcu zrozumiałem czym są te wszystkie wskaźniki, jak na siebie wpływają, jak je optymalizować, skąd się biorą ich wartości. Po kursie na pewno będę bardziej świadomym frontendem i będę zwracał uwagi na performance już od pierwszej linijki kodu :)
Kiedy rusza kurs i ile trwa?
Kurs rusza jak tylko dokonasz zakupu :) Czekam na Ciebie.
Cały materiał udostępniam Ci od razu po wykupieniu dostępu. Przerabiasz co, kiedy i jak chcesz. Pomimo że dobrze jest kierować się kolejnością lekcji, to w praktyce i tak sam zadecydujesz, co jest dla Ciebie najlepsze.
Pamiętaj, że kiedykolwiek chcesz, możesz do mnie napisać w sprawach lekcji, jakichś nieścisłości albo problemów podczas optymalizacji strony w kursie.
Kurs trwa, tym samym, tak długo, jak sobie tego życzysz. Jest on dostępny dożywotnio, od momentu dokonania zakupu.
Instruktor kursu
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 stworzyłem program nauki pisania zoptymalizowanego front-endu.
Pomogę Ci na front-endzie
Jako doświadczony front-end developer, dostarczający wydajne projekty internetowe dla klientów z całego świata, pomogę Ci pisać front-end o większej wartości, budzący zaufanie i pozytywne wrażenia dla użytkowników, poprzez przejście z punktu A do punktu B.
FAQ
Czy otrzymam fakturę VAT?
Tak, oczywiście. Tuż po złożeniu zamówienia, na podany adres email wysyłam fakturę. Dzięki temu zakup tego kursu możesz wpisać w koszty - jest on zatem jeszcze tańszy w rzeczywistości!
Na jak długo dostanę dostęp do kursu?
Dostęp do kursu jest dożywotni. Możesz korzystać z niego kiedy chcesz, wracać po czasie. Nie ma ograniczeń czasowych względem dostępu do tego kursu.
Jak otrzymam dostęp do kursu?
Po opłaceniu zamówienia, w ciągu 24-48h otrzymasz link do aktywacji konta w naszej dedykowanej platformie kursowej o nazwie Thinkific.
Jak wygląda ten kurs?
Kurs jest w formie lekcji wideo prezentacji. Oprócz lekcji otrzymasz dostęp do kodu źródłowego projektu strony WWW, którą będziesz optymalizował w ramach nauki. W każdym module znajdują się również interaktywne quizy, za pośrednictwem których jeszcze mocniej utrwalisz nową wiedzę.
Kiedy rozpoczyna się program i jak długo trwa?
Kurs rozpoczyna się wtedy, gdy zakupisz dostęp. Nie ma ram czasowych - uczysz się i optymalizujesz, kiedy masz ochotę. Od ciebie zależy, jak długo potrwa. W każdym momencie możesz się ze mną skonsultować na temat optymalizacji projektu w kursie.
Co, jeśli nie będę zadowolony(a) z kursu?
Masz 30 dni od daty zakupy na wysłanie do mnie maila (kontakt@webdevinsider.pl), w którym po prostu mówisz, że rezygnujesz. Bez podawania przyczyny.