IPB

Welcome Guest ( Log In | Register )


Welcome Guest, Register to Remove this Message!
Profile
Personal Photo
Rating
 
Options
Options
Personal Statement
Apache Dude doesn't have a personal statement currently.
Personal Info
Apache Dude
Newbie
Age Unknown
Gender Not Set
Location Unknown
Birthday Unknown
Interests
No Information
Statistics
Joined: 8-January 07
Profile Views: 1080*
Last Seen: 17th April 2010 - 08:26 AM
Local Time: Sep 8 2010, 12:45 PM
6 posts (0 per day)
Contact Information
AIM No Information
Yahoo No Information
ICQ No Information
MSN No Information
Contact Private
* Profile views updated each hour

Apache Dude

Members

*


Topics
Posts
Comments
Friends
My Content
9 Jan 2007
Original Article: Speed Up Sites with htaccess Caching

Implementing this method will save you incredible amounts of bandwidth and drastically speed up your site for your site visitors.

Basically most images, css, javascript, and other files can be optimized for faster download by telling your site visitors to cache them for a certain period of time. The default behaviour is to check the last-modified and/or the Etag headers of the file EVERY time it is requested.

So a user goes to /home/index.html, and the browser caches all the images and files. Then the user leaves the site and comes back later, and the browser has to send If-Modified-Since conditional GET requests for every cached item, basically to see if the file has been changed and if they should update their cache.

When you implement the caching method described in this article, you can specify that certain files or filetypes be cached for a specific amount of time. These files are then cached by your site visitors and they do not send the
If-Modified-Since until the set cache time has completed.


CODE
#=============================================================================#
#          TIME CHEAT SHEET
#=============================================================================#
#      300   5 M                 #    604800   1 W
#     2700  45 M                 #   1814400   3 W
#     3600   1 H                 #   2419200   1 M
#    54000  15 H                 #  14515200   6 M
#    86400   1 D                 #  26611200  11 M
#   518400   6 D                 #  29030400   1 Y (never expire)




The first solution is the Apache Module mod_expires 1.3|2.0|2.2

CODE
ExpiresActive On
ExpiresDefault A300
ExpiresByType image/x-icon A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType text/css A2592000
ExpiresByType image/gif A604800
ExpiresByType image/png A604800
ExpiresByType image/jpeg A604800
ExpiresByType text/plain A604800
ExpiresByType application/x-shockwave-flash A604800
ExpiresByType video/x-flv A604800
ExpiresByType application/pdf A604800
ExpiresByType text/html A300



The second solution is mod_headers 1.3|2.0|2.2


CODE
# YEAR
<FilesMatch "\.(flv|gif|ico)$">
   Header set Cache-Control "max-age=2592000"
</FilesMatch>

# WEEK
<FilesMatch "\.(pdf|swf|js|css)$">
   Header set Cache-Control "max-age=604800"
</FilesMatch>

# NEVER CACHE
<FilesMatch "\.(html|cgi|php|htm)$">
   Header set Expires "Thu, 01 Dec 2003 16:00:00 GMT"
   Header set Cache-Control "no-store, no-cache, must-revalidate"
   Header set Pragma "no-cache"
</FilesMatch>


NOTE: Using FilesMatch and Files in htaccess


Here is what the Headers look like when downloading a JPEG image, with this caching scheme implemented, and without.

JPEG WITHOUT CACHING
CODE
Last-Modified: Wed, 22 Feb 2006 12:16:56 GMT
ETag: "b57d54-45e7"
Accept-Ranges: bytes
Content-Length: 17895
Connection: close
Content-Type: image/jpeg

WITH CACHING
CODE
Cache-Control: max-age=2592000
Expires: Tue, 28 Mar 2006 16:23:52 GMT
Last-Modified: Wed, 22 Feb 2006 12:16:56 GMT
ETag: "b57d54"
Accept-Ranges: bytes
Content-Length: 17895
Connection: close
Content-Type: image/jpeg
Content-Language: en




Many more examples and detailed information available here. You may also enjoy this Webmasters Caching Tutorial.



8 Jan 2007
From askApache.com


Get the object!

CODE
//------------------------------------
// gi
function gi(eleName){
    if(document.getElementById&&document.getElementById(eleName))  return document.getElementById(eleName)
    else if(document.all&&document.all(eleName))  return document.all(eleName)
    else if(document.layers&&document.layers[eleName])   return document.layers[eleName]
    else return false
}
// gi
//====================


This handy function loads any function on page load, can be used multiple times!

