Harder, Better, Faster, Stronger


Published on

How compression, reduction, and expiration can improve your site

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Harder, Better, Faster, Stronger

  1. 1. Harder, Better, Faster, StrongerHow compression, reduction, andexpiration can improve your site.
  2. 2. Harder, Better, Faster, Stronger• Intro: Steven Souder’s 14 Rules (circa 2007)• Tools• Reducing HTTP requests• Caching• Minifying• GZIP-ing• Expires HeadersAgenda
  3. 3. Harder, Better, Faster, Stronger• Make Fewer HTTP Requests• Use a Content DeliveryNetwork• Add an Expires Header• Gzip Components• Put Stylesheets at the Top• Put Scripts at the Bottom• Avoid CSS Expressions• Make JavaScript and CSSExternal• Reduce DNS Lookups• Minify JavaScript• Avoid Redirects• Remove Duplicate Scripts• Configure ETags• Make AJAX CacheableSteven Souder’s 14 Ruleshttp://stevesouders.com/hpws/rules.php
  4. 4. Harder, Better, Faster, Stronger• YSLOW: Browser Add-in (Chrome, Firefox)• Note: autorun affects your PHP Sessions• http://tools.pingdom.com• https://developers.google.com/speed/pagespeed/Tools
  5. 5. Harder, Better, Faster, Stronger• CSS Sprites• http://csssprites.com/• http://css-sprit.es/• Mind size limits for mobile browser caching• Combine scripts and stylesheets• If not using Etags turn ‘em off in httpd.conf:Header unset EtagFileETag NoneReducing HTTP Requests
  6. 6. Harder, Better, Faster, StrongerServer side•Distributed: Memcached•Opcode caching: Xcache, APCClient side•Cache headersCaching
  7. 7. Harder, Better, Faster, StrongerJavascript & CSS:• remove extra chars, comments & whitespace• reduce size for first page loadThere are many online compressors:• www.cssdrive.comThere are also local compressors:• YUI compressor• LESS/SASS tools (SimpLESS, WinLESS, etc.) will minifyresultant CSS.Minification
  8. 8. Harder, Better, Faster, Stronger1) Install if not installed2) Enable in apache if not enabled already3) Configure mod_deflate in apache:AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascriptapplication/x-javascriptBrowserMatch ^Mozilla/4 gzip-only-text/htmlBrowserMatch ^Mozilla/4.[0678] no-gzipBrowserMatch bMSIEs7 !no-gzip !gzip-only-text/htmlBrowserMatch bOpera !no-gzipHeader append Vary User-AgentAddType text/html .shtmlAddOutputFilter INCLUDES .shtml• Or configure mod_gzip in the mod_gzip.confGZIP
  9. 9. Harder, Better, Faster, Stronger# phase 1: (reqheader, uri, file, handler)# ========================================# NO: special broken browsers which request for gzipped content# but then arent able to handle it correctlymod_gzip_item_exclude reqheader "User-agent: Mozilla/4.0[678]“#YES: HTML & PHPmod_gzip_item_include file .html$mod_gzip_item_include file .php$# NO: include files / JavaScript & CSS (due to Netscape4 bugs)#mod_gzip_item_exclude file .js$#mod_gzip_item_exclude file .css$# YES: CGI scriptsmod_gzip_item_include file .pl$mod_gzip_item_include handler ^cgi-script$# phase 2: (mime, rspheader)# YES: normal HTML files, normal text files, Apache directory listings#mod_gzip_item_include mime ^text/html$#mod_gzip_item_include mime ^text/plain$mod_gzip_item_include mime ^httpd/unix-directory$# YES: include files / JavaScript & MIME textmod_gzip_item_include mime ^application/x-javascriptmod_gzip_item_include mime ^text/# NO: images (GIF etc., will rarely ever save anything)mod_gzip_item_exclude mime ^image/
  10. 10. Harder, Better, Faster, StrongerControl what you cache and for how long.1) Enable in apache:LoadModule expires_module /path_to/modules/mod_expires.so2) Figure out how long different content types can last until stale3) Configure in .htaccess:(next page)4) Add parameters to some of your images and other static content to allow you to expire themby image name.i.e.Change your reference to heroshot.jpg to heroshot.jpg?123Now when you update that image you can change it to heroshot.jpg?124A Browser will recognize this as a new image.Expires Headers
  11. 11. Harder, Better, Faster, StrongerEXAMPLE:# Expires HeadersExpiresActive onExpiresDefault "access plus 5 minutes"ExpiresByType text/html "now"ExpiresByType image/jpg "access plus 3 days"ExpiresByType image/gif "access plus 30 days"ExpiresByType image/png "access plus 30 days"ExpiresByType image/x-icon "access plus 30 days"ExpiresByType image/jpeg "access plus 30 days"ExpiresByType text/css "access plus 30 days"ExpiresByType text/javascript "access plus 30 days"ExpiresByType text/js "access plus 30 days"ExpiresByType application/x-javascript "access plus 30 days"ExpiresByType application/javascript "access plus 30 days"Expires Headers
  12. 12. Harder, Better, Faster, Stronger• Using a CDN vs. Reduce DNS lookups– DNS lookups are cached at the client (or their ISP) but first load timecan take time– Parallel loading of content can occur, however, if you use a CDN– Therefore balance is key: parallel loading of a very large javascript fileon a first time visit can be worth the extra 30+ ms for the DNS lookup• CSS at top – allows for progressive rendering (i.e. not havingto load and THEN redraw page elements)• JS at bottom – allows for rendering to continue before JSblocks it, also JS will block any parallel image downloadingMisc
  13. 13. Harder, Better, Faster, Stronger• David Engel• davidengel.dev@gmail.com• http://winnipegphp.com• http://www.meetup.com/Winnipeg-PHP/• http://www.linkedin.com/groups/PHP-Winnipeg-3874131Closing