Upload
tomasz-dziuda
View
2.126
Download
0
Embed Size (px)
Citation preview
Czas (wczytywania) to (czasem) pieniądz
Tomasz Dziuda
WordUp Warszawa @ 6.III.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-performance/
• 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/
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
Jak zbadać szybkość strony?
Źródło: https://developers.google.com/speed/pagespeed/insights/
Źródło: http://yslow.org/
Źródło: http://tools.pingdom.com/
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
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
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
• 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/
• 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/
• 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/
• 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/
• 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/
Ilość zapytań do serwera i rozmiar strony
Struktura typowej strony
Źródło: http://httparchive.org/interesting.php
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
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
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
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
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
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
Szybkość odpowiedzi serwera
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
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>
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• 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 MiTMhttp://sekurak.pl/hsts-czyli-http-strict-transport-security/
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 MiTMhttp://sekurak.pl/hsts-czyli-http-strict-transport-security/
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 MiTMhttp://sekurak.pl/hsts-czyli-http-strict-transport-security/
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 MiTMhttp://sekurak.pl/hsts-czyli-http-strict-transport-security/
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 MiTMhttp://sekurak.pl/hsts-czyli-http-strict-transport-security/
Header set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
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
• 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
• 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>
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; }}
Wydajność strony po załadowaniu
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
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
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
Wydajność JS i CSS
• Wydajność właściwości CSS: http://csstriggers.com/
• FLIP dla animacji: http://aerotwist.com/blog/flip-your-animations/
Wydajność JS i CSS
• Wydajność właściwości CSS: http://csstriggers.com/
• FLIP dla animacji: http://aerotwist.com/blog/flip-your-animations/
Optymalizacja struktury DOM
Źródło: http://httparchive.org/interesting.php
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/
Pytania?
Tomasz Dziuda
Lead Developer @
@dziudek
http://dziudek.pl