W 3 sekundy do setki…

WordUp Warszawa – 18.11.206 - Krzysztof Radzikowski

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 - Instant100-300 ms - Sluggish300 - 1000 ms - Is working1s+ - Mental context switch10s+ - I'll come back later...

https://www.soasta.com/blog/page-bloat-average-web-page-2-mb/

Średnia wielkość strony internetowej

Renderowanie strony

Optymalizacja

HIGH PERFORMANCE WEB SITES (2007)by Steve Souders:Rule 1 - Make Fewer HTTP RequestsRule 2 - Use a Content Delivery NetworkRule 3 - Add an Expires HeaderRule 4 - Gzip ComponentsRule 5 - Put Stylesheets at the TopRule 6 - Put Scripts at the BottomRule 7 - Avoid CSS ExpressionsRule 8 - Make JavaScript and CSS ExternalRule 9 - Reduce DNS LookupsRule 10 - Minify JavaScriptRule 11 - Avoid RedirectsRule 12 - Remove Duplicate ScriptsRule 13 - Configure ETagsRule 14 - Make AJAX Cacheable

Narzędzia

Google Page SpeedGTMetrix.comPingdom.com

WebPageTest.org

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

Waterfall

Insights

Optymalizacja

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

Critical Rendering Path

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/

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

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

Grafiki

• 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/

CSS / JS

•Minifikacja• Łączenie•Asynchroniczne ładowanie JS•Umiejscowienie w kodzie

Cache – pamięć podręczna

Serwer Przeglądarka

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

/*** 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

Wtyczki

•W3Total Cache•WP Super Cache •WP Fastest Cache

•WP Rocket

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

Wybór theme

• Przeładowanie CSS/JS• Przeładowanie ilości wtyczek• Zbędne funkcje / CPT • Page Buildery

Dzięki za uwagę

Krzysztof Radzikowski

krzysztof@radzikow.ski