Responsive Mit Irhem Webseiten (German Edition)
0 gefällt mir1,649 aufrufe
Das Dokument beschreibt die Bedeutung des responsiven Webdesigns und der Web-Performance, um eine optimale Nutzererfahrung über verschiedene Geräte hinweg zu gewährleisten. Es werden Vor- und Nachteile von responsiven Websites, mobilen Apps sowie nativen Apps erörtert, während auch verschiedene Design-Strategien wie 'graceful degradation' und 'progressive enhancement' diskutiert werden. Zudem wird die Rolle von Nginx zur Verbesserung der Anwendungsleistung und des mobilen Webs hervorgehoben.
Responsive Mit Irhem Webseiten (German Edition)
- 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
- 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
- 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?
- 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 [email protected] #BeResponsive