Prezentacja pokazana podczas AllegroTech meetup w listopadzie 2017 przez Eryka Zimończyka i Sebastiana Szczerbowskiego. Zasady znacie – lekko, szybko i coraz szybciej. Ale im więcej produktów, stron i portali trzeba zoptymalizować, tym bardziej karkołomne wydaje się to zadanie. Jak lokalizować zagrożenia i błędy? Jak porównywać się z innymi żeby wyniki miały przełożenie na rzeczywistość? I wreszcie jak stworzyć proces, który naprawdę pozwoli na optymalizację wszystkich produktów na raz. W naszej prezentacji pokazaliśmy nieprzypudrowaną twarz optymalizacji stron internetowych dla największych portali medialnych w Polsce.

1. SUBTELNA SZTUKA
OPTYMALIZACJI
lekko, szybko i jeszcze szybciej
Performance Review
Paul Delaroche, 1833, olej na płótnie

2. SEBASTIAN
SZCZERBOWSKI

4. 23 mln
realnych
użytkowników
7 mln
zapytań
na minutę
150 mln
PV dziennie

5. 350
specjalistów
40
zespołów
> 500
wdrożeń
dziennie

6. PRZYSPIESZANIE SERWISU

7. POMIARY
• Start Render
• Fully Loaded
• LoadTime
• Visual Progress
• Visual Complete

8. WebPageTest
0
0,9
1,8
2,7
3,6
4,5
5,4
6,3
7,2
8,1
9

9. Real User Monitoring
Safari
3G
WiFi
Chrome
Android
iOS
Mobile

10. Analityka

11. ERYK
ZIMOŃCZYK

12. A group of developers trying to optimise the website to outrun the competitors
Frederic S. Remington, 1889, olej na płótnie
PRZYKŁAD OPTYMALIZACJI

13. Mobilna strona - m.onet.pl
• kilka milionów użytkowników miesięcznie
• widgety: pogoda, stan powietrza, JakDojade itd.
• notyfikacje
• setki milionów odsłon miesięcznie

14. NARZĘDZIA

15. CSS
JavaScript
Service
Worker
Cache
Testy A/B
OBSZARY USPRAWNIEŃ
PWA

16. • podział arkuszy
• przemyślany projekt
• powtarzalność komponentów
• optymalne rozwiązania animacji
• własny CDN
CSS rules simplified - iteration no. 3
Piet Mondrian, 1929, olej na płótnie
CSS

18. • moduły AMD
• kolejność skryptów
• ograniczenie zewnętrznych plików
• przetestowany i optymalny kod
Senior developer gets interrupted
Pier Francesco Mola, ok. 1660, olej na płótnie
JavaScript

19. • szybsza odpowiedź
• różne strategie
• powtarzalność zasobów
• nagłówki odpowiedzi
CACHE
cache
cache serwer
użytkownik

20. • wsparcie przeglądarek
• zapis do bazy
• różne drogi odpowiedzi
• działanie offline
Service Worker, portrait
Johann Baptist Reiter, 1848, olej na płótnie
Service Worker

21. • statystyki użytkowników
• wsparcie dla starszych wersji
Service Worker

22. • splash screen
• natywny feel&look
• aplikacyjny UI
PWA

23. • testy na użytkownikach
• realne statystyki
Testy A/B

24. ?

25. Dziękujemy za uwagę!
eryk.zimonczyk@dreamlab.pl
sebastian.szczerbowski@dreamlab.pl