Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

expires meta tag and GZIP

Discussion in 'Website Design Forum:' started by Levi, Sep 20, 2009.

  1. Levi

    Levi Moderator Staff Member

    According to both yslow (recommendation on firefox plugins :)) and googles firebug plugin I need to add an 'expires header'. They are also recommending using gzip on my code to reduce the overheads.

    Now I understand the reasoning for the expires header (its to help with caching and for searching via the bots etc but can't quite figure how the dates work.

    Is it a system where you need to stick a date in and then update manually so say, if you wanted it to 'expire' in 2 weeks you would stick in a date 2 weeks from current date or is there a way of saying expire in 2 weeks without using set dates?

    And as my pages are unlikely to change anyway is the correct meta needed the below?
    <meta http-equiv="expires" content="never">
    As to gzip, is it really worth it and is there any recommended best practices etc

    TA very :)
  2. Jazajay

    Jazajay Active Member

    Aww good to pay you back Levi.
    Expires meta.
    TBH go the .htaccess route.
    Right create a .htaccess file, place this code in and upload it to your root directory, this is a plain file and just save it as .htaccess.

    In that file place this ~
    ExpiresActive On
    ExpiresDefault "access plus 10 years"
    ExpiresByType image/gif "access plus 2 weeks"
    ExpiresByType image/png "access plus 2 weeks"
    ExpiresByType image/jpeg "access plus 2 weeks"
    ExpiresByType application/x-javascript "access plus 2 weeks"
    ExpiresByType text/css "access plus 2 weeks"

    Bots no, but browsers yes.

    GZIP ~
    Change all pages to .php file extentions and then add this to the top of every page ~
    <?php ob_start("ob_gzhandler")?>

    and that will then compress all CSS, JavaScript files and the html document.

    This can cut their sizes down by as much as 66% meaning they take less time to download, less strain on the server and faster page loads.

    Red ~ PHP
    Blue ~ .htaccess
  3. Levi

    Levi Moderator Staff Member


    iirc I need to play with the htaccess (301 redirects) file anyways so I'll just sling this in while I'm at it cheers

    will this have any effect on a form using an external php?
  4. Jazajay

    Jazajay Active Member

    You just need to place it at the top of the page, it can be in a php include, and it will effect the whole page.
  5. Levi

    Levi Moderator Staff Member

    I assume you mean where it says the below (after this bit or before it)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    do you mean like I can pull it in in the same way I would the php on a form or something different, I'm no web designer (I dabble with my own site) and php is still very new to me (learning slowly:))?
    EDIT: is this what you mean
    Do I need to do anything with the css/js files or are they just left as is?
  6. Levi

    Levi Moderator Staff Member

    Expire headers are now working a treat ta very much.

    The Gzip has worked (I added AddHandler server-parsed .html to .htaccess too after some googling), moved from an F to a C rating on Yslow, but its still saying that 2 files need to be compressed.
    There are 2 plain text components that should be sent compressed[LIST][*]Image Resolutions - Design and Visualisation Service[*][/LIST]
    I've got the include at the very top of the page before the doctype bit.
    Any idea why the above is not compressing?

    My intended .htaccess non www to www redirect just messes up access to my site so clearly this is sorted at the name server end of things as they both work properly anyways :)

    And I've just noticed an entry called entity tags (etags) is this server side and out of my control?
  7. Jazajay

    Jazajay Active Member

    Place this in your .htaccess file, as the .htaccess file is a file that overrides some of the servers default settings.

    FileETag none

    That will remove your Etags.

    Your CSS, and JavaScript files have to be done differently, they need to be compressed within the actual file.

    To do that save both your JavaScript file and your CSS files with the .php extension.
    So yourjs.js.php and yourcss.css.php, and then remember to reference it in differently in the HTML document as well as you have basically created a new file.

    Then in your CSS files place this at the very top of the page ~
    <?php ob_start('ob_gzhandler');header("Content-type: text/css")?>
    //Your css rules go here

    then at the bottom add this ~
    <?php ob_end_flush();?>

    What that does is use PHP's compression function to compress the CSS file before it's sent to the browser, it then sets a header to let user agents know that it's not actually a PHP document but instead should be parsed as a CSS file instead, you with me?

    Now JavaScript files are slightly different place this at the top ~
    <?php ob_start('ob_gzhandler');header("Content-type: application/x-javascript")?>
    //Your JavaScript rules go in here

    Then at the very bottom of the document we add the flush function to finish it off so ~
    <?php ob_end_flush();?>

    Again we compress it using PHP and then PHP sets a header to let the browser know it's actually a JavaScript file and to parse it as such.

    Blue ~ .htaccess
    Red ~ PHP
    Orange ~ Comments
  8. Levi

    Levi Moderator Staff Member

    I know I'm a pain and I appreciate the help :)

    I've been googling a lot too since last night which usually raises more questions than answers :(

    Can I not just use 7 zip (or similar) to compress the files to a js.gz/css.gz file and link to that file instead?
  9. Jazajay

    Jazajay Active Member

    I don't know I don't know what 7 zip is TBH as I use GZIP, I imagine so but that's how I compress mine and that works for me so.....up to you really fella, there are many ways to compress a file TBH. :)
  10. Levi

    Levi Moderator Staff Member

    7 zip is a program that supports GZIP compression which I'm familiar with :)

    Having said that I'm only gaining something like 5Kb (10Kb on revised site), most of it coming from the html code itself, even if I do compress it all so for the css and js files it might not even be worth the hassle :)

    I've knocked out all the white space which has saved a few bytes etc without affecting the file.

Share This Page