Gone in 4 seconds web performance optimization

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