Harder, Better, Faster, Stronger

  • 827 views
Uploaded on

How compression, reduction, and expiration can improve your site

How compression, reduction, and expiration can improve your site

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
827
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 Ruleshttp://stevesouders.com/hpws/rules.php
  • 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. 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. 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• davidengel.dev@gmail.com• http://winnipegphp.com• http://www.meetup.com/Winnipeg-PHP/• http://www.linkedin.com/groups/PHP-Winnipeg-3874131Closing