Word up łódź kwiecień 2015

1. Czas (wczytywania) to (czasem) pieniądz Tomasz Dziuda WordUp Łódź @ 22.IV.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/

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. 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. Zanim zaczniemy optymalizować

9. Pamiętajcie o… Zasadzie Pareto zwana inaczej zasadą 80/20 Więcej: http://pl.wikipedia.org/wiki/Zasada_Pareto

10. 20% działań optymalizacyjnych najprawdopodobniej przyniesie 80% efektów

11. Na pozostałe 20% efektów trzeba będzie poświęcić 80% czasu

12. Duże ﬁrmy mają oddzielne zespoły odpowiedzialne za optymalizację     https://developer.yahoo.com/performance/   https://developers.google.com/speed/

13. Pamiętajcie też o… optymalizacji podstron

14. oraz pamiętajcie o… sprawdzaniu czy Page Speed nie zmienił algorytmu

15. Jak żyć mierzyć?

16. Powtórka ze statystyki

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

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

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. Źródło: http://tools.pingdom.com/

25. Źródło: http://www.webpagetest.org/

26. Chrome DevTools

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

28. Co wpływa na szybkość strony?

29. 1 1) Szybkość WordPressa

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

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

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

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. Wersja dla geeków ;-) https://github.com/alex/what-happens-when

35. Szybkość WordPressa

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

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 • Proﬁlowanie kodu i porządki w bazie danych    Prezentacja o proﬁlowaniu kodu: https://prezi.com/wlegamdbtc8g/nie-daj-sie-zwolnic/  Porządkowanie bazy danych WP: http://wpzen.pl/porzadkowanie-i-optymalizacja-bazy-danych- wordpressa/

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 • Proﬁlowanie kodu i porządki w bazie danych    Prezentacja o proﬁlowaniu kodu: https://prezi.com/wlegamdbtc8g/nie-daj-sie-zwolnic/  Porządkowanie bazy danych WP: http://wpzen.pl/porzadkowanie-i-optymalizacja-bazy-danych- wordpressa/

41. Ilość zapytań do serwera   i rozmiar strony

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

43. http://www.wpspeedster.com/ http://wpzen.pl/wp-speedster-ranking-szybkosci-motywow-dla-wordpressa/

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. Rozmiar graﬁk

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

51. 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

52. 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

53. Optymalizacja graﬁk

54. Optymalizacja graﬁk • 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 - miniﬁkacja kodu, zmniejszenie dokładności krzywych

58. 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/

61. 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)

62. 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)

63. 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)

64. 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)

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. 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

67. 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/

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. 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.

70. 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

71. Szybkość odpowiedzi serwera

72. 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>

73. 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

76. HSTS

77. HSTS HTTP GET /

78. HSTS HTTP GET / HTTP 301  Location: https://strona.pl/

79. HSTS HTTP GET / HTTP 301  Location: https://strona.pl/ HTTPS GET /

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/

84. HSTS Header set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" Dodajemy w .htaccess: 

85. Sposób renderowania strony

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. 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. 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. <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. 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; } }

93. 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; } }

94. 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ą

95. 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ą

96. Pytania?

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

Word up łódź kwiecień 2015

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to Word up łódź kwiecień 2015

Similar to Word up łódź kwiecień 2015 (20)

More from Tomasz Dziuda

More from Tomasz Dziuda (10)

Word up łódź kwiecień 2015