web optimization

1

Web optimizationWeb optimizationWeb optimizationĐoĐoàànn VănVăn TuyTuyểểnn

PentalogPentalog VietnamVietnamhttp://www.facebook.com/doanvantuyenhttp://www.facebook.com/doanvantuyen doanvantuyen@gmail.comdoanvantuyen@gmail.com

PHP DAY 18/12/2010 2

Giới thiệu chung• Mục đích: “Chia sẻ một số kinh nghiệm giúp tăng tốcđộ truy cập vào website”

• Áp dụng: “Dành cho những website có lượng truycập ít và trung bình với tài nguyên hạnchế”

PHP DAY 18/12/2010 3

Content1. HTTP request flow diagram2. Optimizing Page generate3. Minimizing round-trip times4. Minimizing request / response size5. Optimizing brower rendering6. Tools for Optimizing

PHP DAY 18/12/2010 4

1. HTTP request flow diagram

ClientWeb server

DNS server

DNS response

PHP compile & parser

Page HTTP request

Page HTTP response

Render page

Image, JS, CSS request

Image, JS, CSS

DNS Request

DB

PHP DAY 18/12/2010 5

2. Optimizing Page generate

• Cache• Opcode cache• Server Configuration• Optimize code & log analysis => Xdebug

PHP DAY 18/12/2010 6

2.1 Cache• What:

– Page cache– Block cache– Data cache

• How: – Write on file– Memory– Database – Static/Global variable

PHP DAY 18/12/2010 7

2.2 Opcode cache•APC

•PHP accelerator

•eAccelerator

•Alternative PHP

Cache

•ionCube PHP

Accelerator

•XCache

•Zend Accelerator

PHP DAY 18/12/2010 8

2.3 Server Configuration• Apache– MPM, remove .htaccess, GZip, ETag, Cache control

• PHP– Maximum memory, maximum execution time…

• MySQL– Slow SQL log

PHP DAY 18/12/2010 9

2.4 Optimize code & log analysis• Demo XDebug• Other debug statement – pint_r($x) , print_r($x, true)– var_dump()– thow new Exception()– debug_print_backtrace()– microtime(true)– …

PHP DAY 18/12/2010 10

3. Minimizing round-trip times• Use brower’s cache• User external CSS & javascript• Avoid 404 error• Combine CSS & JS file• Use CDN (Content delivery network)• Parallel download

PHP DAY 18/12/2010 11

3.1 Use brower’s cache

PHP DAY 18/12/2010 12

3.2 User external CSS & javascript

PHP DAY 18/12/2010 13

3.3 Avoid 404 error

PHP DAY 18/12/2010 14

4.4 Combine CSS & JS file

GOOD

BAD

PHP DAY 18/12/2010 15

4.5 Use CDN

PHP DAY 18/12/2010 16

3.6 Parallel download

PHP DAY 18/12/2010 17

4. Minimizing request / response size • Use a cookieless domain for static content

• Use GZip• Minify HTML, CSS, Javascript• Optimize Image (and favicon.ico)

PHP DAY 18/12/2010 18

4.1 Use a cookieless domain for static content

PHP DAY 18/12/2010 19

4.2 Use GZip

PHP DAY 18/12/2010 20

4.3 Minify HTML, CSS, JS

PHP DAY 18/12/2010 21

4.4 Optimize images• Do not use BMPs or TIFFs• Use PNG, GIF for small image or simple graphics

• Use JPG for photo• Reduce the size of image to fit with display area

• Use small & cacheable favicon.ico

PHP DAY 18/12/2010 22

5. Optimizing browerrendering

• Put CSS on top, javascript on bottom

• Specify image size• Post load & Pre load• Use smart event handle

– Use $(“a”).click(function(){}); thay cho <a href= “javascript: …”

PHP DAY 18/12/2010 23

6. Tools for Optimizing

XDebug & WinCacheGrind

PHP DAY 18/12/2010 24

6. Tools for Optimizing (Cont)

https://addons.mozilla.org/en-US/firefox/addon/1843/

https://addons.mozilla.org/en-US/firefox/addon/5369/http://code.google.com/speed/page-speed/download.html

PHP DAY 18/12/2010 25

Reference• http://code.google.com/speed/page-speed/docs/rules_intro.html• http://developer.yahoo.com/performance/rules.html• http://www.xdebug.org/• https://addons.mozilla.org/en-US/firefox/addon/1843/• http://developer.yahoo.com/yslow/• http://code.google.com/speed/page-speed/• http://sourceforge.net/projects/wincachegrind

26

Thanks !Thanks !Thanks !