Web Performance Optimisation - szybsze strony internetowe

Transkrypt

1 Program szkolenia: Web Performance Optimisation - szybsze strony internetowe Informacje ogólne Nazwa: Kod: Kategoria: Grupa docelowa: Czas trwania: Forma: Web Performance Optimisation - szybsze strony internetowe Web-performance Web programiści, projektanci 3 dni 20% wykłady / 80% warsztaty 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 lepsze wrażenia użytkownika oraz wyższe rankingi SEO, które prowadzą 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 to wyraz szacunku dla czasu ludzi korzystających z naszych serwisów Bądź dumny ze swojej pracy. Szybsze strony internetowe to źródło satysfakcji dla ich autorów Forma tych zaj? Na starcie uczestnicy dostają stronę, która ładuje się w ponad 10 sekund w sieci 3G i stopniowo przyspieszamy ją schodząc 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 optymalizacje robimy analizę aplikacji zbudowanych z użyciem nowoczesnych frameworków takich jak React czy Elm. Strona: 1/6

2 Pod koniec szkolenia robimy audyt jednego z publicznie dostępnych serwisów internetowych pod kątem poznanych optymalizacji. Zalety szkolenia: Przykłady z realnych systemów Sprawdzowne techniki Trener jest praktykiem z wieloletnim doświadczeniem Strona: 2/6

3 Program szkolenia: 1. Ogólne techniki optymalizacji ładowania 1.1. Performance golden rule 1.2. Bandwidth vs latency 1.3. Minifikacja zasobów 1.4. Kompresja (gzip, brotli) 1.5. HTTP cache (Cache-Control, ETag) 1.6. Service Workers - implementacja przykładowej strategii cache owania 1.7. Resource hints (np. preload, prerender) 1.8. CDN 1.9. Reguła 14kB HTTP/2 - wpływ na techniki optymalizacji Client Side Render vs Server Side Render 2. Ładowanie CSS 2.1. Blokowanie renderowania 2.2. Minifikacja (cssnano, csso) 2.3. Sekcja head 2.4. Skrócony zapis CSS 2.5. Płaskie selektory 2.6. Usuwanie nieużywanego CSS 2.7. Usuwanie duplikacji (csscss) 2.8. Mobile first jako technika optymalizacji vs link Krytyczny CSS (above the fold) Strona: 3/6

4 3. Ładowanie JS 3.1. Blokowanie parsowania 3.2. Minifikacja (UglifyJS2) 3.3. Łączenie skryptów 3.4. Defer vs async 3.5. Defer vs skrypty na końcu body 3.6. Lekkie alternatywy dla popularnych bibliotek 3.7. Vanilla JS 3.8. Prekompilacja szablonów 3.9. Bundle collapsing Tree-shaking Porównanie czasu ładowania popularnych frameworków JS Porównanie bundlerów JS pod kątem wielkości plików 4. Ładowanie czcionek 4.1. Wybór optymalnej czcionki 4.2. Konwersja typów czcionek (ttf2eot, ttf2woff, ttf2woff2) 4.3. Optymalna 4.4. Font subsetting (fontmin) 4.5. Flash of Unstyled Text vs Flash of Invisible Text 4.6. Nieblokujące ładowanie (font-display, Font Loading API) 5. Ładowanie obrazków 5.1. Raster vs vector 5.2. Obrazki w HTML vs obrazki w CSS 5.3. img@srcset 5.4. picture Strona: 4/6

5 5.5. Optymalizacja JPEG i PNG (imagemin) 5.6. WebP (imagemin-webp) 5.7. Lazy loading (blazy) 5.8. Sprites (svg-sprite) 6. Animacje fps 6.2. Jank i analiza wolnych ramek 6.3. Forced synchronous layout 6.4. requestanimationframe 6.5. Paint flashing 6.6. Animacje w osobnej warstwie 6.7. Animacje w CSS vs animacje w JS 6.8. Optymalizacje renderowania Virtual DOM (na przykładzie Elm i React) 7. Przeglądarka 7.1. Critical Rendering Path 7.2. DOM 7.3. CSSOM 7.4. Render Tree 7.5. Layout 7.6. Paint 8. Metryki 8.1. Time to First Byte 8.2. Time to First Paint 8.3. DOM Content Loaded 8.4. Time to First Meaningful Paint Strona: 5/6

6 8.5. Time to Interactive 8.6. Load Time 8.7. Speed Index 8.8. Performance budget 8.9. Analiza wykresów typu waterfall i flame chart 9. Narzędzia 9.1. Chrome DevTools (Network, Timeline, Audits, Rendering) 9.2. npm jako narzędzie do budowania i automatyzacji optymalizacji 9.3. Narzędzia oparte o reguły (np. PageSpeed Insights) 9.4. Web Page Test 9.5. Continuous Web Performance Testing z webpagetest-api Strona: 6/6