Web Performance Optimisation - szybsze strony internetowe

Kod: platform-web-performance
Kategoria: Web Platform
Forma: 20% wykłady / 80% warsztaty
Czas trwania: 3 dni
Grupa docelowa: developerzy
Logistyka: W siedzibie klienta lub w innym dowolnym miejscu.
Data i dokładny zakres do ustalenia podczas analizy przed-szkoleniowej.

Dziesiątki ćwiczeń praktycznych pokazujących niemal każdy aspekt optymalizacji.

 

Czego się nauczę? 
  • Znajdować wąskie gardła podczas ładowania strony oraz po jej załadowaniu w trakcie animacji 
  • Optymalizować HTML, JS, CSS, obrazki oraz czcionki 
  • Mierzyć rezultaty wprowadzanych optymalizacji 
  • Efektywnie korzystać z narzędzi tj. Chrome DevTools pod kątem optymalizacji stron internetowych 
  • Automatyzować powtarzalne optymalizacje 

Dlaczego warto się tego nauczyć? 
  • Zarabiaj więcej pieniędzy na swoich stronach. Szybsze serwisy to lepszy UX oraz wyższe rankingi SEO prowadzące do większej ilości konwersji 
  • Oszczędzaj własne pieniądze. Zoptymalizowane strony zużywają mniej zasobów serwerowych 
  • Oszczędzaj pieniądze swoich użytkowników. Zoptymalizowane strony zużywają mniej zasobów tj. mobilny plan internetowy czy bateria w telefonie 
  • Szanuj czas swoich użytkowników. Szybsze strony nie każą czekać swoim użytkownikom
  • Bądź dumny ze swojej pracy. Szybsze strony internetowe to źródło satysfakcji dla ich autorów 
Forma zajęć 
Na starcie uczestnicy dostają stronę, która ładuje się ponad 10 sekund w sieci 3G. W trakcie kolejnych ćwiczeń stopniowo przyspieszamy stronę, tak aby ładowała się poniżej 1 sekundy.
Następnie usprawniamy wszystkie animacje tak aby strona renderowała się płynnie nawet na starszych telefonach. Gdy poznamy już klasyczne techniki optymalizacji, robimy analizę aplikacji zbudowanych z użyciem nowoczesnych frameworków do aplikacji typu Single Page App. Dodatkowo robimy audyt jednego z publicznie dostępnych serwisów internetowych pod kątem poznanych optymalizacji.

Wyróżniki szkolenia

  • Przykłady z realnych systemów
  • Sprawdzone techniki
  • Trener jest praktykiem z wieloletnim doświadczeniem

Program Szkolenia

