responsive mit irhem webseiten (german edition)

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 mvp@koombea.com

#BeResponsive