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 responsive Design-Strategie - Optionen für responsive Websites
RICK:
- warum brauchen wir performance?
- Optimierung für Performance
Agenda
@koombea #BeResponsive
Was ist responsive & warum?
- Gibt es für ein paar Jahre. - funktioniert auf mobile. - mobilen Einsatz erhöht und ist notwendig,
@koombea #BeResponsive
Responsive VS Mobile VS Native App
@koombea #BeResponsive
90% der Nutzer verwenden mehrere Bildschirme. (uberflip)
66% der Smartphone-& Tablet-Nutzer sind mit Ladezeiten frustriert. (SEO social)
@koombea #BeResponsive
Wann wollen wir responsive?
@koombea #BeResponsive
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
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
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
1. Marketing-Site (normalerweise ja).
2. Web App (je nachdem). 3. E-commerce (normalerweise
ja).
Sollten Sie für responsive bauen?
@koombea #BeResponsive
Shopify, Zappos, Amazon, eBay
“My Artisan Ink” Responsive Fallstudie
- Graceful degradation. - Mobile zuletzt
- Progressive enhancement - Mobile zuerst - Content zuerst
Web Responsive Design-Strategien
@koombea #BeResponsive
Graceful Degradation
Progressive Enhancement
Responsive-Strategien
@koombea #BeResponsive
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
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 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
“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!
Das impact von mobile users
• mehr Nutzer • gehen Sie zu Ihrer App jederzeit • große Veränderungen in Site-Traffic • langsameren Verbindungen • weniger Bandbreite
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
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?
Keine einfache Antwort
Internet
4 Möglichkeiten zur Optimierung
Python Ruby node.js Java
Client Device Netzwerk Application Stack Code
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
performance verbessern auf der Network
• Schnellere Downloads: – Content Delivery Network – Google SPDY – OCSP stapling
• Ihre Optionen: – CDN – NGINX+
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
Vier Schritte zu schnelleren Apps
Optimieren HTTP processing Scale the backend servers Cache populär responses intelligente mit Ihrem traffic
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
Hunderte von gleichzeitigen Verbindungen ...
durch eine kleine Anzahl von Multiplexverfahren übergeben ...
ein Prozess pro Core
NGINX architecture
NGINX ändert application performance
• fast unbegrenzte Fähigkeit • Verwandelt Worst-Case-Traffic auf Best-Case.
Internet N langsam, high-concurrency
internet-side traffic Schnell, effizient local-side traffic
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?
Cache populär responses
GET /logo.png
GET /logo.png
Hybrid on-‐disk and in-‐memory cache
N+
Was ist mit dynamic content?
• einige Seiten sinbe un-‐cacheable • einige Seiten sind uncacheable
– cache purging
– Schnelle cache 9mes
Clever mit Ihrem traffic
• Priorisieren and rate-‐limit requests and responses – Queues, Rate-‐limits, Honeypots, ACLs
• Verwenden sie NGINX Plus!
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; } }
NGINX Plus
• NGINX Open Source + erweiterte Funk9onen – Beispiel:
• Applica9on Health Checks • Session Persistence (S9cky Sessions) • Advanced Monitoring and Sta9s9k • Cache Purge • HLS & HDS Video
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
Weitere Informationen
• hfp://nginx.com – Webinare, Dokumenta9on, Testversion
• hfp://nginx.org – Open Source, Community, Dokumenta9on
• @nginx, @nginxorg • hfp://nginx.com/nginxconf/
@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 [email protected]
#BeResponsive