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.

of

Word up warszawa 2015 Slide 1 Word up warszawa 2015 Slide 2 Word up warszawa 2015 Slide 3 Word up warszawa 2015 Slide 4 Word up warszawa 2015 Slide 5 Word up warszawa 2015 Slide 6 Word up warszawa 2015 Slide 7 Word up warszawa 2015 Slide 8 Word up warszawa 2015 Slide 9 Word up warszawa 2015 Slide 10 Word up warszawa 2015 Slide 11 Word up warszawa 2015 Slide 12 Word up warszawa 2015 Slide 13 Word up warszawa 2015 Slide 14 Word up warszawa 2015 Slide 15 Word up warszawa 2015 Slide 16 Word up warszawa 2015 Slide 17 Word up warszawa 2015 Slide 18 Word up warszawa 2015 Slide 19 Word up warszawa 2015 Slide 20 Word up warszawa 2015 Slide 21 Word up warszawa 2015 Slide 22 Word up warszawa 2015 Slide 23 Word up warszawa 2015 Slide 24 Word up warszawa 2015 Slide 25 Word up warszawa 2015 Slide 26 Word up warszawa 2015 Slide 27 Word up warszawa 2015 Slide 28 Word up warszawa 2015 Slide 29 Word up warszawa 2015 Slide 30 Word up warszawa 2015 Slide 31 Word up warszawa 2015 Slide 32 Word up warszawa 2015 Slide 33 Word up warszawa 2015 Slide 34 Word up warszawa 2015 Slide 35 Word up warszawa 2015 Slide 36 Word up warszawa 2015 Slide 37 Word up warszawa 2015 Slide 38 Word up warszawa 2015 Slide 39 Word up warszawa 2015 Slide 40 Word up warszawa 2015 Slide 41 Word up warszawa 2015 Slide 42 Word up warszawa 2015 Slide 43 Word up warszawa 2015 Slide 44 Word up warszawa 2015 Slide 45 Word up warszawa 2015 Slide 46 Word up warszawa 2015 Slide 47 Word up warszawa 2015 Slide 48 Word up warszawa 2015 Slide 49 Word up warszawa 2015 Slide 50 Word up warszawa 2015 Slide 51 Word up warszawa 2015 Slide 52 Word up warszawa 2015 Slide 53 Word up warszawa 2015 Slide 54 Word up warszawa 2015 Slide 55 Word up warszawa 2015 Slide 56 Word up warszawa 2015 Slide 57 Word up warszawa 2015 Slide 58 Word up warszawa 2015 Slide 59 Word up warszawa 2015 Slide 60 Word up warszawa 2015 Slide 61 Word up warszawa 2015 Slide 62 Word up warszawa 2015 Slide 63 Word up warszawa 2015 Slide 64 Word up warszawa 2015 Slide 65 Word up warszawa 2015 Slide 66 Word up warszawa 2015 Slide 67 Word up warszawa 2015 Slide 68 Word up warszawa 2015 Slide 69 Word up warszawa 2015 Slide 70 Word up warszawa 2015 Slide 71 Word up warszawa 2015 Slide 72 Word up warszawa 2015 Slide 73 Word up warszawa 2015 Slide 74 Word up warszawa 2015 Slide 75 Word up warszawa 2015 Slide 76
Upcoming SlideShare
Wprowadzenie do WP-API
Next
Download to read offline and view in fullscreen.

3 Likes

Share

Download to read offline

Word up warszawa 2015

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

    Mar. 1, 2018
  • mariuszszatkowski

    Mar. 10, 2015
  • KlementynaGiezynska

    Mar. 9, 2015

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

Views

Total views

3,751

On Slideshare

0

From embeds

0

Number of embeds

2,007

Actions

Downloads

7

Shares

0

Comments

0

Likes

3

×