Word up warszawa 2015

1.
Czas (wczytywania) to (czasem)pieniądz Tomasz Dziuda WordUp Warszawa @ 6.III.2015

2.
Dlaczego?

3.
• Google corazbardziej będzie promować strony przyjazne urządzeniom mobilnym     Źródło: http://www.engadget.com/2015/02/27/google-page-rank-mobile/ • Google eksperymentuje z oznaczaniem wolno działających stron WWW w wynikach wyszukiwania    Źródło: http://www.webperformancetoday.com/2015/02/25/google-new-slow-label-web- performance/

4.
• Google corazbardziej będzie promować strony przyjazne urządzeniom mobilnym     Źródło: http://www.engadget.com/2015/02/27/google-page-rank-mobile/ • Google eksperymentuje z oznaczaniem wolno działających stron WWW w wynikach wyszukiwania    Źródło: http://www.webperformancetoday.com/2015/02/25/google-new-slow-label-web- performance/

5.
Nikt nie lubiczekać Źródła: http://www.getelastic.com/how-page-load-speed-affects-conversion-infographic/  http://www.shoutmeloud.com/improve-website-loading-speed-seo-usability.html • Liczba pobrań Firefoksa wzrosła o 15.4% po zmniejszeniu średniego czasu ładowania strony o 2.2 sekundy • Walmart odnotował wzrost konwersji o 2% na każdą 1 sekundę krótszego czasu ładowania strony • 47% konsumentów oczekuje załadowania się strony 2 sekundy lub szybciej

6.
Nikt nie lubiczekać Źródła: http://www.getelastic.com/how-page-load-speed-affects-conversion-infographic/  http://www.shoutmeloud.com/improve-website-loading-speed-seo-usability.html • Liczba pobrań Firefoksa wzrosła o 15.4% po zmniejszeniu średniego czasu ładowania strony o 2.2 sekundy • Walmart odnotował wzrost konwersji o 2% na każdą 1 sekundę krótszego czasu ładowania strony • 47% konsumentów oczekuje załadowania się strony 2 sekundy lub szybciej

7.
Nikt nie lubiczekać Źródła: http://www.getelastic.com/how-page-load-speed-affects-conversion-infographic/  http://www.shoutmeloud.com/improve-website-loading-speed-seo-usability.html • Liczba pobrań Firefoksa wzrosła o 15.4% po zmniejszeniu średniego czasu ładowania strony o 2.2 sekundy • Walmart odnotował wzrost konwersji o 2% na każdą 1 sekundę krótszego czasu ładowania strony • 47% konsumentów oczekuje załadowania się strony w 2 sekundy lub szybciej

8.
Jak zbadać szybkośćstrony?

9.
Źródło: https://developers.google.com/speed/pagespeed/insights/

10.
Źródło: http://yslow.org/

11.
Źródło: http://tools.pingdom.com/

12.
Chrome DevTools

13.
Co wpływa naszybkość strony?

14.
1 1) Szybkość WordPressa

15.
1 2 2) Ilośćzapytań do serwera 1) Szybkość WordPressa

16.
1 2 3 2) Ilośćzapytań do serwera 3) Rozmiar strony 1) Szybkość WordPressa

17.
1 2 3 4) Szybkośćodpowiedzi serwera 4 2) Ilość zapytań do serwera 3) Rozmiar strony 1) Szybkość WordPressa

18.
1 2 3 5 4) Szybkośćodpowiedzi serwera 4 2) Ilość zapytań do serwera 3) Rozmiar strony 1) Szybkość WordPressa 5) Sposób renderowania strony

19.
1 2 3 5 4) Szybkośćodpowiedzi serwera 4 2) Ilość zapytań do serwera 3) Rozmiar strony 1) Szybkość WordPressa 5) Sposób renderowania strony 6 6) Wydajność strony po załadowaniu

20.
Wersja dla geeków;-) https://github.com/alex/what-happens-when

21.
Szybkość WordPressa

22.
• Opcja dlaleniwych: dokupienie wiaderka RAM-u i słoika procesorów ;-) • Przegląd wtyczek: usunięcie nieużywanych • Przegląd wtyczek: zastąpienie złożonych wtyczek prostszymi adekwatnie do wykorzystywanych możliwości • Zainstalowanie wtyczki od cache  Opis WP Super Cache: http://wpzen.pl/przyspieszanie-strony-za-pomoca-wtyczki-wp-super-cache/  Opis W3 Total Cache: http://wpzen.pl/wp-content/uploads/2013/09/w3-total-cache-wordcamp- wroclaw-2013.pdf • W skrajnych wypadkach: proﬁlowanie kodu  Prezentacja o proﬁlowaniu kodu: https://prezi.com/wlegamdbtc8g/nie-daj-sie-zwolnic/

