Co-Browsing Optimizations

Introduction

In order to optimize the co-browsing experience for agents, a couple of things should be checked that will considerably improve the co-browsing experience. Implementing proper caching also improves the loading times of your website for your own visitors.

Caching of Static Content

During a co-browsing session, the page is updated constantly to keep up with the changes made by the customer's browser. This causes the agent’s browser to re-render the page continuously. The number of updates depends on how many changing elements are placed on the page. During a re-render, the page checks if the css files and images files are available and still valid in it's local cache. Browsers always do this when loading a page. In order to improve loading times between pages it is common to cache css, font and image files. This is usually standard practice.

There are generally two ways in which you can manage browser side caching.

The browser knows it can use the resource without asking the server.
The browser has to ask the server every time it uses the resource.

The first kind is the fastest as it saves the browser from doing a full roundtrip over the network to the server to get the answer.

Make sure you get your caching strategy right to get the maximum out of your co-browsing setup.

For more information about caching see: https://www.mnot.net/cache_docs/

Optimizing Usage of Webfonts

Webfonts are handled differently than all other content within the browser. They are subject to intellectual property control and for this reason the browsers handles webfont files differently. When fonts are loaded from a different domain than the page webfonts, they are not shown. To solve this, please see the following article.

Blinking Text

This behaviour can lead to blinking texts on the agent side in a co-browse session. The browser downloads the font, and blanks the text in the meanwhile because it has to check if it is allowed to show the font. When it decides it is not allowed to display the font it switches over to the default font. On the agent side this results in blinking text because the page is updated regularly. The customer view is unaffected because it is loaded from the same domain.

Icons

Sometimes icons are implemented via fonts. These kinds of fonts are subject to the same copyright check. In practice this means that icons are sometimes not displayed correctly or are even omitted on the agent's side.

The Solution

This is also a well-known problem for sites which use content delivery networks. For CDN's, fonts are also downloaded from a different domain.

A very simply solution is available in this case. All font files should be served with the following header:

Access-Control-Allow-Origin: *

This ensures that the browser is allowed to display fonts served from a different hostname domain as the page.

Font files have the following extensions.

eot
ttf
otf
woff

It depends on your webserver setup how this should be configured. Below you can find example configurations for apache and nginx.

Apache::


# Apache config
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Nginx::

# nginx config
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$) {
    add_header Access-Control-Allow-Origin *;
}

This will fix this issue, but will give everybody access to your font. This can be limited by specifying channel.me specifically instead of '*'.

For more information on loading webfonts from a different domain see: http://davidwalsh.name/cdn-fonts