Vary: User-Agent Video Tutorial Transcript
Vary User-Agent headers are important when you implement a website that offers both desktop and mobile versions for its pages, and you decide which version of those pages to send to a user after detecting their user agent; we call this User-Agent Detection. You need to implement the Vary User-Agent header whenever you use User-Agent Detection. You do not need to implement this header if you have built your site using Responsive Web Design.
How Does User-Agent Detection Work?
Whenever you request a web page, either from your phone, tablet, or desktop site, your browser sends a string along to the web server that is called a user-agent. This string provides the web server some information about what type of device is requesting the web page. For example, if you request a web page from your iPhone, the browser on your iPhone will display a user agent string similar to this one:
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7
Sites that use User-Agent Detection will see that string and send a different version of their web page to the user, one that is optimized for viewing on a smartphone-sized device.
What is ISP Caching and why does that impact my mobile site?
ISPs routinely store copies of frequently requested web pages on their own web servers. If a new user comes along and requests a web page from your site (www.yourdomain.com), instead of passing that request on to your web server, they deliver the web page to you themselves. They do this because it helps speed up Internet access over their service. The problem is, if a smartphone requests a web page, the ISP may deliver the version they have in their cache, which may be the desktop version of the web page. This happens because your web server never sees the request, and your user-agent detection code never runs.
How does the Vary: User-Agent Header fix this problem?
Well, when the ISP sees the Vary: User-Agent Header, they will do one two things.
- Keep multiple copies of your page in its cache, one for each user-agent.
- Not deliver the page from the cache, but pass it on to your web server to service the request.
Either way, you are better off by using this header!
How do you implement the Vary: User-Agent Header?
The basic steps are:
- Determine what platform your site runs on. How you implement the header differs if you run on WordPress, or on an Apache server, or your site is built on PHP, or some other platform.
- Write the appropriate code to set the Vary by User-Agent flag. For example, on an Apache-based web server you would place the code in your .htaccess file, like this:
.htaccess Example Header append Vary User-Agent For a PHP-based site, the code would look like this:
PHP Site Example <?php
header(“Vary: User-Agent, Accept”);
?>And, if you are using WordPress, you should place this code in functions.php, which will be one of the files in the theme you have installed for WordPress on your site.
WordPress Example function add_vary_header ($headers)
{
$headers[‘Vary’] = ‘User-Agent’;
Return $headers;
}
add_filter(‘wp_headers’, ‘add_vary_header’); - Upload this code to the appropriate place on your web server. By the way, credit is due to Patrick Sexton of FeedThebot for code examples used in this video.
Now, lastly, is there a downside to the Vary: User-Agent Header? Well yes. It will likely increase the load on your web servers, and potentially slow down your site performance. This is particularly true if you use a Content Delivery Network like Akamai. The reason is that there are thousands of different possible user agent headers, for example, fastly.com identified more than 8,000 in one test, and this may be seen as way too many different pages for the CDN or ISP to cache. As a result, they may simply turn off caching for your site.
More of Digital Marketing Classroom
For other tutorials in this series see: Digital Marketing Classroom.
