Word up warszawa 2015

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

2. Dlaczego?

3. • Google coraz bardziej 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 coraz bardziej 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 lubi czekać Ź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 lubi czekać Ź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 lubi czekać Ź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 na szybkość 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 dla leniwych: 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/

27. Ilość zapytań do serwera   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

35. Odpowiednie wymiary • Warto sprawdzić 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

40. CSS Sprites • Umieszczamy obrazki 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/

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 • Optymalizacja poprzez 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 • Optymalizacja poprzez 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/4 gzip-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# Patched on: %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

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/

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/

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 i CSS • 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 i CSS • 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 i CSS • 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 i CSS • Wydajność właściwości CSS: http://csstriggers.com/ • FLIP dla animacji: http://aerotwist.com/blog/ﬂip-your- animations/

72. Wydajność JS i CSS • 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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Word up warszawa 2015

Similar to Word up warszawa 2015 (20)

More from Tomasz Dziuda

More from Tomasz Dziuda (8)

Word up warszawa 2015