Word up warszawa 2015

Transcript of Word up warszawa 2015

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/

http://www.engadget.com/2015/02/27/google-page-rank-mobile/

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/

http://www.engadget.com/2015/02/27/google-page-rank-mobile/

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

http://www.getelastic.com/how-page-load-speed-affects-conversion-infographic/

http://www.shoutmeloud.com/improve-website-loading-speed-seo-usability.html

• 47% konsumentów oczekuje załadowania się strony 2 sekundy lub szybciej

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

https://developers.google.com/speed/pagespeed/insights/

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

http://yslow.org/

Źródło: http://tools.pingdom.com/

http://tools.pingdom.com/

Chrome DevTools

Co wpływa na szybkość strony?

1

1) Szybkość WordPressa

1 2

2) Ilość zapytań do serwera

1 2

3

3) Rozmiar strony

1 2

3

4) Szybkość odpowiedzi serwera

4

3) Rozmiar strony

1 2

3

5

4

3) Rozmiar strony

5) Sposób renderowania strony

1 2

3

5

4

3) Rozmiar strony

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/

http://wpzen.pl/przyspieszanie-strony-za-pomoca-wtyczki-wp-super-cache/

http://wpzen.pl/wp-content/uploads/2013/09/w3-total-cache-wordcamp-wroclaw-2013.pdf

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

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

• GIF - animacje

• GIF - animacje

• GIF - animacje

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

http://tinypng.com

http://tinyjpg.com

http://smush.it

https://wordpress.org/plugins/wp-smushit/

• tinyjpg.com

• tinyjpg.com

• tinyjpg.com

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/

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)

http://quasimondo.com/ZorroSVG/

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)

http://quasimondo.com/ZorroSVG/

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)

https://wordpress.org/plugins/bwp-minify/

https://wordpress.org/plugins/wp-html-compression/

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)

https://wordpress.org/plugins/bwp-minify/

https://wordpress.org/plugins/wp-html-compression/

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

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

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

rejonów świata

rejonów świata

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/

https://hstspreload.appspot.com/

http://sekurak.pl/hsts-czyli-http-strict-transport-security/

Header set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"

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/

http://refresh-sf.com/

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

http://timkadlec.com/2014/09/js-parse-and-execution-time/

http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/

Warto rozważyć usunięcie nieużywanego kodu JS i CSS

• Warto rozważyć usunięcie nieużywanego kodu JS i CSS

• Wydajność właściwości CSS: http://csstriggers.com/

• FLIP dla animacji: http://aerotwist.com/blog/flip-your-animations/

http://csstriggers.com/

http://aerotwist.com/blog/flip-your-animations/

• Wydajność właściwości CSS: http://csstriggers.com/

• FLIP dla animacji: http://aerotwist.com/blog/flip-your-animations/

http://csstriggers.com/

http://aerotwist.com/blog/flip-your-animations/

Optymalizacja struktury DOM

Źródło: http://httparchive.org/interesting.php

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/

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

[email protected]

http://dziudek.pl

mailto:[email protected]?subject=

Word up warszawa 2015

Internet

Transcript of Word up warszawa 2015