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/

• 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

• 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) Szybkość WordPressa

2) Ilość zapytań do serwera

3) Rozmiar strony

4) Szybkość odpowiedzi serwera

3) Rozmiar strony

5) Sposób renderowania strony

3) Rozmiar strony

5) Sposób renderowania strony

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/

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

• 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

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

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

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

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/

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/

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

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/

• 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

dziudek@gavick.com

Word up warszawa 2015

Internet

Transcript of Word up warszawa 2015

Babik up nowe_wymiary_1

RIDE UP 2013

Erp Project Up

WBECS Full Line-up

Styl, Moda, Make - up

PRZEWODNIK MAKE UP

Katalog Fm Make up

Katalog make up nr 10

SAMA pull up banner

Solano Line Up

Strategia Getin UP!

Pimp My WordPress - Word UP Lublin 09.12.2014

Watt's Up n° 13

Start-Up bez pieniędzy

katalog make up

Dossier Fed - Up

"Listen up!" Social Media

8.25.2011 Round Up

PIC'n up the pace

UP Koni Cover