23.

24.

25.

26.

27.
Ilość zapytań doserwera   i rozmiar strony

28.
Struktura typowej strony Źródło:http://httparchive.org/interesting.php

29.
Rozmiar graﬁk

30.
Dobór odpowiedniego formatu •JPG - większość zdjęć • PNG24 lub PNG8 - przezroczystość • GIF - animacje • SVG - niezależność od rozdzielczości

31.

32.

33.

35.
Odpowiednie wymiary • Wartosprawdzić czy wymiary graﬁk są adekwatne do obszaru który zajmują • W wypadku formatów takich jak PNG, JPG czy GIF wymiary znacząco wpływają na rozmiar pliku

36.
Optymalizacja graﬁk • tinypng.com •tinyjpg.com • Wtyczka WP smush.it  https://wordpress.org/plugins/wp-smushit/ • kompresja plików SVG - miniﬁkacja kodu, zmniejszenie dokładności krzywych

37.

38.

39.

40.
CSS Sprites • Umieszczamyobrazki w jednym pliku i modyﬁkując background-position wyświetlamy odpowiedni fragment dużej graﬁki • Redukują ilość zapytań do serwera • Można zrobić to samo z SVG: https://css-tricks.com/svg- sprites-use-better-icon-fonts/

41.

42.

43.
Zorro SVG Źródło: http://quasimondo.com/ZorroSVG/ •Pozwala uzyskać przezroczyste graﬁki zbliżone rozmiarem do plików JPG • Wymaga do działania wsparcia dla SVG (IE9+, 93% pokrycia rynku przeglądarek)

44.
Zorro SVG Źródło: http://quasimondo.com/ZorroSVG/ •Pozwala uzyskać przezroczyste graﬁki zbliżone rozmiarem do plików JPG • Wymaga do działania wsparcia dla SVG (IE9+, 93% pokrycia rynku przeglądarek)

45.
Rozmiar HTML/CSS/JS • Miniﬁkacja- wtyczka Better WordPress Minify i WP HTML Compression  https://wordpress.org/plugins/bwp-minify/  https://wordpress.org/plugins/wp-html-compression/  • Unikanie zbyt wielu wtyczek (większość ma swoje pliki CSS i JavaScript)

46.
Rozmiar HTML/CSS/JS • Miniﬁkacja- wtyczka Better WordPress Minify i WP HTML Compression  https://wordpress.org/plugins/bwp-minify/  https://wordpress.org/plugins/wp-html-compression/  • Unikanie zbyt wielu wtyczek (większość ma swoje pliki CSS i JavaScript)

47.
Rozmiar fontów • Optymalizacjapoprzez wspierane zestawy znaków (parametr subset)    https://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext • Optymalizacja poprzez ograniczenie się do wybranych znaków (parametr text)    https://fonts.googleapis.com/css? family=Lobster&text=JAVASCRIPT

48.
Rozmiar fontów • Optymalizacjapoprzez wspierane zestawy znaków (parametr subset)    https://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext • Optymalizacja poprzez ograniczenie się do wybranych znaków (parametr text)    https://fonts.googleapis.com/css?family=Lobster&text=JAVASCRIPT

49.
Szybkość odpowiedzi serwera

50.
GZIP SetOutputFilter DEFLATE BrowserMatch ^Mozilla/4gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html Źródło: http://code.garyjones.co.uk/htaccess-tweaks-improve-site-speed

51.
Cache przeglądarki# Patchedon: %2013-%05-%02 %07:%May:%51 # Auto-patched by jbetolo <FilesMatch ".(gif|jpg|jpeg|png|swf|pdf|css|js|html|ico?|xml|txt)$"> FileETag none </FilesMatch> <IfModule mod_expires.c> ExpiresActive on # Perhaps better to whitelist expires rules? Perhaps. ExpiresDefault "access plus 1 month" # cache.appcache needs re-requests in FF 3.6 (thx Remy ~Introducing HTML5) ExpiresByType text/cache-manifest "access plus 0 seconds" # Your document html ExpiresByType text/html "access plus 0 seconds" # Data ExpiresByType text/xml "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType application/json "access plus 0 seconds" # RSS feed ExpiresByType application/rss+xml "access plus 1 hour" # Favicon (cannot be renamed) ExpiresByType image/x-icon "access plus 1 week" # Media: images, video, audio ExpiresByType image/gif "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType audio/ogg "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/webm "access plus 1 month" # HTC files (css3pie) ExpiresByType text/x-component "access plus 1 month" # Webfonts ExpiresByType font/truetype "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType application/x-font-woff "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "access plus 1 month" # CSS and JavaScript ExpiresByType text/css "access plus 1 year" ExpiresByType application/javascript "access plus 1 year" ExpiresByType text/javascript "access plus 1 year" <IfModule mod_headers.c> Header append Cache-Control "public" </IfModule> </IfModule>

