Your SlideShare is downloading. ×
Harder, Better, Faster, Stronger
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Harder, Better, Faster, Stronger


Published on

How compression, reduction, and expiration can improve your site

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Harder, Better, Faster, StrongerHow compression, reduction, andexpiration can improve your site.
  • 2. Harder, Better, Faster, Stronger• Intro: Steven Souder’s 14 Rules (circa 2007)• Tools• Reducing HTTP requests• Caching• Minifying• GZIP-ing• Expires HeadersAgenda
  • 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 Rules
  • 4. Harder, Better, Faster, Stronger• YSLOW: Browser Add-in (Chrome, Firefox)• Note: autorun affects your PHP Sessions••
  • 5. Harder, Better, Faster, Stronger• CSS Sprites••• 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. Harder, Better, Faster, StrongerServer side•Distributed: Memcached•Opcode caching: Xcache, APCClient side•Cache headersCaching
  • 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. 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. 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. 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. 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. 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. Harder, Better, Faster, Stronger• David Engel••••