gone in 4 seconds web performance optimization
DESCRIPTION
How to prevent your web users leave you in 4 seconds because your website is not loaded. This slide is provide overview how to optimize your website from backend to frontend.TRANSCRIPT
Gone In 4 SecondsWeb Performance Optimization
Yohan Totting @tyohan
#TechnicalThursday Bandung Digital Valley
Why?
80-90%10-20%
Response Time
Load HTML Render HTML
Server +
NetworkBrowser
Backend Optimization
Database Tuneup
Choose Right Database and Engine
Data Structure &
Field Index
Query All At Once vs
Split to Multiple Query
Optimize Your Configuration
Application Tune Up
App performance it’s not about the language It’s about your code
Lazy Loading
Cache is your nitro
Be careful with looping
Use Framework
Web Server Tune Up
Use Nginx
Enable Compression
Don’t forget necessary header
ETags
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: "10c24bc-4ab-457e1c1f"
Content-Length: 12195
Expires
Expires: Wed, 17 Jun 2015 20:00:00 GMT
Use Caching Proxy
Front End Tune Up
Minimize Loading Time
Reduce DependenciesFewer files to download means fewer HTTP requests and
faster loading times.
Reduce Dependencies
• Combine & minify CSS & javascript
• Parallelize downloads across hostnames
• Combine images using CSS sprites
• Minimize DNS lookup
• Avoid redirect
Minimize Request Size
• Keeping cookies and request headers as small as possible.
• Serve static content from a cookieless domain
Reduce Image DimensionsOn top of the extra download time, precious processing
power and memory are used to resize high-resolution images.
Reduce Client-Side ProcessingRethinking the use of JavaScript and keeping it to a
minimum are best.
RWD vs RESS
Use Font Awesome Icon
Mobile First
Test It
ThanksYohan
@tyohan