52.
CDN? • Opłaca sięgdy mamy odwiedziny z różnych rejonów świata • Należy pamiętać, że kod na serwerze CDN może w wyniku ataku zostać podmieniony - dlatego lepiej korzystać z rozwiązań dużych graczy • Popularne usługi CDN: Amazon Cloudfront, MaxCDN, Cloudﬂare

53.

54.

55.
HSTS • Zmniejsza ilośćzapytań DNS  https://www.chromium.org/hsts • Wymaga pełnego wsparcia SSL na stronie • Nasza domena może działać tylko po HTTPS po dodaniu domeny na: https://hstspreload.appspot.com/ • Zwiększa bezpieczeństwo chroniąc np. przed atakami typu MiTM  http://sekurak.pl/hsts-czyli-http-strict-transport-security/

56.

57.

58.

59.
HSTS • Zmniejsza ilośćzapytań DNS  https://www.chromium.org/hsts • Wymaga pełnego wsparcia SSL na stronie • Nasza domena może działać tylko po HTTPS po dodaniu domeny na: https://hstspreload.appspot.com/ • Zwiększa bezpieczeństwo chroniąc np. przed atakami typu MiTM  http://sekurak.pl/hsts-czyli-http-strict-transport-security/ Header set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"

60.
Sposób renderowania strony

61.
Sposób renderowania strony •Skrypty powinny być ładowane zawsze na końcu • Natychmiastowe wyświetlanie fragmentu strony widocznego na ekranie - unikamy FOUC • Do kompresji kodu CSS w sekcji <head> można użyć np. http://refresh-sf.com/

62.

63.

64.
<script> var cb =function() { var l0 = '<link rel="stylesheet" href=“style1.css”>’; var l1 = '<link rel="stylesheet" href=“style2.css">'; var l2 = '<link rel="stylesheet" href=“style3.css">'; var h = document.getElementsByTagName('head')[0]; h.innerHTML += l0 + l1 + l2; }; var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame; if (raf) raf(cb); else window.addEventListener('load', cb); </script>

65.
add_filter('style_loader_src', 'td_style_loader_src', 10,2); function td_style_loader_src($src, $handle) { if(!is_admin() && stripos($src, ‘XXXXXX’) === FALSE) { return false; } else { return $src; } }

66.
add_filter('script_loader_src', 'td_script_loader_src', 10,2); function td_script_loader_src($src, $handle) { if(!is_admin() && stripos($src, ‘XXXXXX’) === FALSE) { return false; } else { return $src; } }

67.
Wydajność strony po załadowaniu

68.
Wydajność JS iCSS • Na starszych urządzeniach samo parsowanie jQuery może zająć kilkaset milisekund  http://timkadlec.com/2014/09/js-parse-and-execution-time/  • Zoptymalizowane selektory CSS też mogą pomóc  http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/  • Warto rozważyć usunięcie nieużywanego kodu JS i CSS

69.
Wydajność JS iCSS • Na starszych urządzeniach samo parsowanie jQuery może zająć kilkaset milisekund  http://timkadlec.com/2014/09/js-parse-and-execution-time/  • Zoptymalizowane selektory CSS też mogą pomóc  http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/  Warto rozważyć usunięcie nieużywanego kodu JS i CSS

70.
Wydajność JS iCSS • Na starszych urządzeniach samo parsowanie jQuery może zająć kilkaset milisekund  http://timkadlec.com/2014/09/js-parse-and-execution-time/  • Zoptymalizowane selektory CSS też mogą pomóc  http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/  • Warto rozważyć usunięcie nieużywanego kodu JS i CSS

71.
Wydajność JS iCSS • Wydajność właściwości CSS: http://csstriggers.com/ • FLIP dla animacji: http://aerotwist.com/blog/ﬂip-your- animations/

72.
Wydajność JS iCSS • Wydajność właściwości CSS: http://csstriggers.com/ • FLIP dla animacji: http://aerotwist.com/blog/ﬂip-your- animations/

73.
Optymalizacja struktury DOM Źródło:http://httparchive.org/interesting.php

74.
Lektura • http://timkadlec.com/2014/09/js-parse-and- execution-time/ • http://jankfree.org/ •http://calendar.perfplanet.com/2013/the-runtime- performance-checklist/ • https://developers.google.com/web/fundamentals/ performance/critical-rendering-path/

75.
Pytania?

76.
Tomasz Dziuda Lead Developer@ @dziudek http://dziudek.pl dziudek@gavick.com

Word up warszawa 2015

More Related Content

What's hot

Viewers also liked

Similar to Word up warszawa 2015

More from Tomasz Dziuda

Word up warszawa 2015