Program jest ramą w jakiej możemy się poruszać merytorycznie - program dla konkretnego szkolenia dedykowanego ustalamy z grupą na podstawie analizy przed-szkoleniowej.

  1. Ogólne techniki optymalizacji ładowania
    1. Performance golden rule
    2. Theory of Constraints
    3. Optymalizacje czasu ładowania
    4. Optymalizacje runtime
    5. Perceived performance
  2. Optymalizacja na poziomie sieci
    1. Bandwidth vs latency
    2. HTTP cache (Cache-Control, ETag, strategie cachowania)
    3. Resource hints (preload, prefetch)
    4. Service Workers - implementacja przykładowej strategii cache’owania
    5. HTTP/2 - wpływ na techniki optymalizacji
    6. HTTP/2 push
    7. Reguła 14kB
    8. Kompresja (gzip, brotli)
    9. CDN
  3. Rendering Pipeline
    1. Critical Rendering Path
    2. DOM
    3. CSSOM
    4. Render Tree
    5. Layout
    6. Paint
  4. Ładowanie CSS
    1. Blokowanie renderowania
    2. Minifikacja (cssnano, csso)
    3. Sekcja head
    4. Skrócony zapis CSS
    5. Płaskie selektory
    6. Usuwanie nieużywanego CSS
    7. Usuwanie duplikacji
    8. Mobile first jako technika optymalizacji
    9. @import vs link
    10. Krytyczny CSS (above the fold)
  5. Ładowanie JS
    1. Blokowanie parsowania
    2. SPOF (Single Point of Failure)
    3. Minifikacja (UglifyJS2)
    4. Łączenie skryptów (bundlers)
    5. defer vs async
    6. defer vs skrypty na końcu body
    7. Lekkie alternatywy dla popularnych bibliotek
    8. Vanilla JS
  6. Optymalizacja Single Page Apps
    1. Client Side Render vs Server Side Render
    2. Porównanie czasu ładowania popularnych frameworków JS
    3. Czas parsowania JS
    4. Koszt transpilacji (babel, babel-preset-env)
    5. Code splitting
    6. Optymalizacje renderowania (Virtual DOM)
    7. Memoization
    8. Microbenchmarking (benchmark.js)
    9. Tryb deweloperski vs tryb produkcyjny
    10. HTML streaming vs JSON streaming
    11. App shell
  7. Ładowanie czcionek
    1. Wybór optymalnej czcionki
    2. Konwersja typów czcionek (ttf2eot, ttf2woff, ttf2woff2)
    3. Optymalna kaskada @font-face
    4. Font subsetting (fontmin)
    5. Flash of Unstyled Text vs Flash of Invisible Text
    6. Nieblokujące ładowanie (font-display, Font Loading API)
  8. Ładowanie obrazków
    1. Raster vs vector
    2. Obrazki w HTML vs obrazki w CSS
    3. img@srcset
    4. picture
    5. Optymalizacja JPEG (imagemin)
    6. WebP (imagemin-webp)
    7. Lazy loading (blazy, IntersectionObserver)
    8. Sprites (svg-sprite)
  9. Optymalizacje renderowania (scroll, animacje)
    1. 60fps
    2. Jank i analiza wolnych ramek
    3. Forced synchronous layout/Layout thrashing
    4. requestAnimationFrame
    5. Paint flashing
    6. Animacje w osobnej warstwie
    7. Animacje w CSS vs animacje w JS
  10. Metryki
    1. Time to First Byte
    2. Time to First Paint
    3. DOM Content Loaded
    4. Time to First Meaningful Paint
    5. Time to Interactive
    6. Load Time
    7. Speed Index
    8. Custom metrics
    9. Performance budget
    10. Analiza wykresów typu waterfall i flame chart
    11. Timing APIs (Navigation, Resource, Paint, User Timing)
  11. Narzędzia
    1. Chrome DevTools (Network, Performance, Audits, Rendering)
    2. npm i Parcel jako narzędzia do budowania i automatyzacji optymalizacji
    3. Narzędzia oparte o reguły (np. PageSpeed Insights, Lighthouse)
    4. WebPageTest - synthetic testing
    5. Continuous Web Performance Testing z webpagetest-api
    6. Performance monitoring: Speedtracker, SpeedCurve


Pobierz program w formacie PDF

Trenerzy

Poznaj ekspertów, którzy mogą poprowadzić Twoje szkolenie.

Materiały związane ze szkoleniem

Idea renesansowej pracowni - Bottegi zakłada nieustanną pracę jej członków i dzielenie się jej wynikami.

  • Looking for the Holy Grail of Mobile Web Performance
    KATEGORIE: JavaScript

    W świecie mobilnym Istnieje przeświadczenie, że jedynie aplikacje natywne są w stanie sprostać oczekiwaniom użytkowników. Wraz z pojawieniem się Progresywnych Aplikacji Webowych, które mają przenieść na platformę webową wiele cech zarezerwowanych dotąd tylko dla rozwiązań natywnych, oczekiwania dotyczące wydajności są silniejsze niż kiedykolwiek wcześniej. Czy Web jest w stanie im sprostać?

    Autor Bottega:

    Adam Bar

  • JSON taki albo owaki... czyli kontrolowanie struktur z JSON Schema
    KATEGORIE: JavaScript

    Slides

    JSON jest najpopularniejszym formatem definiowania/wymiany danych w sieci. Jest elastyczny niczym XML oraz zwięzły, jak to tylko możliwe. Nie mniej, rozwiązłość strukturalna JSONów powoduje utratę kontroli nad tym, jakie dane są przechowywane. Jeśli chcesz kontrolować, co może być przechowywane w formacie JSON, zerknijmy na JSON Schema.

    Autor Bottega:

    Tomasz Ducin

Zapytaj o szkolenie

Imię i nazwisko:
Firma:
E-mail:
Nr tel:
Temat:
Wiadomość:

Jeżeli preferujesz osobisty kontakt to zawsze możesz zadzwonić.

Iwona Sobótka

Koordynatorka szkoleń


Wyrażam zgodę na przetwarzania danych osobowych zgodnie z ustawą o ochronie danych osobowych w związku z wysłaniem zapytania przez formularz kontaktowy.

Podanie danych jest dobrowolne ale niezbędne do przetworzenia zapytania. Zastałem/am poinformowany/na, że przysługuje mi prawo dostępu do swoich danych, możliwości ich poprawienia, żądania zaprzestania ich przetwarzania.

Administratorem danych osobowych jest Bottega IT Minds, ul. Jana Sawy 2, 20-632 Lublin.


Klauzula informacyjna