Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Subtelna sztuka optymalizacji

33 views

Published on

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.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Subtelna sztuka optymalizacji

  1. 1. SUBTELNA SZTUKA OPTYMALIZACJI lekko, szybko i jeszcze szybciej Performance Review Paul Delaroche, 1833, olej na płótnie
  2. 2. SEBASTIAN SZCZERBOWSKI
  3. 3. 23 mln
 realnych użytkowników 7 mln
 zapytań na minutę 150 mln
 PV dziennie
  4. 4. 350 specjalistów 40
 zespołów > 500
 wdrożeń dziennie
  5. 5. PRZYSPIESZANIE SERWISU
  6. 6. POMIARY • Start Render • Fully Loaded • LoadTime • Visual Progress • Visual Complete
  7. 7. WebPageTest 0 0,9 1,8 2,7 3,6 4,5 5,4 6,3 7,2 8,1 9
  8. 8. Real User Monitoring Safari 3G WiFi Chrome Android iOS Mobile
  9. 9. Analityka
  10. 10. ERYK ZIMOŃCZYK
  11. 11. A group of developers trying to optimise the website to outrun the competitors Frederic S. Remington, 1889, olej na płótnie PRZYKŁAD OPTYMALIZACJI
  12. 12. 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
  13. 13. NARZĘDZIA
  14. 14. CSS JavaScript Service Worker Cache Testy A/B OBSZARY USPRAWNIEŃ PWA
  15. 15. • 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
  16. 16. • 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
  17. 17. • szybsza odpowiedź • różne strategie • powtarzalność zasobów • nagłówki odpowiedzi CACHE cache cache serwer użytkownik
  18. 18. • 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
  19. 19. • statystyki użytkowników • wsparcie dla starszych wersji Service Worker
  20. 20. • splash screen • natywny feel&look • aplikacyjny UI PWA
  21. 21. • testy na użytkownikach • realne statystyki Testy A/B
  22. 22. ?
  23. 23. Dziękujemy za uwagę! eryk.zimonczyk@dreamlab.pl sebastian.szczerbowski@dreamlab.pl

×