Responsive Mit Irhem Webseiten (German Edition) Was ist responsive & warum? Welche Option sollten Sie wählen? Warum brauchen wir performance? Optimierung für Performance

1. RESPONSIVE MIT IRHEM WEBSEITEN
@koombea #BeResponsive
(German Version)

2. Sprecher
David Bohorquez
Front End Lead
Koombea
Rick Nelson
Technical Solutions Architect
NGINX
@koombea #BeResponsive

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. Was ist responsive & warum?
- Gibt es für ein paar Jahre.
- funktioniert auf mobile.
- mobilen Einsatz erhöht und ist notwendig,
@koombea #BeResponsive

5. Responsive VS Mobile VS Native App
@koombea #BeResponsive

6. 90% der Nutzer verwenden mehrere
Bildschirme. (uberflip)
66% der Smartphone-& Tablet-Nutzer
sind mit Ladezeiten frustriert. (SEO social)
@koombea #BeResponsive

7. Wann wollen wir responsive?
@koombea #BeResponsive

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. 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. 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. 1. Marketing-Site
(normalerweise ja).
2. Web App (je nachdem).
3. E-commerce (normalerweise
ja).
Sollten Sie für responsive bauen?
@koombea #BeResponsive

12. Shopify, Zappos, Amazon, eBay

13. “My Artisan Ink” Responsive
Fallstudie

14. - Graceful degradation.
- Mobile zuletzt
- Progressive enhancement
- Mobile zuerst
- Content zuerst
Web Responsive Design-Strategien
@koombea #BeResponsive

15. Graceful Degradation
Progressive Enhancement
Responsive-Strategien
@koombea #BeResponsive

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. Herstellung von Responsive-Web
Rick Nelson
Technical Solutions Architect
@koombea #BeResponsive

18. Web-Performance ist
wichtig

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. “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. 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. 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. 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. Keine einfache Antwort

25. Internet
4 Möglichkeiten zur Optimierung
Python
Ruby
node.js
Java
Client Device Netzwerk Application Stack Code

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. performance verbessern auf der
Network
• Schnellere Downloads:
– Content Delivery Network
– Google SPDY
– OCSP stapling
• Ihre Optionen:
– CDN
– NGINX+

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. Vier Schritte zu schnelleren Apps
Optimieren HTTP processing
Scale the backend servers
Cache populär responses
intelligente mit Ihrem traffic

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. Hunderte von
gleichzeitigen
Verbindungen ...
durch eine kleine Anzahl von
Multiplexverfahren
übergeben ...
ein Prozess pro Core
NGINX architecture

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. 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. Cache populär responses
GET
/logo.png
GET
/logo.png
Hybrid
on-­‐disk
and
in-­‐memory
cache
N+

35. Was ist mit dynamic content?
• einige
Seiten
sinbe
un-­‐cacheable
• einige
Seiten
sind
uncacheable
– cache
purging
– Schnelle
cache
9mes

36. Clever mit Ihrem traffic
• Priorisieren
and
rate-­‐limit
requests
and
responses
– Queues,
Rate-­‐limits,
Honeypots,
ACLs
• Verwenden
sie
NGINX
Plus!

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;
}
}

39. NGINX Plus
• NGINX
Open
Source
+
erweiterte
Funk9onen
– Beispiel:
• Applica9on
Health
Checks
• Session
Persistence
(S9cky
Sessions)
• Advanced
Monitoring
and
Sta9s9k
• Cache
Purge
• HLS
&
HDS
Video

40. 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

41. Weitere Informationen
• hfp://nginx.com
– Webinare,
Dokumenta9on,
Testversion
• hfp://nginx.org
– Open
Source,
Community,
Dokumenta9on
• @nginx,
@nginxorg
• hfp://nginx.com/nginxconf/

42. @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