web optimization
TRANSCRIPT
1
Web optimizationWeb optimizationWeb optimizationĐoĐoàànn VănVăn TuyTuyểểnn
PentalogPentalog VietnamVietnamhttp://www.facebook.com/doanvantuyenhttp://www.facebook.com/doanvantuyen [email protected]@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 !