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 maja 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 frontend to 12-modułowy program nauki tworzenia szybkiej, intuicyjnej warstwy frontendowej 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 (12 modułów)
Moduł 1: Optymalizacja wydajności a biznes i zespół
- Powitanie, plan gry
- Lekcja 2: Po co optymalizować frontend?
- Lekcja 3: Jak przekonać (się / lub biznes) do optymalizacji frontendu?
- Lekcja 4: Kultura wydajności a zespół
- Lekcja 5: Kultura wydajności a klient
- Lekcja 6: Estetyka projektu a wydajność, czyli designer vs developer
- Lekcja 7: Performance Budget
- Lekcja 8: Psychologia a wydajność
- Lekcja 9: Przegląd narzędzi do pomiaru wydajności i optymalizacji
- Lekcja 10: Wymagania
- Lekcja 11: Założenia projektu, efekt początkowy i końcowy
- Lekcja 12: 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: Która metryka jest najważniejsza dla Twojej strony?
- Lekcja 5: Jak dokonywać pomiarów?
- Lekcja 6: Google Web Core Vitals
- Lekcja 7: First Contentful Paint
- Lekcja 8: Largest Contentful Paint
- Lekcja 9: Time To Interactive
- Lekcja 10: Total Blocking Time
- Lekcja 11: First Input Delay
- Lekcja 12: Cumulative Layout Shifts
- Lekcja 13: Time To First Byte
- Lekcja 14: Customowe metryki
- Lekcja 15: 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
- Lekcja 1: Czym jest lazy loading i po co go wykorzystywać?
- Lekcja 2: Czego nie ładować leniwie?
- Lekcja 3: Metody lazy loadingu a wsparcie przeglądarek
- Lekcja 4: Lazy loading obrazków
- Lekcja 5: Lazy loading iframe’ów
- Lekcja 6: Lazy loading wideo
- Lekcja 7: Wrappery dla leniwie ładowanych zasobów
- Lekcja 8: Lazy loading responsywnych teł obrazkowych
- Lekcja 9: Placeholdery
- Lekcja 10: Ciekawe efekty na lazy loading obrazków i wideo
- Lekcja 11: Lazy loading komponentów
- Lekcja 12: Praca domowa
Moduł 5: Optymalizacja serwowania obrazków i wideo
- Lekcja 1: Kompresja obrazków
- Lekcja 2: Responsywne obrazki
- Lekcja 3: PNG, JPG, SVG, GIF, WEBP, AVIF
- Lekcja 4: Szybkie wdrożenie zoptymalizowanych / skompresowanych obrazków
- Lekcja 5: SVG, SVG sprites
- Lekcja 6: Ładowanie krytycznych teł (prefetch)
- Lekcja 7: GIF czy video?
- Lekcja 8: Media queries a obrazki
- Lekcja 9: Praca domowa
Moduł 6: HTML / Accessibility
- Lekcja 1: Podstawy
- Lekcja 2: Semantyka, sekcje i nagłówki
- Lekcja 3: WCAG
- Lekcja 4: Accessibility a nawigacja
- Lekcja 5: Formularze
- Lekcja 6: JSON-LD, meta tagi, Open Graph
- Lekcja 7: Paginacja / Cumulative Layout Shifts
- Lekcja 8: Tagi w <head>
- Lekcja 9: Kontrast na stronie (contrast ratio)
- Lekcja 10: Praca domowa
Moduł 7: Wydajny i lekki Javascript
- Lekcja 1: Podstawy
- Lekcja 2: async czy defer?
- Lekcja 3: Prerendering, SSR, client-side rendering
- Lekcja 4: Usuwanie "unused JS"
- Lekcja 5: Tree-shaking
- Lekcja 6: Optymalizacja ładowania głównego wątku (Main Thread)
- Lekcja 7: Async/await
- Lekcja 8: Cache’owanie odpowiedzi z API
- Lekcja 9: Komponenty Connection-aware i memory-aware
- Lekcja 10: PWA, Service Worker
- Lekcja 11: Predictive prefetching
- Lekcja 12: Praca domowa
Moduł 8: Skrypty zewnętrzne (3rd parties)
- Lekcja 1: Skrypty zewnętrzne a ich wpływ
- Lekcja 2: Optymalizacja skryptów zewnętrznych (na przykładzie czatu)
- Lekcja 3: Optymalizacja skryptów zewnętrznych (na przykładzie Google Recaptcha)
- Lekcja 4: Opóźnianie skryptów zewnętrznych
- Lekcja 5: Tag Manager
- Lekcja 6: Skrypty zewnętrzne a pixel obrazki
- Lekcja 7: Skrypty zewnętrzne a biznes
- Lekcja 8: Praca domowa
Moduł 9: Optymalizacja CSS
- Lekcja 1: Podstawy
- Lekcja 2: Na co uważać względem wydajności podczas pisania CSS?
- Lekcja 3: Usuwanie unused CSS
- Lekcja 4: Reduced data
- Lekcja 5: Krytyczny CSS (Critical CSS Path)
- Lekcja 6: CSS Contain
- Lekcja 7: Wprowadzenie do animacji CSS i co optymalizować
- Lekcja 8: Optymalizacja głównego wątku w kontekście CSS
- Lekcja 9: Praca domowa
Moduł 10: Animacje CSS / JS
- Lekcja 1: Postrzegalna wydajność w kontekście animacji
- Lekcja 2: Animacje CSS czy JS?
- Lekcja 3: Animowanie CSS a zużycie GPU
- Lekcja 4: Animacje JS - przykłady bibliotek
- Lekcja 5: Animacje CSS - przykłady bibliotek
- Lekcja 6: Tranzycje podczas nawigacji między stronami
- Lekcja 7: Praca domowa
Moduł 11: Server-hardening + CMSy
- Lekcja 1: Nginx, Apache
- Lekcja 2: Mierzenie wąskich gardeł na back-endzie aplikacji
- Lekcja 3: Przykład konfiguracji Nginx wraz z omówieniem pod kątem wydajności (nagłówki HTTP, Gzip, Brotli, procesy)
- Lekcja 4: Nagłówki HTTP
- Lekcja 5: HTTP/2
- Lekcja 6: HTTP/3 QUIC
- Lekcja 7: SSL/TLS
- Lekcja 8: Ogólne wskazówki
- Lekcja 9: Wordpress - przykład optymalizacji
- Lekcja 10: CMSy a optymalizacja
- Lekcja 11: Praca domowa
Moduł 12: Dalsze wskazówki
- Lekcja 1: AMP
- Lekcja 2: Resource hinty
- Lekcja 3: Ciągłe testowane wydajności
- Lekcja 4: Inspiracje
- Lekcja 5: Co dalej?
Kiedy rusza kurs?
Program rusza w pełnej okazałości w styczniu 2021, ale już teraz możesz otrzymać dostęp do pierwszych materiałów, kupując ten kurs w przedsprzedaży. Już teraz, każdego tygodnia, aż do stycznia publikowane będą lekcje wideo, quizy i praktyczne ćwiczenia.
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 poprowadzę program nauki pisania zoptymalizowanego frontendu.
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.
Co otrzymasz, kupując ten kurs?
- Unikatową wiedzę, dzięki której użytkownicy strony / aplikacji WWW, którą tworzysz, przyniesie dużo lepsze rezultaty sprzedażowe, wizerunkowe
- Dożywotni dostęp (bez ograniczeń czasowych) do platformy kursowej, w której znajdziesz lekcje wideo, prezentacje, quizy
- Praktyczne zadania optymalizacji front-endu żywej strony WWW (do której otrzymasz kod źródłowy)
- Pierwsze materiały wideo i ćwiczenia, dodawane na bieżąco tuż po otrzymaniu dostępu do platformy kursowej, aż do oficjalnej premiery kursu
- Możliwość zadawania pytań do instruktora w trakcie trwania kursu w formie prywatnych konsultacji
- Dostęp do prywatnej grupy na Facebook'u z uczestnikami kursu, w której możesz się wymieniać problemami, spostrzeżeniami dotyczącymi optymalizacji webowej
- 30-dniową gwarancję satysfakcji
- Certyfikat ukończenia kursu
Wartość kursu:
3999 PLN
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ę 29 stycznia 2021, jednak kupując kurs w przedsprzedaży, otrzymasz pierwsze materiały od razu jak i kolejne, które na bieżąco będą publikowane aż do stycznia.
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.
Nie zwlekaj z decyzją!
Przedsprzedaż kursu w tak niskiej cenie trwa tylko do 30. listopada 2020, do godz. 20:00!