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
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
18. 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
19. 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
20. 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
21. 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
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
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
37. • 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
38. • 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
• 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/
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
• 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/
46. Dobór odpowiedniego formatu
• JPG - większość zdjęć
• PNG24 lub PNG8 - przezroczystość
• GIF - animacje
• SVG - niezależność od rozdzielczości
47. Dobór odpowiedniego formatu
• JPG - większość zdjęć
• PNG24 lub PNG8 - przezroczystość
• GIF - animacje
• SVG - niezależność od rozdzielczości
48. Dobór odpowiedniego formatu
• JPG - większość zdjęć
• PNG24 lub PNG8 - przezroczystość
• GIF - animacje
• SVG - niezależność od rozdzielczości
49. Dobór odpowiedniego formatu
• JPG - większość zdjęć
• PNG24 lub PNG8 - przezroczystość
• GIF - animacje
• SVG - niezależność od rozdzielczości
50.
51. 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
52. 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
58. 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/
59. 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/
60. 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/
63. Rozmiar HTML/CSS/JS
• Minifikacja - 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
• Minifikacja - 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
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, Cloudflare
74. 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
75. 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
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/
81. 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/
82. 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/
83. 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/
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>
90. <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>
91. <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>
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ą