RESPONSIVE MIT IRHEM WEBSEITEN
@koombea #BeResponsive
(German Version)
Sprecher
David Bohorquez
Front End Lead
Koombea
Rick Nelson
Technical Solutions Architect
NGINX
@koombea #BeResponsive
DAVID:	
  
	
  
	
  
	
  
	
  
	
  
-  Was ist responsive & warum?
-  Welche Option sollten Sie
wählen?	
  
-  Web respons...
Was ist responsive & warum?
-  Gibt es für ein paar Jahre.
-  funktioniert auf mobile.
-  mobilen Einsatz erhöht und ist n...
Responsive VS Mobile VS Native App
@koombea #BeResponsive
90% der Nutzer verwenden mehrere
Bildschirme. (uberflip)
	
  
	
  
	
  
	
  
	
  
	
  
	
  
	
  
	
  
	
  
66% der Smartpho...
Wann wollen wir responsive?
@koombea #BeResponsive
Mobile Version
Vorteile:
- erfordert eine separate Website	
  
- Optimierung für Mobile
- weniger Arbeit und schneller	
  ...
Vorteile:
- Dedicated-Marktplatz. Beispiel: App Store or
Google Play.
- bessere performance.
Nachteile:	
  
- Benötigt App...
Vorteile:	
  
- nur eine Website
- billiger.	
  
- besser für die Zukunft.
-  weniger Arbeit.
-  nur eine Website	
  
- sc...
1.  Marketing-Site
(normalerweise ja).
2.  Web App (je nachdem).
3. E-commerce (normalerweise
ja).
Sollten Sie für respons...
Shopify, Zappos, Amazon, eBay
“My Artisan Ink” Responsive
Fallstudie
-  Graceful degradation.
-  Mobile zuletzt
-  Progressive enhancement
-  Mobile zuerst
-  Content zuerst
Web Responsive De...
Graceful Degradation
Progressive Enhancement
Responsive-Strategien
@koombea #BeResponsive
Erkennung Taktik:	
  
- Device/OS/Browser Entdeckung
(unzuverlässig).
- Feature-Erkennung.
- Erkennung sollten die Funktio...
Herstellung von Responsive-Web
Rick Nelson	
  
Technical Solutions Architect
@koombea #BeResponsive
Web-Performance ist
wichtig
•  es ist Ihre Website, aber das spielt keine Rolle
•  Sie entscheiden:
•  Wenn Sie nicht Ihre Benutzer geben was sie brau...
“We want you to be able to flick from one page to another as quickly as you
can flick a page on a book. So we’re really aimi...
Das impact von mobile users
•  mehr Nutzer
•  gehen Sie zu Ihrer App jederzeit
•  große Veränderungen in Site-Traffic
•  l...
Mobile Apps vs. Mobile Web
•  Mobile Apps verwenden API-Aufrufe nicht Web-Seiten
•  viele kurze requests
•  mehr Verbindun...
The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corr...
Keine einfache Antwort
Internet
4 Möglichkeiten zur Optimierung
Python	
  
Ruby	
  
node.js	
  
Java	
  
Client Device Netzwerk Application Stack...
performance verbessern auf Client
Device
•  Reduzieren HTTP GETs und Bandbreite:
–  Merge und Ressourcen zu reduzieren
–  ...
performance verbessern auf der
Network
•  Schnellere Downloads:
–  Content Delivery Network
–  Google SPDY
–  OCSP staplin...
performance verbessern auf dem
Application Stack
•  Was meinen wir damit?
•  Das ‘Application Stack’ verbindet HTTP traffi...
Vier Schritte zu schnelleren Apps
Optimieren HTTP processing
Scale the backend servers
Cache populär responses
intelligent...
Hunderte von
gleichzeitigen
Verbindungen ...
durch eine kleine Anzahl von
Multiplexverfahren
übergeben ...
begrenzten
Ress...
Hunderte von
gleichzeitigen
Verbindungen ...
durch eine kleine Anzahl von
Multiplexverfahren
übergeben ...
ein Prozess pro...
NGINX ändert application performance
•  fast unbegrenzte Fähigkeit
•  Verwandelt Worst-Case-Traffic auf Best-Case.
Interne...
Scale the Backend Servers
Load Balancing
Internet
N
þ 	
  verbessert	
  Applica9on	
  Availability	
  
