Więcej informacji o meetupie na: - https://www.meetup.com/pl-PL/Dev-oclock/ - https://www.facebook.com/XCodingITStudio/

1. JAK PRZYSPIESZYĆ
STRONĘ MOBILNĄ?
Anna Konon
28.11.2017

2. Dlaczego prędkość
ma znaczenie?

3. Czego użytkownik nie lubi podczas przeglądania strony
mobilnej?
źródło: https://webmasters.googleblog.com

4. Klient a szybkość strony
53%
klientów opuści stronę,
której ładowanie zajmie
ponad 3 sekundy
29%
użytkowników przełączy
się na inną stronę, jeśli
obecna jest zbyt wolna
1 na 5
klientów nie wróci już na
stroną, na której pojawiły
się problemy

5. Jakie wyniki powinna mieć strona?
Czas ładowania: 4.033s
Pierwszy bajt: 0.805s
Start renderowania: 2.282s
W pełni załadowana: 10.041s
Indeks prędkości(Speed Index): 2309 ms
Indeks prędkości to średni czas
wyświetlania widocznych części strony.
SPEED INDEX
2309 ms

6. Sprawdź prędkość swojej strony za pomocą webpagetest.org/mobiletest
Połączenie: 3G
Liczba testów: 3
Tylko pierwszy widok
Chrome (zakładka) :
Emulate Mobile Browser

7. Najbardziej znaczący wskaźnik

8. Optymalizacja
obrazów

9. Większość wagi stron internetowych wynika z
obrazów
Problemy z wydajnością związane z obrazami:
img {
display: none;
}
img {
max-width: 100%;
}

10. Pobierz i zmniejsz: srcset

11. Pobierz i zmniejsz: obrazy tła

12. Kompresja
zdjęć

13. 1. Photoshop

14. 2. TinyJPG
https://tinyjpg.com/
0.98 MB
1920x1080px
139.5 KB (-87%)
1920x1080px

15. 3. NPM GULP-IMAGEMIN https://www.npmjs.com/package/gulp-imagemin

16. 4. Base64
https://www.base64-image.de/

17. Lazy loading
Lazy loading jest pojęciem polegającym na opóźnieniu ładowania obiektu, aż do
momentu, w którym jest on potrzebny.
https://github.com/aFarkas/lazysizes

18. TEST 1.
Zdjęcie 0,98 MB
4 485 ms
2.
Zdjęcie 139,5 KB
2 428 ms
3.
Zdjęcie 139,5 KB
BASE64
1 800 ms
4.
Zdjęcie 139,5 KB
SRCSET
1 920 ms
5.
Zdjęcie 139,5 KB
MEDIA QUERIES
2 084 ms

19. Slider na stronie
Suwak na urządzeniu mobilnym jest najgorszym
doświadczeniem dla użytkownika

20. Dlaczego slidery powinny być zakazane na
urządzeniach mobilnych?
● Zła wydajność: zabójca szybkości ładowania strony
● Pierwszy slajd otrzyma wszystkie kliknięcia - CTR
● Ruchy na stronie podczas czytania
● Wyglądają jak reklamy
● Potrzebuje wielu obrazów oraz kod JavaScript

21. Dlaczego warto usunąć slider na urządzeniu
mobilnym?
źródło: https://erikrunyon.com/2013/01/carousel-stats/

22. Więc jakie mamy opcje?

23. Jak zoptymalizować
ładowanie CSS?

24. Critical CSS Wczytywanie pliku CSS asynchronicznie powoduje chwilowe wyświetlenie
nieostylowanej zawartości, Critical CSS niweluje ten problem.
https://github.com/addyosmani/critical-path-css-demo

25. Jak
zoptymalizować
ładowanie
JavaScript?

26. ASYNC i DEFER
DEFER: jeśli ładowanie ma
znaczenie
ASYNC: jeśli skrypt jest
samodzielny
źródło: https://www.kaliop.pl/Blog/Artykuly/Optymalizacja-strony

27. Dziękuję
za
uwagę