Do You Want to Learn Marketing or Coding? Do You Want to Learn Marketing or Coding?

Browser Cache and your Dynamic WordPress\Magneto Web Site

Share on facebook
Share on twitter
Share on linkedin

Have a magento web site or wordpress blog? Well you should really think about using browser-caching to speed up the site of your site. What is so great about browser-caching? Well first off it will provide your users better load speeds and access to your web site. Why does it do that? Well simply put the user’s browser will cache, or store, information you tell it to on the user’s computer. Meaning, that when the user revisits the page they will load downloaded content rather than from your web server. Reading local content is a lot faster than connecting to an outside server. How does it work? basically the server will tell your browser which items to store, which it does. Depending on the set-up is done, depends on how your computer knows if the content has expired. If the content has expired, then the next time you load your browser connects to the web site it will regather and redownloaded the needed items from the web site.

Using browser cache on your wordpress blog, magento store, or whatever other web site, not only decreases your web site load speed but it also makes google and yahoo happy. Search engines like it when you cache content on on your web site. Why? because it tells them you care about your user, your server, and are dedicated to providing a better experience to the end user. In Google’s crazy search engine algorithm they factor in your web site loading speed. Not only does this increase your search engine ranking and decrease load time but browser caching also helps out your web server. How so? Whenever someone makes a connection to your web site\web server they must take up a connection spot on your server. Think of this action like waiting for a bathroom at a crowded sporting event. The more bathroom stalls the more people can go about their business at once without having to wait. The less stalls the longer the line, which is ba. The longer the line, the more people get ancy or angry.

Issues with Browser Caching

So what is the downfall? Well usually nothing unless you configure your set-up wrong. If you have a dynamic web site, like Magento or WordPress, that gets updated constantly you can easily run into some issues. When looking around online I noticed that most web sites suggest static browser caching. Static caching means that a downloaded cache item will not expire until the expiration date, like expiring milk. That is great for static, non-dynamic, sites but not for your super awesome WordPress or Magento shopping cart. How come? Well, if you implement caching on these web sites incorrectly the user will not see your images, content, and prices until the milk expires! Meaning they might have to wait a while to see your beautiful content changes! But don’t worry there is a very very very simple work around, you only need to include one more few more lines of code in your .htaccess. This will take your content and change it from the expiring milk to more like a software update. This is done through “must-revalidate”.

When adding the line “must-revalidate” to your .htaccess, your server tells the user’s browser to check to see if their is a newer version of the file… everytime! If there is a newer version, it updates, if not it uses the saved content. This does add trace amounts of overhead to your site loading speed and so whenever possible use static caching. But, if it isn’t possible on a dynamic WordPress or Magento, don’t worry and use it!

So now that you know what “must-revalidate” is you are probably asking how do I set it up!! Well if you really want to use browser caching on your wordpress blog and are not 100% sure how to set it up in your .htaccess just follow my lead. Copy and paste the below code into your .htaccess file! This code will allow you to update images, css files, images, etc while caching at the same time. Whenever you edit the content, the browser will re-cache the information!

ExpiresActive On
ExpiresDefault A0

ExpiresDefault A5184000
Header append Cache-Control "public, must-revalidate"

ExpiresDefault A5184000
Header append Cache-Control "public, must-revalidate"

ExpiresDefault A5184000
Header append Cache-Control "must-revalidate"

ExpiresDefault A5184000
Header append Cache-Control "must-revalidate"

ExpiresActive Off
Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
Header set Pragma "no-cache"

You will notice the A5184000. This controls the time of the cache, in seconds. Right now it is set to about 10 days on everything. You can play with these settings and make them higher or lower. Why did I set them to 10 days? I wanted to keep them relatively. Also, google’s speed test for firebug was complaining that the cache was not longer than a week, so I changed that. In theory you can set this number much higher, perhaps 6-months to a year, why? Well since you have “must-revalidate” it doesn’t really matter. The items get checked for newer versions.

If you like this work check out my portfolio for Visalia web site design.
Find out about Visalia web site design services and rates.

I Really Need

Reviewing nerdy stuff is expensive.

Consider clicking on this ad & buying that item you REALLY wanted from Amazon.

It helps a ton!

Leave Your Thoughts