þ 	
  Management	...
Cache populär responses
GET	
  /logo.png	
  
GET	
  /logo.png	
  
Hybrid	
  on-­‐disk	
  and	
  
in-­‐memory	
  cache	
  
...
Was ist mit dynamic content?
•  einige	
  Seiten	
  sinbe	
  un-­‐cacheable	
  	
  
•  einige	
  Seiten	
  sind	
  uncache...
Clever mit Ihrem traffic
•  Priorisieren	
  and	
  rate-­‐limit	
  requests	
  and	
  responses	
  
–  Queues,	
  Rate-­‐li...
A NGINX Mobile Beispiel
•  Rou9ng	
  desktop	
  und	
  mobile	
  clients	
  anders	
  
map $http_user_agent $whichUpstream...
NGINX Plus
•  NGINX	
  Open	
  Source	
  +	
  erweiterte	
  Funk9onen	
  
–  Beispiel:	
  
•  Applica9on	
  Health	
  Chec...
Zusammenfassung
•  Applica9on	
  Performance	
  ist	
  sehr	
  wich9g.	
  
•  Vier	
  Bereiche	
  zum	
  konzentrieren:	
 ...
Weitere Informationen
•  hfp://nginx.com	
  
–  Webinare,	
  Dokumenta9on,	
  Testversion	
  
•  hfp://nginx.org	
  
–  Op...
@koombea
386 Park Ave South, 10th Floor
New York, NY 10016
625 2nd St., Suite 280
San Francisco, CA 94107
Cra 53 # 79-01 L...
Responsive Mit Irhem Webseiten (German Edition)
Nächste SlideShare
Wird geladen in …5
×

Responsive Mit Irhem Webseiten (German Edition)

892 Aufrufe

Veröffentlicht am

Responsive Mit Irhem Webseiten (German Edition)


Was ist responsive & warum? Welche Option sollten Sie wählen?

