heavy web optimization: frontend

Heavy Web Optimization

FRONT-END

Vo Duy Tuan – CEO/Founder

$who_am_I?

My Name is Võ Duy Tuấn PHP 5 Zend Certified Engineer Interests: PHP, Social Network, Optimize Web Works:

Harvey Nash Technical Lead Reader.vn CEO/Founder Trainer Freelancer

$table_of_content

Front-end Optimization Minification CSS Sprite Domain sharding Image Optimizing HTTP Caching

Front-end Optimization1

1.1. Where is Front-end?

“80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.”

1.2. Front-end Optimize Theory

Reduce request Reduce size Reduce duplicated

1.2. Performance testing tools

Firefox with extension: Web developer YSlow

Google Chrome Inspector Google chrome with pagespeed extension Charles: Web Debugging Proxy Application Online Testing:

http://webpagetest.org/

Minification2

2.1. What is Minification?

Remove unnecessary characters. Do not change functionality. Good for Javascript, CSS. Merge multiple scripts. The superstar: Minify library Advice:

Put CSS at the beginning of web page Put Javascript at the bottom of web page

2.2. Minification example: JS

2.2. Minification example: CSS

2.3. Minify library

PHP 5 library Support Javascript, CSS Combine multiple files into a single file Caching Gzipping Download: http://code.google.com/p/minify/

2.3. Minify in APC

2.3. Minify library

CSS Sprite3

3.1. CSS Sprite: Case study

Menu with 3 icons & Hover change icon effect. Total 6 images.

3.1. CSS Sprite: Case study

Merge 6 icons & using CSS magical background-position property to use CSS Sprite

3.1. CSS Sprite: Case Study

After:

3.2. CSS Sprite Showcase

3.3. CSS Sprite Best Practice:

SPAN tag Horizontal & Vertical balance. Horizontal better than vertical sprite. Make room for future Make sprite image small size.

3.4. CSS Sprite

Domain Sharding4

4.1. Domain Sharding

4.1. Domain Sharding

4.2. Best practice

More Domain/Sub-domain, more parallel download.

2-4 domains/sub-domain is good. (DNS Lookup problem)

Consistent resource domain Cookieless domain/subdomain for static

resource requests.

4.3. Domain sharding

Image Optimizing5

5.1. Image Optimizing

5

5.1. Image Optimizing

5

5.2. Photoshop Output

5

5.3. Best practice

5 Do not use big image for thumbnail Multiple sizes of an image Using “Save for web” in Photoshop Re-use background pattern for button, menu

HTTP Caching6

Way #1: Automatic

6

Way #2: ETag - Automatic

6

Way #3: Manual with Apache Mods

6

6.2. Completed headers for cache

6Last-modified: Thu, 18 Aug 2011 02:23:30 GMT

ETag: “5b8946-190ef-4aabe4c73ac80”

Expires: Sat, 26 Nov 2011 05:42:46 GMT

Cache-control: max-age=604800, public

6.3. Sample .htaccess caching with mod_headers & mod_expires

6<IfModule mod_expires.c> ExpiresActive On ExpiresDefault A0

<FilesMatch "\.(jpg|jpeg|png|gif)$"> Header set Cache-Control "max-age=604800, public"

</FilesMatch>

<FilesMatch "\.(jpg|jpeg|png|gif)$"> ExpiresDefault A604800 Header append Cache-Control "public"

</FilesMatch>

<FilesMatch "\.(jpg|jpeg|png|gif)$"> ExpiresDefault A604800

</FilesMatch></IfModule>

6.4. Example: Before

6

6.4. Example: After

6

6.5. Caching Note

6 Time of cache Way of clearing cache Other caching techniques: html cache, server

cache…

It’s time to query …

Contact:

Fullname: Vo Duy Tuan

Email: webmaster@vinabranding.com

Phone: 0938 916 902

Thank you!