responsive mit irhem webseiten (german edition)
DESCRIPTION
Responsive Mit Irhem Webseiten (German Edition) Was ist responsive & warum? Welche Option sollten Sie wählen? Warum brauchen wir performance? Optimierung für PerformanceTRANSCRIPT
![Page 1: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/1.jpg)
RESPONSIVE MIT IRHEM WEBSEITEN
@koombea #BeResponsive (German Version)
![Page 2: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/2.jpg)
Sprecher
David Bohorquez Front End Lead
Koombea
Rick Nelson Technical Solutions Architect
NGINX
@koombea #BeResponsive
![Page 3: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/3.jpg)
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
![Page 4: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/4.jpg)
Was ist responsive & warum?
- Gibt es für ein paar Jahre. - funktioniert auf mobile. - mobilen Einsatz erhöht und ist notwendig,
@koombea #BeResponsive
![Page 5: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/5.jpg)
Responsive VS Mobile VS Native App
@koombea #BeResponsive
![Page 6: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/6.jpg)
90% der Nutzer verwenden mehrere Bildschirme. (uberflip)
66% der Smartphone-& Tablet-Nutzer sind mit Ladezeiten frustriert. (SEO social)
@koombea #BeResponsive
![Page 7: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/7.jpg)
Wann wollen wir responsive?
@koombea #BeResponsive
![Page 8: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/8.jpg)
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
![Page 9: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/9.jpg)
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
![Page 10: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/10.jpg)
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
![Page 11: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/11.jpg)
1. Marketing-Site (normalerweise ja).
2. Web App (je nachdem). 3. E-commerce (normalerweise
ja).
Sollten Sie für responsive bauen?
@koombea #BeResponsive
![Page 12: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/12.jpg)
Shopify, Zappos, Amazon, eBay
![Page 13: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/13.jpg)
“My Artisan Ink” Responsive Fallstudie
![Page 14: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/14.jpg)
- Graceful degradation. - Mobile zuletzt
- Progressive enhancement - Mobile zuerst - Content zuerst
Web Responsive Design-Strategien
@koombea #BeResponsive
![Page 15: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/15.jpg)
Graceful Degradation
Progressive Enhancement
Responsive-Strategien
@koombea #BeResponsive
![Page 16: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/16.jpg)
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
![Page 17: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/17.jpg)
Herstellung von Responsive-Web
Rick Nelson
Technical Solutions Architect
@koombea #BeResponsive
![Page 18: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/18.jpg)
Web-Performance ist wichtig
![Page 19: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/19.jpg)
• 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
![Page 20: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/20.jpg)
“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!
![Page 21: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/21.jpg)
Das impact von mobile users
• mehr Nutzer • gehen Sie zu Ihrer App jederzeit • große Veränderungen in Site-Traffic • langsameren Verbindungen • weniger Bandbreite
![Page 22: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/22.jpg)
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
![Page 23: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/23.jpg)
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?
![Page 24: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/24.jpg)
Keine einfache Antwort
![Page 25: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/25.jpg)
Internet
4 Möglichkeiten zur Optimierung
Python Ruby node.js Java
Client Device Netzwerk Application Stack Code
![Page 26: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/26.jpg)
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
![Page 27: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/27.jpg)
performance verbessern auf der Network
• Schnellere Downloads: – Content Delivery Network – Google SPDY – OCSP stapling
• Ihre Optionen: – CDN – NGINX+
![Page 28: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/28.jpg)
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
![Page 29: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/29.jpg)
Vier Schritte zu schnelleren Apps
Optimieren HTTP processing Scale the backend servers Cache populär responses intelligente mit Ihrem traffic
![Page 30: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/30.jpg)
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
![Page 31: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/31.jpg)
Hunderte von gleichzeitigen Verbindungen ...
durch eine kleine Anzahl von Multiplexverfahren übergeben ...
ein Prozess pro Core
NGINX architecture
![Page 32: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/32.jpg)
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
![Page 33: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/33.jpg)
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?
![Page 34: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/34.jpg)
Cache populär responses
GET /logo.png
GET /logo.png
Hybrid on-‐disk and in-‐memory cache
N+
![Page 35: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/35.jpg)
Was ist mit dynamic content?
• einige Seiten sinbe un-‐cacheable • einige Seiten sind uncacheable
– cache purging
– Schnelle cache 9mes
![Page 36: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/36.jpg)
Clever mit Ihrem traffic
• Priorisieren and rate-‐limit requests and responses – Queues, Rate-‐limits, Honeypots, ACLs
• Verwenden sie NGINX Plus!
![Page 37: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/37.jpg)
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; } }
![Page 38: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/38.jpg)
![Page 39: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/39.jpg)
NGINX Plus
• NGINX Open Source + erweiterte Funk9onen – Beispiel:
• Applica9on Health Checks • Session Persistence (S9cky Sessions) • Advanced Monitoring and Sta9s9k • Cache Purge • HLS & HDS Video
![Page 40: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/40.jpg)
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
![Page 41: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/41.jpg)
Weitere Informationen
• hfp://nginx.com – Webinare, Dokumenta9on, Testversion
• hfp://nginx.org – Open Source, Community, Dokumenta9on
• @nginx, @nginxorg • hfp://nginx.com/nginxconf/
![Page 42: Responsive Mit Irhem Webseiten (German Edition)](https://reader034.vdocuments.site/reader034/viewer/2022042715/55906c171a28ab4e488b46d2/html5/thumbnails/42.jpg)
@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