Word up łódź kwiecień 2015
97
Czas (wczytywania) to (czasem) pieniądz Tomasz Dziuda WordUp Łódź @ 22.IV.2015
-
Upload
tomasz-dziuda -
Category
Technology
-
view
1.285 -
download
2
Transcript of Word up łódź kwiecień 2015
Czas (wczytywania) to (czasem) pieniądz
Tomasz Dziuda
WordUp Łódź @ 22.IV.2015
Dlaczego?
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-
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/
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
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
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
Zanim zaczniemy optymalizować
Pamiętajcie o…
Zasadzie Pareto zwana inaczej zasadą 80/20
Więcej: http://pl.wikipedia.org/wiki/Zasada_Pareto
20% działań optymalizacyjnych
najprawdopodobniej przyniesie 80% efektów
Na pozostałe 20% efektów trzeba będzie poświęcić 80% czasu
Duże firmy mają oddzielne zespoły odpowiedzialne za
optymalizację
https://developer.yahoo.com/performance/
https://developers.google.com/speed/
Pamiętajcie też o…
optymalizacji podstron
oraz pamiętajcie o…
sprawdzaniu czy Page Speed nie zmienił algorytmu
Jak żyć mierzyć?
Powtórka ze statystyki
Powtórka ze statystyki• więcej pomiarów === większa wiarygodność
• średnia arytmetyczna
• mediana i kwartylehttp://pl.wikipedia.org/wiki/Mediana
• wartość minimalna/maksymalna
• odchylenie standardowe http://pl.wikipedia.org/wiki/Odchylenie_standardowe
Powtórka ze statystyki• więcej pomiarów === większa wiarygodność
• średnia arytmetyczna
• mediana i kwartylehttp://pl.wikipedia.org/wiki/Mediana
• wartość minimalna/maksymalna
• odchylenie standardowe http://pl.wikipedia.org/wiki/Odchylenie_standardowe
Powtórka ze statystyki• więcej pomiarów === większa wiarygodność
• średnia arytmetyczna
• mediana i kwartylehttp://pl.wikipedia.org/wiki/Mediana
• wartość minimalna/maksymalna
• odchylenie standardowe http://pl.wikipedia.org/wiki/Odchylenie_standardowe
Powtórka ze statystyki• więcej pomiarów === większa wiarygodność
• średnia arytmetyczna
• mediana i kwartylehttp://pl.wikipedia.org/wiki/Mediana
• wartość minimalna/maksymalna
• odchylenie standardowe http://pl.wikipedia.org/wiki/Odchylenie_standardowe
Powtórka ze statystyki• więcej pomiarów === większa wiarygodność
• średnia arytmetyczna
• mediana i kwartylehttp://pl.wikipedia.org/wiki/Mediana
• wartość minimalna/maksymalna
• odchylenie standardowe http://pl.wikipedia.org/wiki/Odchylenie_standardowe
Źródło: https://developers.google.com/speed/pagespeed/insights/
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
Chrome DevTools
Co wpływa na szybkość strony?
1
1) Szybkość WordPressa
1 2
2) Ilość zapytań do serwera
1) Szybkość WordPressa
1 2
3
2) Ilość zapytań do serwera
3) Rozmiar strony
1) Szybkość WordPressa
1 2
3
4) Szybkość odpowiedzi serwera
4
2) Ilość zapytań do serwera
3) Rozmiar strony
1) Szybkość WordPressa
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
Wersja dla geeków ;-)
https://github.com/alex/what-happens-when
Szybkość WordPressa
• 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
• 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
• 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.pdfCache 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/
• 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.pdfCache 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/
Ilość zapytań do serwera i rozmiar strony
Struktura typowej strony
Źródło: http://httparchive.org/interesting.php
http://www.wpspeedster.com/
http://wpzen.pl/wp-speedster-ranking-szybkosci-motywow-dla-wordpressa/
GZIP
SetOutputFilter DEFLATE BrowserMatch ^Mozilla/4 gzip-only-text/htmlBrowserMatch ^Mozilla/4\.0[678] no-gzipBrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Źródło: http://code.garyjones.co.uk/htaccess-tweaks-improve-site-speed
Rozmiar grafik
Dobór odpowiedniego formatu
• JPG - większość zdjęć
• PNG24 lub PNG8 - przezroczystość
• GIF - animacje
• SVG - niezależność od rozdzielczości
Dobór odpowiedniego formatu
• JPG - większość zdjęć
• PNG24 lub PNG8 - przezroczystość
• GIF - animacje
• SVG - niezależność od rozdzielczości
Dobór odpowiedniego formatu
• JPG - większość zdjęć
• PNG24 lub PNG8 - przezroczystość
• GIF - animacje
• SVG - niezależność od rozdzielczości
Dobór odpowiedniego formatu
• JPG - większość zdjęć
• PNG24 lub PNG8 - przezroczystość
• GIF - animacje
• SVG - niezależność od rozdzielczości
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
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
Optymalizacja grafik
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
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
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
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
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/
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/
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/
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)
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)
Rozmiar HTML/CSS/JS
• Minifikacja - wtyczka Better WordPress Minify i WP HTML Compressionhttps://wordpress.org/plugins/bwp-minify/ https://wordpress.org/plugins/wp-html-compression/
• Unikanie zbyt wielu wtyczek (większość ma swoje pliki CSS i JavaScript)
Rozmiar HTML/CSS/JS
• Minifikacja - wtyczka Better WordPress Minify i WP HTML Compressionhttps://wordpress.org/plugins/bwp-minify/ https://wordpress.org/plugins/wp-html-compression/
• Unikanie zbyt wielu wtyczek (większość ma swoje pliki CSS i JavaScript)
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
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
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ówhttp://www.sitepoint.com/improving-font-performance-subsetting-local-storage/
Zewnętrzne usługi
• Social mediahttp://www.sitepoint.com/social-sharing-hidden-costs/http://www.sitepoint.com/social-media-button-links/
• Gravatarhttp://www.wpbeginner.com/beginners-guide/how-to-disable-gravatars-in-wordpress/
• Youtube, Vimeo etc.
Zewnętrzne usługi
• Social mediahttp://www.sitepoint.com/social-sharing-hidden-costs/http://www.sitepoint.com/social-media-button-links/
• Gravatarhttp://www.wpbeginner.com/beginners-guide/how-to-disable-gravatars-in-wordpress/
Youtube, Vimeo etc.
Zewnętrzne usługi
• Social mediahttp://www.sitepoint.com/social-sharing-hidden-costs/http://www.sitepoint.com/social-media-button-links/
• Gravatarhttp://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
Szybkość odpowiedzi serwera
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>
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
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
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
HSTS
HSTS
HTTP GET /
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 MiTMhttp://sekurak.pl/hsts-czyli-http-strict-transport-security/
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 MiTMhttp://sekurak.pl/hsts-czyli-http-strict-transport-security/
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 MiTMhttp://sekurak.pl/hsts-czyli-http-strict-transport-security/
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 MiTMhttp://sekurak.pl/hsts-czyli-http-strict-transport-security/
HSTS
Header set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
Dodajemy w .htaccess:
Sposób renderowania strony
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/
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/
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/
<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>
<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>
<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>
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; }}
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; }}
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ą
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ą
Pytania?
Tomasz Dziuda
Lead Developer @
@dziudek
http://dziudek.pl