Warum brauchen wir performance? Optimierung für Performance

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
892
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3
Aktionen
Geteilt
0
Downloads
3
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Responsive Mit Irhem Webseiten (German Edition)

  1. 1. RESPONSIVE MIT IRHEM WEBSEITEN @koombea #BeResponsive (German Version)
  2. 2. Sprecher David Bohorquez Front End Lead Koombea Rick Nelson Technical Solutions Architect NGINX @koombea #BeResponsive
  3. 3. DAVID:             -  Was ist responsive & warum? -  Welche Option sollten Sie wählen?   -  Web responsive Design-Strategie -  Optionen für responsive Websites RICK: -  warum brauchen wir performance?   -  Optimierung für Performance Agenda @koombea #BeResponsive
  4. 4. Was ist responsive & warum? -  Gibt es für ein paar Jahre. -  funktioniert auf mobile. -  mobilen Einsatz erhöht und ist notwendig, @koombea #BeResponsive
  5. 5. Responsive VS Mobile VS Native App @koombea #BeResponsive
  6. 6. 90% der Nutzer verwenden mehrere Bildschirme. (uberflip)                     66% der Smartphone-& Tablet-Nutzer sind mit Ladezeiten frustriert. (SEO social) @koombea #BeResponsive
  7. 7. Wann wollen wir responsive? @koombea #BeResponsive
  8. 8. Mobile Version Vorteile: - erfordert eine separate Website   - Optimierung für Mobile - weniger Arbeit und schneller   Nachteile:   - Mehrere trennt Websites.   - doppelte SEO (gut oder schlecht) @koombea #BeResponsive
  9. 9. Vorteile: - Dedicated-Marktplatz. Beispiel: App Store or Google Play. - bessere performance. Nachteile:   - Benötigt App für jede Plattform.. - App Review Zeit dauert eine Weile   - teurer Native App
  10. 10. Vorteile:   - nur eine Website - billiger.   - besser für die Zukunft. -  weniger Arbeit. -  nur eine Website   - schneller Entwicklungszeit   Nachteile:   - komplexere Arbeit - es gibt viele Arten von Mobil. Responsive
  11. 11. 1.  Marketing-Site (normalerweise ja). 2.  Web App (je nachdem). 3. E-commerce (normalerweise ja). Sollten Sie für responsive bauen? @koombea #BeResponsive
  12. 12. Shopify, Zappos, Amazon, eBay
  13. 13. “My Artisan Ink” Responsive Fallstudie
  14. 14. -  Graceful degradation. -  Mobile zuletzt -  Progressive enhancement -  Mobile zuerst -  Content zuerst Web Responsive Design-Strategien @koombea #BeResponsive
  15. 15. Graceful Degradation Progressive Enhancement Responsive-Strategien @koombea #BeResponsive
  16. 16. Erkennung Taktik:   - Device/OS/Browser Entdeckung (unzuverlässig). - Feature-Erkennung. - Erkennung sollten die Funktionen zu identifizieren um die richtige Website zu zeigen Möglichkeiten für Responsive-Web @koombea #BeResponsive
  17. 17. Herstellung von Responsive-Web Rick Nelson   Technical Solutions Architect @koombea #BeResponsive
  18. 18. Web-Performance ist wichtig
  19. 19. •  es ist Ihre Website, aber das spielt keine Rolle •  Sie entscheiden: •  Wenn Sie nicht Ihre Benutzer geben was sie brauchen, wenn sie es brauchen, werden sie die app verlassen. •  Wenn Ihre Seite nicht innerhalb von 3 Sekunden geladen ist, wird bis zu 40% Ihrer Benutzer werden die app verlassen. Welche  Websites    sie  besuchen?   Die  Apps  sie  nutzen   die  performance   die  sie  akzep9eren   wenn  sie  au;ören   Benutzer sind in der Steuerung
  20. 20. “We want you to be able to flick from one page to another as quickly as you can flick a page on a book. So we’re really aiming very, very high here… at something like 100 milliseconds.” Urs Hölzle, Senior VP Operations, Google Jeder Benutzer ist wichtig Es spielt keine Rolle, wie viel Traffic Ihrer Webseite.           -  Flash Crowd -  HTTP Post Attack, Slow Read Attack … es ist ihnen egal!  
  21. 21. Das impact von mobile users •  mehr Nutzer •  gehen Sie zu Ihrer App jederzeit •  große Veränderungen in Site-Traffic •  langsameren Verbindungen •  weniger Bandbreite
  22. 22. Mobile Apps vs. Mobile Web •  Mobile Apps verwenden API-Aufrufe nicht Web-Seiten •  viele kurze requests •  mehr Verbindungen •  Unterstützung für mehrere App-Versionen Ihre Server muss Millionen von requests sehr schnell liefern
  23. 23. The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Was können Sie tun?
  24. 24. Keine einfache Antwort
  25. 25. Internet 4 Möglichkeiten zur Optimierung Python   Ruby   node.js   Java   Client Device Netzwerk Application Stack Code
  26. 26. performance verbessern auf Client Device •  Reduzieren HTTP GETs und Bandbreite: –  Merge und Ressourcen zu reduzieren –  gute Verwendung von client caching •  Ihre Optionen: –  Vorverarbeitung in Asset Pipeline –  In-app (Google Pagespeed) –  As-a-Service
  27. 27. performance verbessern auf der Network •  Schnellere Downloads: –  Content Delivery Network –  Google SPDY –  OCSP stapling •  Ihre Optionen: –  CDN –  NGINX+
  28. 28. performance verbessern auf dem Application Stack •  Was meinen wir damit? •  Das ‘Application Stack’ verbindet HTTP traffic mit Ihrem Code, APIs und Static content Internet code: •  Python, Ruby, node.js, Java APIs •  Internal and External APIs “Static” Content •  On disk •  In database HTTP  
  29. 29. Vier Schritte zu schnelleren Apps Optimieren HTTP processing Scale the backend servers Cache populär responses intelligente mit Ihrem traffic
  30. 30. Hunderte von gleichzeitigen Verbindungen ... durch eine kleine Anzahl von Multiplexverfahren übergeben ... begrenzten Ressourcen Was ist hart mit HTTP? Client-side: langsame Netzwerk mehrere Verbindungen HTTP Keepalives Server-side: Beschränkt concurrency
  31. 31. Hunderte von gleichzeitigen Verbindungen ... durch eine kleine Anzahl von Multiplexverfahren übergeben ... ein Prozess pro Core NGINX architecture
  32. 32. NGINX ändert application performance •  fast unbegrenzte Fähigkeit •  Verwandelt Worst-Case-Traffic auf Best-Case. Internet Nlangsam, high-concurrency internet-side traffic Schnell, effizient local-side traffic
  33. 33. Scale the Backend Servers Load Balancing Internet N þ   verbessert  Applica9on  Availability   þ   Management   þ   erhöht  Capacity   þ   Advanced  techniques  e.g.  A|B  tes9ng   Why?   þ   DNS  Round  Robin   þ   Hardware  L4  load  balancer   þ   SoOware  Reverse  Proxy  LB   þ   Cloud  solu9on   How?  
  34. 34. Cache populär responses GET  /logo.png   GET  /logo.png   Hybrid  on-­‐disk  and   in-­‐memory  cache   N+
  35. 35. Was ist mit dynamic content? •  einige  Seiten  sinbe  un-­‐cacheable     •  einige  Seiten  sind  uncacheable   –  cache  purging   –  Schnelle  cache  9mes  
  36. 36. Clever mit Ihrem traffic •  Priorisieren  and  rate-­‐limit  requests  and  responses   –  Queues,  Rate-­‐limits,  Honeypots,  ACLs   •  Verwenden  sie  NGINX  Plus!  
  37. 37. A NGINX Mobile Beispiel •  Rou9ng  desktop  und  mobile  clients  anders   map $http_user_agent $whichUpstream { ~iPhone mobile; ~Android mobile; default desktop; } Upstream mobile { server 192.168.100.100:8080; server 192.168.100.101:8080; } Upstream mobile { server 192.168.100.100:80; server 192.168.100.101:80; } server { listen 80; location / { proxy_pass http://$whichUpstream; } }
  38. 38. NGINX Plus •  NGINX  Open  Source  +  erweiterte  Funk9onen   –  Beispiel:   •  Applica9on  Health  Checks   •  Session  Persistence  (S9cky  Sessions)   •  Advanced  Monitoring  and  Sta9s9k   •  Cache  Purge   •  HLS  &  HDS  Video  
  39. 39. Zusammenfassung •  Applica9on  Performance  ist  sehr  wich9g.   •  Vier  Bereiche  zum  konzentrieren:   –  Die  Applica9on   – Der  Client   – Das  Network   – Die  Applica9on  Stack   •  NGINX  verbessert  Mobile  Web  and  Mobile  Apps   •  NGINX  wird  von  40%  der  top  10,000  sites  benutzt  
  40. 40. Weitere Informationen •  hfp://nginx.com   –  Webinare,  Dokumenta9on,  Testversion   •  hfp://nginx.org   –  Open  Source,  Community,  Dokumenta9on   •  @nginx,  @nginxorg   •  hfp://nginx.com/nginxconf/  
  41. 41. @koombea 386 Park Ave South, 10th Floor New York, NY 10016 625 2nd St., Suite 280 San Francisco, CA 94107 Cra 53 # 79-01 L-301 Barranquilla, Colombia Haben Sie Fragen? Wir sind hier um zu helfen. Mailen Sie uns an mvp@koombea.com #BeResponsive

×