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.

WordUp Kraków - maj 2015

685 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

WordUp Kraków - maj 2015

  1. 1. Czas (wczytywania) to (czasem) pieniądz Tomasz Dziuda WordUp Kraków @ 08.V.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/
  4. 4. Google eksperymentuje z oznaczaniem wolno działających stron WWW
 
 Ź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. Zanim zaczniemy optymalizować
  9. 9. Pamiętajcie o… Zasadzie Pareto zwana inaczej zasadą 80/20 Więcej: http://pl.wikipedia.org/wiki/Zasada_Pareto
  10. 10. 20% działań optymalizacyjnych najprawdopodobniej przyniesie 80% efektów
  11. 11. Na pozostałe 20% efektów trzeba będzie poświęcić 80% czasu
  12. 12. Duże firmy mają oddzielne zespoły odpowiedzialne za optymalizację 
 
 https://developer.yahoo.com/performance/ 
 https://developers.google.com/speed/
  13. 13. Pamiętajcie też o… optymalizacji podstron
  14. 14. oraz pamiętajcie o… sprawdzaniu czy Page Speed nie zmienił algorytmu
  15. 15. Jak żyć mierzyć?
  16. 16. Powtórka ze statystyki
  17. 17. Powtórka ze statystyki • więcej pomiarów === większa wiarygodność • średnia arytmetyczna • mediana i kwartyle
 http://pl.wikipedia.org/wiki/Mediana • wartość minimalna/maksymalna • odchylenie standardowe
 http://pl.wikipedia.org/wiki/Odchylenie_standardowe
  18. 18. Powtórka ze statystyki • więcej pomiarów === większa wiarygodność • średnia arytmetyczna • mediana i kwartyle
 http://pl.wikipedia.org/wiki/Mediana • wartość minimalna/maksymalna • odchylenie standardowe
 http://pl.wikipedia.org/wiki/Odchylenie_standardowe
  19. 19. Powtórka ze statystyki • więcej pomiarów === większa wiarygodność • średnia arytmetyczna • mediana i kwartyle
 http://pl.wikipedia.org/wiki/Mediana • wartość minimalna/maksymalna • odchylenie standardowe
 http://pl.wikipedia.org/wiki/Odchylenie_standardowe
  20. 20. Powtórka ze statystyki • więcej pomiarów === większa wiarygodność • średnia arytmetyczna • mediana i kwartyle
 http://pl.wikipedia.org/wiki/Mediana • wartość minimalna/maksymalna • odchylenie standardowe
 http://pl.wikipedia.org/wiki/Odchylenie_standardowe
  21. 21. Powtórka ze statystyki • więcej pomiarów === większa wiarygodność • średnia arytmetyczna • mediana i kwartyle
 http://pl.wikipedia.org/wiki/Mediana • wartość minimalna/maksymalna • odchylenie standardowe
 http://pl.wikipedia.org/wiki/Odchylenie_standardowe
  22. 22. Źródło: https://developers.google.com/speed/pagespeed/insights/
  23. 23. Why Trying to Get 95+ on Google Page Speed Insights for Your WordPress Site Will Drive You Mad! http://premium.wpmudev.org/blog/why-trying-to-get-95-on-google-pagespeed-insights-will-drive-you-mad/ Jak koneserzy tematów optymalizacji walczą o 100/100 
 w Page Speed Insights http://sourceforge.net/projects/schedule-analytics/ http://diywpblog.com/leverage-browser-cache-optimize-google-analytics/ http://madskristensen.net/post/google-analytics-vs-google-page-speed
  24. 24. Źródło: http://tools.pingdom.com/
  25. 25. Źródło: http://www.webpagetest.org/
  26. 26. Chrome DevTools
  27. 27. Źródło: http://yslow.org/
  28. 28. Co wpływa na szybkość strony?
  29. 29. 1 1) Szybkość WordPressa
  30. 30. 1 2 2) Ilość zapytań do serwera 1) Szybkość WordPressa
  31. 31. 1 2 3 2) Ilość zapytań do serwera 3) Rozmiar strony 1) Szybkość WordPressa
  32. 32. 1 2 3 4) Szybkość odpowiedzi serwera 4 2) Ilość zapytań do serwera 3) Rozmiar strony 1) Szybkość WordPressa
  33. 33. 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
  34. 34. Wersja dla geeków ;-) https://github.com/alex/what-happens-when
  35. 35. Szybkość WordPressa
  36. 36. • 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
  37. 37. • 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
  38. 38. • 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
  39. 39. • 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
 Cache Buddy: http://wptavern.com/mark-jaquith-releases-cache-buddy-a-plugin-to-enhance-popular- wordpress-caching-solutions • Profilowanie kodu i porządki w bazie danych
 
 Prezentacja o profilowaniu kodu: https://prezi.com/wlegamdbtc8g/nie-daj-sie-zwolnic/
 Porządkowanie bazy danych WP: http://wpzen.pl/porzadkowanie-i-optymalizacja-bazy-danych- wordpressa/
  40. 40. • 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
 Cache Buddy: http://wptavern.com/mark-jaquith-releases-cache-buddy-a-plugin-to-enhance-popular- wordpress-caching-solutions • Profilowanie kodu i porządki w bazie danych
 
 Prezentacja o profilowaniu kodu: https://prezi.com/wlegamdbtc8g/nie-daj-sie-zwolnic/
 Porządkowanie bazy danych WP: http://wpzen.pl/porzadkowanie-i-optymalizacja-bazy-danych- wordpressa/
  41. 41. Ilość zapytań do serwera 
 i rozmiar strony
  42. 42. Struktura typowej strony Źródło: http://httparchive.org/interesting.php
  43. 43. http://www.wpspeedster.com/ http://wpzen.pl/wp-speedster-ranking-szybkosci-motywow-dla-wordpressa/
  44. 44. 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
  45. 45. Rozmiar grafik
  46. 46. Dobór odpowiedniego formatu • JPG - większość zdjęć • PNG24 lub PNG8 - przezroczystość • GIF - animacje • SVG - niezależność od rozdzielczości
  47. 47. Dobór odpowiedniego formatu • JPG - większość zdjęć • PNG24 lub PNG8 - przezroczystość • GIF - animacje • SVG - niezależność od rozdzielczości
  48. 48. Dobór odpowiedniego formatu • JPG - większość zdjęć • PNG24 lub PNG8 - przezroczystość • GIF - animacje • SVG - niezależność od rozdzielczości
  49. 49. Dobór odpowiedniego formatu • JPG - większość zdjęć • PNG24 lub PNG8 - przezroczystość • GIF - animacje • SVG - niezależność od rozdzielczości
  50. 50. 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
  51. 51. 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
  52. 52. Optymalizacja grafik
  53. 53. Optymalizacja grafik • tinypng.com
 https://wordpress.org/plugins/tiny-compress-images/ • tinyjpg.com
 ta sama wtyczka co wyżej ;) • Wtyczka WP smush.it - stała się płatna :(
 https://wordpress.org/plugins/wp-smushit/ • kompresja plików SVG - minifikacja kodu, zmniejszenie dokładności krzywych
  54. 54. Optymalizacja grafik • tinypng.com
 https://wordpress.org/plugins/tiny-compress-images/ • tinyjpg.com
 ta sama wtyczka co wyżej ;) • Wtyczka WP smush.it - stała się płatna :(
 https://wordpress.org/plugins/wp-smushit/ • kompresja plików SVG - minifikacja kodu, zmniejszenie dokładności krzywych
  55. 55. Optymalizacja grafik • tinypng.com
 https://wordpress.org/plugins/tiny-compress-images/ • tinyjpg.com
 ta sama wtyczka co wyżej ;) • Wtyczka WP smush.it - stała się płatna :(
 https://wordpress.org/plugins/wp-smushit/ • kompresja plików SVG - minifikacja kodu, zmniejszenie dokładności krzywych
  56. 56. Optymalizacja grafik • tinypng.com
 https://wordpress.org/plugins/tiny-compress-images/ • tinyjpg.com
 ta sama wtyczka co wyżej ;) • Wtyczka WP smush.it - stała się płatna :(
 https://wordpress.org/plugins/wp-smushit/ • kompresja plików SVG - minifikacja kodu, zmniejszenie dokładności krzywych
  57. 57. 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/
  58. 58. 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/
  59. 59. 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/
  60. 60. 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)
  61. 61. 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)
  62. 62. 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)
  63. 63. 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)
  64. 64. 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
  65. 65. 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
  66. 66. 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 • Wykorzystanie localStorage do przechowywania fontów
 
 http://www.sitepoint.com/improving-font-performance-subsetting-local-storage/
  67. 67. Zewnętrzne usługi • Social media
 http://www.sitepoint.com/social-sharing-hidden-costs/
 http://www.sitepoint.com/social-media-button-links/ • Gravatar
 http://www.wpbeginner.com/beginners-guide/how-to-disable-gravatars-in-wordpress/
 • Youtube, Vimeo etc.
  68. 68. Zewnętrzne usługi • Social media
 http://www.sitepoint.com/social-sharing-hidden-costs/
 http://www.sitepoint.com/social-media-button-links/ • Gravatar
 http://www.wpbeginner.com/beginners-guide/how-to-disable-gravatars-in-wordpress/
 Youtube, Vimeo etc.
  69. 69. Zewnętrzne usługi • Social media
 http://www.sitepoint.com/social-sharing-hidden-costs/
 http://www.sitepoint.com/social-media-button-links/ • Gravatar
 
 http://www.wpbeginner.com/beginners-guide/how-to-disable-gravatars-in-wordpress/ • Youtube, Vimeo etc.
 http://www.newmediacampaigns.com/blog/lazyytjs-a-jquery-plugin-to-lazy-load-youtube-videos
  70. 70. Szybkość odpowiedzi serwera
  71. 71. Cache przeglądarki <FilesMatch ".(gif|jpg|jpeg|png|swf|pdf|css|js|html|ico?|xml|txt)$"> FileETag none </FilesMatch> <IfModule mod_expires.c> ExpiresActive on ExpiresDefault "access plus 1 month" ExpiresByType text/cache-manifest "access plus 0 seconds" ExpiresByType text/html "access plus 0 seconds" ExpiresByType text/xml "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType application/json "access plus 0 seconds" ExpiresByType application/rss+xml "access plus 1 hour" ExpiresByType image/x-icon "access plus 1 week" 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" ExpiresByType text/x-component "access plus 1 month" 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" 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>
  72. 72. CDN? • Opłaca się gdy mamy odwiedziny z różnych rejonów świata • Pozwalają ominąć limit równoczesnych pobrań plików z jednej domeny • Popularne usługi CDN: Amazon Cloudfront, MaxCDN, Cloudflare • https://thethemefoundry.com/blog/why-we-dont- use-a-cdn-spdy-ssl/
  73. 73. CDN? • Opłaca się gdy mamy odwiedziny z różnych rejonów świata • Pozwalają ominąć limit równoczesnych pobrań plików z jednej domeny • Popularne usługi CDN: Amazon Cloudfront, MaxCDN, Cloudflare • https://thethemefoundry.com/blog/why-we-dont- use-a-cdn-spdy-ssl/
  74. 74. CDN? • Opłaca się gdy mamy odwiedziny z różnych rejonów świata • Pozwalają ominąć limit równoczesnych pobrań plików z jednej domeny • Popularne usługi CDN: Amazon Cloudfront, MaxCDN, Cloudflare • https://thethemefoundry.com/blog/why-we-dont- use-a-cdn-spdy-ssl/
  75. 75. CDN? • Opłaca się gdy mamy odwiedziny z różnych rejonów świata • Pozwalają ominąć limit równoczesnych pobrań plików z jednej domeny • Popularne usługi CDN: Amazon Cloudfront, MaxCDN, Cloudflare • https://thethemefoundry.com/blog/why-we-dont- use-a-cdn-spdy-ssl/
  76. 76. HSTS
  77. 77. HSTS HTTP GET /
  78. 78. HSTS HTTP GET / HTTP 301
 Location: https://strona.pl/
  79. 79. HSTS HTTP GET / HTTP 301
 Location: https://strona.pl/ HTTPS GET /
  80. 80. HSTS • Zmniejsza ilość zapytań do serwera
 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/
  81. 81. HSTS • Zmniejsza ilość zapytań do serwera
 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/
  82. 82. HSTS • Zmniejsza ilość zapytań do serwera
 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/
  83. 83. HSTS • Zmniejsza ilość zapytań do serwera
 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/
  84. 84. HSTS Header set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" Dodajemy w .htaccess:

  85. 85. Sposób renderowania strony
  86. 86. 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/
  87. 87. Sposób renderowania strony • Skrypty powinny być ładowane zawsze na końcu • Natychmiastowe wyświetlanie fragmentu strony widocznego na ekranie - unikamy FOUC
 https://adactio.com/journal/8504 - grunt-criticalcss • Do kompresji kodu CSS w sekcji <head> można użyć np. http://refresh-sf.com/
  88. 88. Sposób renderowania strony • Skrypty powinny być ładowane zawsze na końcu • Natychmiastowe wyświetlanie fragmentu strony widocznego na ekranie - unikamy FOUC
 https://adactio.com/journal/8504 - grunt-criticalcss • Do kompresji kodu CSS w sekcji <head> można użyć np. http://refresh-sf.com/
  89. 89. <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>
  90. 90. <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>
  91. 91. <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>
  92. 92. <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>
  93. 93. <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>
  94. 94. <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>
  95. 95. 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;      } }
  96. 96. 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;      } }
  97. 97. 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;      } }
  98. 98. 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;      } }
  99. 99. 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;      } }
  100. 100. Można też sprawić, że wolno ładujące się elementy wyglądają na ładujące się szybciej http://blog.placeit.net/ux-tactics-make-slow-things-seem-faster/ Gdy inne metody zawiodą
  101. 101. Trzeba poczekać na szybsze protokoły transmisji danych ;-) http://techcrunch.com/2015/04/18/google-wants-to-speed-up-the-web-with-its-quic-protocol/ Gdy inne metody zawiodą
  102. 102. http://perf-tooling.today/
  103. 103. Pytania?
  104. 104. Tomasz Dziuda Lead Developer @ @dziudek http://dziudek.pl dziudek@gavick.com

×