Jump to content

How to Use Server-Side Sniffing to Speed Up Web Pages

+ 1
  simonstl's Photo
Posted Oct 29 2009 04:08 PM

Browser sniffing is one area where Javascript is in widespread use. To minimize the Javascript overhead that your users must download, you can substitute server-side or PHP and JSP sniffing instead. BrowserHawk from cyScape uses server-side browser sniffing or hybrid sniffing to detect a wide variety of parameters, including Flash, screen size, connection speed, cookies, and browser and software versions (see the image below, "The BrowserHawk home page, which sniffs your browser environment variables").

Sniffing with BrowserHawk

Here is some sample code that shows how BrowserHawk is enabled in a page and some sniffed parameters:

<%
// First import the com.cyscape.browserhawk namespace
%>

<%@ page import = "com.cyscape.browserhawk.*" %>

<%
// Now we get an immutable (unchangeable) instance of the browser object which
// represents the "basic" properties this browser supports.
%>

<% BrowserInfo browser = BrowserHawk.getBrowserInfo(request); %>

<%
// At this point, our browser object contains all the basic browser capability
// information for the current visitor. Next, display this information to the screen
%>

Your browser is: <%= browser.getBrowser() %> <%= browser.getFullversion() %><P>

Your platform is: <%= browser.getPlatform() %><P>
Browser major version: <%= browser.getMajorver() %><P>
Browser minor version: <%= browser.getMinorver() %><P>
Container* browser: <%= browser.getContainerBrowser() %><P>

Container version: <%= browser.getContainerVersion() %><P>
Container full version: <%= browser.getContainerFullversion() %><P>
Supports AJAX? <%= browser.getXMLHttpRequest() %><P>
Supports ActiveX controls? <%= browser.getActiveXControls() %><P>
Browser data file version: <%= browser.getBDDVersion() %>, dated: <%= browser.
getBDDDate() %><P>

BrowserHawk version in use: <%= BrowserHawk.getVersion() %><P>


The BrowserHawk home page, which sniffs your browser environment variables

Attached Image

For extended properties that can change with each session, you use the following code:

<%
  // First we create the ExtendedOptions object.  This object is used to
  // set various preferences and options, such as selecting which 
  // extended properties we want tested and related testing parameters.
  ExtendedOptions options = new ExtendedOptions();

  // Now we tell BrowserHawk which tests we want it to perform on the
  // browser. If there are other settings you want to check as well, you can
  // just add them to this list.   See the ExtendedOptions class in the
  // BrowserHawk documentation for more information.
 %>
options.addProperties("PersistentCookies, SessionCookies, JavascriptEnabled, Width,
Height, WidthAvail, HeightAvail, Plugin_Flash, Broadband");

Session cookies enabled? <%= extBrowser.getSessionCookies() %><p>
Persistent cookies enabled? <%= extBrowser.getPersistentCookies() %><p>

Javascript enabled? <%= extBrowser.getJavascriptEnabled() %><p>
Screen resolution: <%= extBrowser.getWidth() %> x <%= extBrowser.getHeight() %><p>
Available browser window size: <%= extBrowser.getWidthAvail() %> x <%= extBrowser.
getHeightAvail() %><p>

Flash plug-in version installed: <%= extBrowser.getPluginFlash() %><p>
Broadband connection? <%= extBrowser.getBroadband() %><p>


You can also cache these results and get more granular data on the connection speed of the user, version numbers, and capabilities. Once you have sniffed the user's browser, you can deliver conditional content based on these variables.

XSSI browser sniffing

Using conditional server-side includes (XSSIs), you can create environment variables that closely mimic Javascript-based sniffing. For example, this common Javascript filter:

IS_IE = (document.all) ? true : false;
IS_MAC = (navigator.appVersion.indexOf(" Mac") != -1);
IS_OPERA = (navigator.userAgent.indexOf(" Opera") != -1);
IS_OPERAMAC = IS_OPERA && IS_MAC;


becomes this XSSI equivalent:

<!--#if expr="$(HTTP_USER_AGENT) = /MSIE [4-9]//" --> 
    <!--#set var="isIE" value="true" -->

<!--#endif -->
<!--#if expr="$(HTTP_USER_AGENT) = /Mac/" --> 
    <!--#set var="isMAC " value="true" -->
<!--#endif -->
<!--#if expr="$(HTTP_USER_AGENT) = /Opera/" --> 
    <!--#set var="isOPERA" value="true" -->
<!--#endif -->
<!--#if expr="(${isOPERA} && ${isMAC})/" --> 
    <!--#set var="isOPERAMAC" value="true" -->

<!--#endif -->


Now you can use these XSSI variables to conditionally include code within your XSSI includes without the need for Javascript:

<!--#if expr="${isIE}" -->
    ie.js
<!--#elif expr="${isOPERAMAC}" -->
    operamac.js 
<!--#elif expr="${isOPERA}" -->
    opera.js
...
<!--#endif -->


It is faster to set environment variables at the server by configuring your httpd.conf file using BrowserMatchNoCase. For example:

BrowserMatchNoCase "MSIE [4-9]" isIE
BrowserMatchNoCase Mac isMAC
BrowserMatchNoCase Opera isOPERA


Website Optimization

Learn more about this topic from Website Optimization.

Is your site easy to find, simple to navigate, and enticing enough to convert prospects into buyers? Website Optimization shows you how. It reveals a comprehensive set of techniques to improve your site's performance by boosting search engine visibility for more traffic, increasing conversion rates to maximize leads and profits, revving up site speed to retain users, and measuring your site's effectiveness (before and after these changes) with best-practice metrics and tools.

See what you'll learn


1 Reply

 : Dec 05 2009 11:15 AM
Thankfs for the post. I like this new way to silently detect browser and platform without requiring additional js code.