Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Word up warszawa 2015

3,241 views

Published on

Prezentacja o optymalizacji stron opartych na WordPressie i nie tylko :)

Published in: Internet

Word up warszawa 2015

  1. 1. Czas (wczytywania) to (czasem) pieniądz Tomasz Dziuda WordUp Warszawa @ 6.III.2015
  2. 2. Dlaczego?
  3. 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. 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. 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. 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. 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. 8. Jak zbadać szybkość strony?
  9. 9. Źródło: https://developers.google.com/speed/pagespeed/insights/
  10. 10. Źródło: http://yslow.org/
  11. 11. Źródło: http://tools.pingdom.com/
  12. 12. Chrome DevTools
  13. 13. Co wpływa na szybkość strony?
  14. 14. 1 1) Szybkość WordPressa
  15. 15. 1 2 2) Ilość zapytań do serwera 1) Szybkość WordPressa
  16. 16. 1 2 3 2) Ilość zapytań do serwera 3) Rozmiar strony 1) Szybkość WordPressa
  17. 17. 1 2 3 4) Szybkość odpowiedzi serwera 4 2) Ilość zapytań do serwera 3) Rozmiar strony 1) Szybkość WordPressa
  18. 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. 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. 20. Wersja dla geeków ;-) https://github.com/alex/what-happens-when
  21. 21. Szybkość WordPressa
  22. 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: profilowanie kodu
 Prezentacja o profilowaniu kodu: https://prezi.com/wlegamdbtc8g/nie-daj-sie-zwolnic/
  23. 23. • 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: profilowanie kodu
 Prezentacja o profilowaniu kodu: https://prezi.com/wlegamdbtc8g/nie-daj-sie-zwolnic/
  24. 24. • 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: profilowanie kodu
 Prezentacja o profilowaniu kodu: https://prezi.com/wlegamdbtc8g/nie-daj-sie-zwolnic/
  25. 25. • 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: profilowanie kodu
 Prezentacja o profilowaniu kodu: https://prezi.com/wlegamdbtc8g/nie-daj-sie-zwolnic/
  26. 26. • 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: profilowanie kodu
 Prezentacja o profilowaniu kodu: https://prezi.com/wlegamdbtc8g/nie-daj-sie-zwolnic/
  27. 27. Ilość zapytań do serwera 
 i rozmiar strony
  28. 28. Struktura typowej strony Źródło: http://httparchive.org/interesting.php
  29. 29. Rozmiar grafik
  30. 30. Dobór odpowiedniego formatu • JPG - większość zdjęć • PNG24 lub PNG8 - przezroczystość • GIF - animacje • SVG - niezależność od rozdzielczości
  31. 31. Dobór odpowiedniego formatu • JPG - większość zdjęć • PNG24 lub PNG8 - przezroczystość • GIF - animacje • SVG - niezależność od rozdzielczości
  32. 32. Dobór odpowiedniego formatu • JPG - większość zdjęć • PNG24 lub PNG8 - przezroczystość • GIF - animacje • SVG - niezależność od rozdzielczości
  33. 33. Dobór odpowiedniego formatu • JPG - większość zdjęć • PNG24 lub PNG8 - przezroczystość • GIF - animacje • SVG - niezależność od rozdzielczości
  34. 34. Odpowiednie wymiary • Warto sprawdzić czy wymiary grafik 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
  35. 35. Optymalizacja grafik • tinypng.com • tinyjpg.com • Wtyczka WP smush.it
 https://wordpress.org/plugins/wp-smushit/ • kompresja plików SVG - minifikacja kodu, zmniejszenie dokładności krzywych
  36. 36. Optymalizacja grafik • tinypng.com • tinyjpg.com • Wtyczka WP smush.it
 https://wordpress.org/plugins/wp-smushit/ • kompresja plików SVG - minifikacja kodu, zmniejszenie dokładności krzywych
  37. 37. Optymalizacja grafik • tinypng.com • tinyjpg.com • Wtyczka WP smush.it
 https://wordpress.org/plugins/wp-smushit/ • kompresja plików SVG - minifikacja kodu, zmniejszenie dokładności krzywych
  38. 38. Optymalizacja grafik • tinypng.com • tinyjpg.com • Wtyczka WP smush.it
 https://wordpress.org/plugins/wp-smushit/ • kompresja plików SVG - minifikacja kodu, zmniejszenie dokładności krzywych
  39. 39. CSS Sprites • Umieszczamy obrazki w jednym pliku i modyfikując background-position wyświetlamy odpowiedni fragment dużej grafiki • Redukują ilość zapytań do serwera • Można zrobić to samo z SVG: https://css-tricks.com/svg- sprites-use-better-icon-fonts/
  40. 40. CSS Sprites • Umieszczamy obrazki w jednym pliku i modyfikując background-position wyświetlamy odpowiedni fragment dużej grafiki • Redukują ilość zapytań do serwera • Można zrobić to samo z SVG: https://css-tricks.com/svg- sprites-use-better-icon-fonts/
  41. 41. CSS Sprites • Umieszczamy obrazki w jednym pliku i modyfikując background-position wyświetlamy odpowiedni fragment dużej grafiki • Redukują ilość zapytań do serwera • Można zrobić to samo z SVG: https://css-tricks.com/svg- sprites-use-better-icon-fonts/
  42. 42. Zorro SVG Źródło: http://quasimondo.com/ZorroSVG/ • Pozwala uzyskać przezroczyste grafiki zbliżone rozmiarem do plików JPG • Wymaga do działania wsparcia dla SVG (IE9+, 93% pokrycia rynku przeglądarek)
  43. 43. Zorro SVG Źródło: http://quasimondo.com/ZorroSVG/ • Pozwala uzyskać przezroczyste grafiki zbliżone rozmiarem do plików JPG • Wymaga do działania wsparcia dla SVG (IE9+, 93% pokrycia rynku przeglądarek)
  44. 44. Rozmiar HTML/CSS/JS • Minifikacja - 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)
  45. 45. Rozmiar HTML/CSS/JS • Minifikacja - 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. 46. 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
  47. 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. 48. Szybkość odpowiedzi serwera
  49. 49. 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
  50. 50. 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>
  51. 51. 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, Cloudflare
  52. 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, Cloudflare
  53. 53. 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, Cloudflare
  54. 54. 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/
  55. 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. 56. 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/
  57. 57. 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/
  58. 58. 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"
  59. 59. Sposób renderowania strony
  60. 60. 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/
  61. 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. 62. 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/
  63. 63. <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>
  64. 64. 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;      } }
  65. 65. 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;      } }
  66. 66. Wydajność strony po załadowaniu
  67. 67. 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
  68. 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. 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. 70. Wydajność JS i CSS • Wydajność właściwości CSS: http://csstriggers.com/ • FLIP dla animacji: http://aerotwist.com/blog/flip-your- animations/
  71. 71. Wydajność JS i CSS • Wydajność właściwości CSS: http://csstriggers.com/ • FLIP dla animacji: http://aerotwist.com/blog/flip-your- animations/
  72. 72. Optymalizacja struktury DOM Źródło: http://httparchive.org/interesting.php
  73. 73. 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/
  74. 74. Pytania?
  75. 75. Tomasz Dziuda Lead Developer @ @dziudek http://dziudek.pl dziudek@gavick.com

×