How to be Successful with Responsive Sites (Koombea & NGINX) - English
42
BE RESPONSIVE WITH YOUR SITE @koombea #BeResponsive
Transcript of How to be Successful with Responsive Sites (Koombea & NGINX) - English
BE RESPONSIVE WITH YOUR SITE
@koombea #BeResponsive
Speakers
David Bohorquez Front End Lead
Koombea
Rick Nelson Technical Solutions Architect
NGINX
@koombea #BeResponsive
DAVID:
- What is responsive & why? - Which option should you choose? - Web responsive Design Strategy - Ways to build for responsive
RICK:
- Why performance matters - The impact of mobile - Optimizing for performance
Agenda
@koombea #BeResponsive
What is responsive & why?
- Came out a couple of years ago. - Designing a website or web enabled app that can adjust and
perform optimally for whichever device accesses it. - Mobile usage increased & became a necessity.
@koombea #BeResponsive
Responsive VS Mobile VS Native App
@koombea #BeResponsive
90% of people use multiple screens sequentially. (Source: uberflip)
66% of smartphone & tablet users are frustrated with page load times. (Source SEO
social)
@koombea #BeResponsive
Click here to tweet it!
Click here for the stat!
When responsive?
@koombea #BeResponsive
Mobile Version
Pro’s: - Dedicated Mobile Version. Requires you to build a separate site. - Optimize for mobile. - Less/Simpler work. Better for rapid mobile presence. Con’s:
- Maintain 2 separates sites. - 2 URLs duplicates SEO (good or bad).
@koombea #BeResponsive
Pro’s: - Dedicated marketplace. Ex: App Store or Google Play. - Makes better use of device hardware & new features. Better performance. Con’s:
- Requires one App for each different platform. - Process of submission (takes a long time). - More money.
Native App
Pro’s:
- Requires you to build only one site. - Lower dev cost. - Long run: Is future-friendlier. - Less maintenance. - Only worry about one site. - Faster deploy Con’s:
- Requires more complex work. - Because you have to build for every device it is accessed from.
Responsive
1. Marketing Site (Usually yes). 2. Web App (Depends). 3. E-commerce (Usually yes).
Should you build for responsive?
@koombea #BeResponsive
Shopify, Zappos, Amazon, eBay
My Artisan Ink Responsive Case Study
Click here to see the Responsive Site built by Koombea- have fun!
- Graceful degradation. - Mobile last
- Progressive enhancement - Mobile first - Content first
Web Responsive Design Strategies
@koombea #BeResponsive
Graceful Degradation
Progressive Enhancement
Responsive strategies
@koombea #BeResponsive
Detection tactics:
- Device/OS/Browser detection (unreliable). - Feature detection. - What the device detection should be identifying are the capabilities of the device that is being used to access the website so that the appropriate elements of the site can be returned to the user.
Ways to build for Responsive
@koombea #BeResponsive
Click here to check out Modernizr!
Building Responsive Websites
Rick Nelson
Technical Solutions Architect
@koombea #BeResponsive
Click here to email Rick
Web performance matters
• You may own the content and features, but your users are the ones in charge
• They alone decide:
• If you can’t provide your users with what they need, when they need it, they will go elsewhere.
• If your page has not loaded within 3 seconds, up to 40% of your users will giveup on you.
Which sites they visit The apps they need The performance they’ll tolerate When to give up
Your users are in charge
Click here to read more stats.
“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
Every user counts
It doesn’t matter how busy your site is:
- Flash Crowd - HTTP Post Attack, Slow Read Attack
… they don’t know or care!
The Impact of Mobile Users
• More Users• With the ability to access your app at any time from anywhere• Events can explode and cause massive spikes
– App upgrade– News event
• Slower connections• Lower Bandwidth
Mobile Apps vs. Mobile Web
• Mobile apps use API calls not web pages• More short requests• More connections• Support for Multiple App versions
Your server needs to handle millions of connections delivering short responses very quickly
What can you do?
No Silver Bullet
Internet
4 opportunities to optimize
Python Ruby node.js Java
Client Device Network Application Stack Code
Improve performance on Client Device
• Reduce HTTP GETs and bandwidth:– Merge and reduce resources– Smart control of client caching
• Rearrange resources to speed up rendering
• Your options:– Preprocess in Asset Pipeline– In-app (Google Pagespeed)– As-a-Service
Improve performance on the Network
• Faster resource downloads:– Content Delivery Network– Google SPDY– OCSP stapling
• Your options:– Use a CDN– Use NGINX+
Improve performance of the Application Stack
• What do we mean?
• The ‘Application Stack’ bridges HTTP trafficto your code, APIs and Static content
Internet
Your code: • Python,
Ruby,node.js, Java
APIs • Internal and
External APIs
“Static” Content • On disk• In database
HTTP
Four steps to a faster application
Optimize HTTP processing
Scale the backend servers
Cache common responses
Be smart with your traffic
Hundreds of concurrent connections…
require hundreds of heavyweight threads or processes…
competing for limited CPU and memory
What is the challenge with HTTP?
Client-side: Slow network Multiple connections HTTP Keepalives
Server-side: Limited concurrency
Hundreds of concurrent connections…
handed by a small number of multiplexing processes,…
typically one process per core
NGINX architecture
NGINX transforms application performance
• NGINX has almost-unlimited concurrency– Transforms worst-case traffic to best-case– Maximizes application utilization
Internet NSlow, high-concurrency
internet-side traffic Fast, efficient local-side traffic
Scale the Backend Servers Load Balancing
Internet N
þ Improved Applica@on Availability þ Management þ Increased Capacity þ Advanced techniques e.g. A|B tes@ng
Why? þ DNS Round Robin þ Hardware L4 load balancer þ SoMware Reverse Proxy LB þ Cloud solu@on
How?
Cache common responses
GET /logo.png
GET /logo.png
Hybrid on-‐disk and in-‐memory cache
N+
What about dynamic content?
• Some content appears to be un-‐cacheable • But oMen even dynamic content can be cached
– Use cache purging– Use fast cache @mes
Be smart with your traffic
• Priori@ze and rate-‐limit requests and responses – Queues, Rate-‐limits, Honeypots, ACLs
• Use NGINX Plus to its full poten@al
A NGINX Mobile Example
• Rou@ng desktop and mobile clients differently – Present different pages to mobile clients
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 + Advanced Features– For Example:
• Applica@on Health Checks• Session Persistence (S@cky Sessions)• Advanced Monitoring and Sta@s@cs• Cache Purge• HLS & HDS Video
Closing thoughts
• Applica@on Performance is key to Applica@on Success• Four areas you should focus on:– The Applica@on– The Client– The Network– The Applica@on Stack
• NGINX accelerates the Mobile Web and Mobile Apps• NGINX is used by 40% of the top 10,000 sites
Find out more
• hep://nginx.com – Webinars, Documenta@on, Free Trial
• hep://nginx.org – Open Source, Community, Documenta@on
• @nginx, @nginxorg • hep://nginx.com/nginxconf/
The links are clickable!
@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
Have questions?
We are here to help.
Email us at
#BeResponsive
You can click here!
Tweet us out! We'd appreciate it!
