How to Have Visitors Cache Your JavaScript


In order to reduce HTTP requests and have your website load as fast as possible for return visitors it’s often a great idea to set expiration headers for some of your content such as your JavaScript and other content like images which by the way if you haven’t run the images caching test yet then you should be sure to do so it basically works like this when someone visits your website as you already know what they’re really doing is requesting content from your server the text the images the CSS JavaScript and all the goodies that make your website the glorious website that it is now when they visit your website again they’re requesting that content again but in this case you have some control over where that content is coming from it could all come from your server again of course or some of that content can come from the users own cache that’s on their local machine and if that’s the case then your website is going to load much much faster for them they’re going to need less HTTP requests to pull the content and they’re going to need to pull less data through their bandwidth it’s obviously going to be a much faster process to load content straight from their hard drive than it is to pull it over a network this equals better functionality which usually equals lower bounce rates more time spent on the site and all that good stuff that boosts your SEO rankings now you’re back to square one if the user manually clears that cache or if they have their browsers set to automatically clear the cache or if they do a hard refresh of your page in those cases it’ll be like they’re visiting your site for the first time again and they’ll be pulling all of your content over the network with multiple HTTP requests again but for most users most of the time maximizing their cache usage is going to go a long long way and increase in page load times and user experience on return visits to your site one great way to maximize their cache usage is to set expiration headers for some of your content and that’s what we’ll tackle now expiration headers for your JavaScript content this is assuming that your JavaScript content isn’t changing all the time which should be the case by setting expiration headers were telling the user’s browser to go ahead and store our JavaScript files in their cache for a certain amount of time since it’s not going to be changing in that time so let’s go ahead and do that it’s super easy all I need to do is head into the root directory of my site and find my htaccess file this is a hidden file so make sure that your settings allow you to see hidden files and add this mod one month is pretty standard but we can also go up to one year in our case we’ll have our users cache our JavaScript for one month after they first visit our site then all those subsequent visits during that month won’t require downloading that javascript again and save now visitors to my site will automatically store my javascript in their browsers cash and only request it again after one month until then any time they visit my site again it will look faster since they already have it so as you can see this is very quick and painless to enable and it does a solid job of reducing page load times for repeat visitors to your site you have a lot of control over how things are cached here but just be sure to be mindful of not setting your expert headers too long for content that is going to change fairly regularly for example let’s say that you set a year long expiration header on all of your images but you’re constantly updating the images on your site then you’ll be shooting yourself in the foot since repeat visitors to your site are just going to get the old images and never see that new content so be sure to keep that in mind and lastly well what if you do update some of your content that has long expiration headers for example let’s say that you set your JavaScript expiration headers to one year awesome and you’re getting a lot of repeat visitors that are caching those files but you hire a new designer in June and revamp your site a little bit and end up actually modifying some of that JavaScript how do you tell those repeat visitors to download the fresh copy well don’t sweat that in those cases it’s actually easiest to employ the simple little workaround of giving your new JavaScript file a new name like version 2 and making sure that your HTML references that new version then all good same thing the user will download that content on their first visit and assuming that you set expiration headers on JavaScript then they’ll cache that new version and everything should run like clockwork feel free to check out our other videos so you can keep fine-tuning and getting the most out of your SEO and click subscribe to stay updated with new tips and tricks to get you to the top of the search engine results pages

Tags:, ,

Add a Comment

Your email address will not be published. Required fields are marked *