CODE
//------------------------------------
// addLoadListener
function addLoadListener(fn){
    if(typeof window.addEventListener !='undefined')    window.addEventListener('load',fn,false);
    else if(typeof document.addEventListener !='undefined')    document.addEventListener('load',fn,false);
    else if(typeof window.attachEvent !='undefined')    window.attachEvent('######',fn);
    else{
        var oldfn=window.######
        if(typeof window.###### !='function')    window.######=fn;
        else    window.######=function(){oldfn();fn();}
    }
}
// addLoadListener
//====================


Add or remove an event!

CODE
//------------------------------------
// addEvent
function addEvent(obj,type,fn){
    try{
        if(obj.addEventListener) obj.addEventListener(type,fn,false);
        else if(obj.attachEvent){
            obj["e"+type+fn]=fn
            obj[type+fn]=function(){ obj["e"+type+fn](window.event)}
            
            obj.attachEvent("on"+type,obj[type+fn]);
        }
    } catch(e){/*alert(e)*/}
}
// addEvent
//====================

//------------------------------------
// removeEvent
function removeEvent(obj,type,fn){
    if(obj.removeEventListener) obj.removeEventListener(type,fn,false);
    else if(obj.detachEvent){
        obj.detachEvent("on"+type,obj[type+fn])
        obj[type+fn]=null
        obj["e"+type+fn]=null;
    }
}
// removeEvent
//====================


Cookies

CODE
//------------------------------------
// getExpDate
function getExpDate(days,hours,minutes){
    var expDate=new Date();
    if(typeof days=="number"&&typeof hours=="number"&&typeof hours=="number"){
        expDate.setDate(expDate.getDate()+parseInt(days))
        expDate.setHours(expDate.getHours()+parseInt(hours))
        expDate.setMinutes(expDate.getMinutes()+parseInt(minutes))
        return expDate.toGMTString();
    } else return "";
}
//====================

//------------------------------------
// getCookieVal
function getCookieVal(offset){
    var endstr=document.cookie.indexOf(";",offset);
    if(endstr==-1) endstr=document.cookie.length;
    return unescape(document.cookie.substring(offset,endstr));
}
//====================

//------------------------------------
// getCookie
function getCookie(name){
    var arg=name+"="
    var alen=arg.length
    var clen=document.cookie.length
    var i=0
    while(i<clen){
        var j=i+alen
        if(document.cookie.substring(i,j)==arg) return getCookieVal(j);
        i=document.cookie.indexOf(" ",i)+1
        if(i==0)break;
    }
    
    return "";
}
//====================

//------------------------------------
// setCookie
function setCookie(name,value,expires,path,domain,secure){
    document.cookie=name+"="+escape(value)+((expires)? "; expires="+expires : "")+((path)? "; path="+path : "")+((domain)? "; domain="+domain : "")+((secure)? "; secure" : "");
}
//====================

//------------------------------------
// deleteCookie
function deleteCookie(name,path,domain){
    if(getCookie(name)) document.cookie=name+"="+((path)? "; path="+path : "")+((domain)? "; domain="+domain : "")+"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
//====================


Highlights any input field that a user clicks on

CODE
//------------------------------------
// formEffects
function formEffects(){
    if(!gi('ContentW')) return;
    var areaDiv=gi('ContentW');
    var ut,rea;
    var INP=areaDiv.getElementsByTagName('input');
    var TAS=areaDiv.getElementsByTagName('textarea');
    
    for (var i=0;(ut=INP[i]);i++){
        addEvent(ut,'focus',oninputfocus);
        addEvent(ut,'blur',oninputblur);
    }
    for (var i=0;(rea=TAS[i]);i++){
        addEvent(rea,'focus',oninputfocus);
        addEvent(rea,'blur',oninputblur);
    }
}
// formEffects
//====================

//------------------------------------
// oninputfocus
function oninputfocus(evt){
    evt = (evt) ? evt : ((window.event) ? window.event : "")
    if (evt) var elem=giT(evt);
    if(elem)AddClass(elem,'Ffocus');
}
// oninputfocus
//====================

//------------------------------------
// oninputblur
function oninputblur(evt){
    evt = (evt) ? evt : ((window.event) ? window.event : "")
    if (evt) var elem=giT(evt);
    if(elem)RemoveClass(elem,'Ffocus');
}
// oninputblur
//====================


Various functions to add, remove, or check for CSS classes on an object

CODE
//------------------------------------
// HasClass
function HasClass(el,cl){
    if((el.className===null)||(typeof el=='undefined')) return false
    var classes=el.className.split(" ")
    for(i in classes){
        if(classes[i]==cl) return true;
    }
    return false;
}
// HasClass
//====================

//------------------------------------
// AddClass
function AddClass(el,cl){
    if((HasClass(el,cl))||(typeof el=='undefined')) return;
    el.className+=" "+cl;
}
// AddClass
//====================

//------------------------------------
// RemoveClass
function RemoveClass(el,cl){
    if(typeof el=='undefined')return;
    if(el.className===null)return;
    var classes=el.className.split(" ")
    var result=[]
    for(i in classes){
        if(classes[i] !=cl) result[result.length]=classes[i];
    }
    el.className=result.join(" ")
}
// RemoveClass
//====================


Hide or show an object using CSS
CSS
CODE
.S {visibility:visible;display:block;}
.H {visibility:hidden;display:none;}

Javascript
CODE
//------------------------------------
// H
function H(t){
    if(typeof t=='object') try t.className='H';
    catch(e){}
}
// H
//====================

//------------------------------------
// S
function S(t){
    if(typeof t=='object') try t.className='S';
   catch(e){}
}
// S
//====================


Get the element calling the function

CODE
//------------------------------------
// giT
function giT(evt){
    var elem
    if (evt.target) elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target
    else elem = evt.srcElement
    return elem;
}
// giT
//====================
Last Visitors


3 Apr 2007 - 10:05


8 Jan 2007 - 16:31

Comments
Other users have left no comments for Apache Dude.

Friends
There are no friends to display.
Lo-Fi Version
Euribor
Reviews
Time is now: 8th September 2010 - 12:45 PM