wersja 1.1 prezentacji z Wordup Warszawa - materiał będzie stopniowo uzupełniany dodatkwoymi opisami

1. W 3 sekundy do setki…
WordUp Warszawa – 18.11.206 - Krzysztof Radzikowski

2. https://blog.kissmetrics.com/loading-time/
Każda sekunda różnicy w ładowaniu strony przekłada się na 7-9 % zmniejszenia
obrotu strony e-commerce
W przypadku Amazona wyliczono w testach A/B stratę ok 0,3 mln $ na każde 10ms opóźnienia
Response times limits (Usability Engineering - Jakob Nielsen, 1993)
0-100 ms - Instant
100-300 ms - Sluggish
300 - 1000 ms - Is working
1s+ - Mental context switch
10s+ - I'll come back later...

3. https://www.soasta.com/blog/page-bloat-average-web-page-2-mb/
Średnia wielkość strony internetowej

4. Renderowanie strony

11. Optymalizacja

12. HIGH PERFORMANCE WEB SITES (2007)
by Steve Souders:
Rule 1 - Make Fewer HTTP Requests
Rule 2 - Use a Content Delivery Network
Rule 3 - Add an Expires Header
Rule 4 - Gzip Components
Rule 5 - Put Stylesheets at the Top
Rule 6 - Put Scripts at the Bottom
Rule 7 - Avoid CSS Expressions
Rule 8 - Make JavaScript and CSS External
Rule 9 - Reduce DNS Lookups
Rule 10 - Minify JavaScript
Rule 11 - Avoid Redirects
Rule 12 - Remove Duplicate Scripts
Rule 13 - Configure ETags
Rule 14 - Make AJAX Cacheable

13. Narzędzia
Google Page Speed
GTMetrix.com
Pingdom.com
WebPageTest.org

14. Google page speed https://developers.google.com/speed/pagespeed/insights/

19. Waterfall
Insights

20. Optymalizacja

21. Podane niżej wskazówki należy stosować z zachowaniem ostrożności
i testowaniem aplikacji po każdej wprowadzonej zmianie
W zależności od serwera część z przedstawionych metod może pomóc lub zawiesić stronę
AMAB – Always make a backup

22. Critical Rendering Path
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/

23. Serwer
• Środowisko serwerowe odpowiednie do planowanego natężenia ruchu (shared/VPS/cloud)
• Wersja PHP – preferowana 7.x z uwagi na wydajność względem wersji 5.6
• HTTP/2 opcja push – W przypadku braku zalecane Cloudflare

24. CDN
Przeglądarki maja ograniczenie do ilości pobieranych zasobów per domena 6-14
CDN pozwala na szybsze pobieranie typowych skryptów (Boostrap/ Font Awesome)
Zamiast CDN można użyć subdomeny do wczytywania grafik i zasobów

25. Grafiki

28. • Nie używać rozdzielczości większych niż największy kontener występujący na stronie
• Optymalizacja wielkości obrazków
• Zmniejszenie ilości grafik – sprity, svg , ikonki
• Lazyload zastosowany na doczytywane grafiki – nigdy na całość strony
Pluginy:
• EWWW Image Optimizer
• WP Smush
• Imsanity
Online
• https://tinypng.com/
• https://kraken.io/

29. CSS / JS
• Minifikacja
• Łączenie
• Asynchroniczne ładowanie JS
• Umiejscowienie w kodzie

32. Cache – pamięć podręczna
Serwer Przeglądarka

33. Wykorzystanie cache pozwala na wydatne zmniejszenie ilości zasobów
pobieranych za każdym pobraniem i przeładowaniem strony

34. /*** Remove Query String from Static Resources ***/
function remove_cssjs_ver( $src ) {
if( strpos( $src, '?ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'remove_cssjs_ver', 10, 2 );
add_filter( 'script_loader_src', 'remove_cssjs_ver', 10, 2 );
Powyższa funkcja pozwala na usunięcie tzw wersjonowania z
plików co zapobiega niepotrzebnym ponownym pobieraniu
zasobów css/js na niektórych konfiguracjach serwera

35. Wtyczki
• W3Total Cache
• WP Super Cache
• WP Fastest Cache
• WP Rocket

36. Unikajmy
Nadmiernego ładowania zewnętrznych zasobów
• Facebook
• Google Maps
• Youtube Video
Nieumiejętna implementacja może doprowadzić do niepotrzebnego ładowania dodatkowych plików js/css
Sam player YT to ponad 640 KB niezbędno do otworzenia video

37. Wybór theme
• Przeładowanie CSS/JS
• Przeładowanie ilości wtyczek
• Zbędne funkcje / CPT
• Page Buildery

38. Dzięki za uwagę
Krzysztof Radzikowski
krzysztof@radzikow.ski