GENERAL

Website Optimisation: The Little Bits


In website development, we come across the phrase optimisation on a daily basis. Optimisation usually refers to techniques or technology used to make your website run faster, respond faster, adapt to different screen sizes and be search engine friendly.

Some popular techniques for optimising your website include:

  • Minification of web resources like Javascript, CSS and others
  • Using CDN servers to distribute web resources like JavaScript files, images, CSS and other media.
  • Browser caching of frequently used web resources – JavaScript files, CSS etc.
  • Server site compression of responses – gzips etc.
  • Caching frequently requested data.

Even though the techniques above provide some improvement, sometimes we get hung on the big issues forgetting the simple ones. There are a million textbooks detailing the numerous techniques for speeding up your website, however in this article, I will discuss the few I came across from my experience.

Why write an optimisation article?

I work for a company in the digital marketing space and part of my job involves writing screen scrapers. Anyone with an idea of screen scraping can tell you how annoying keeping scrapes up to date due to site structure changes on clients website can be.

With advancement in web technology and prominence of HTML 5 in our web browsers, screen scraping just got a lot more complicated. We now have to deal with lots of Javascript events with most websites built on Javascript frameworks. This means our crawlers need to wait for the page to fully load before scraping data.

In the course of dealing with lots of Javascript-heavy sites, I have observed a few design patterns I feel could be improved upon. For this reason, I am writing to point them out and suggest better ways to make Javascript heavy sites a little better and friendly.

Optimisation Steps

I will discuss a few actionable points and break down each scenario. The items are:

  • Loading JavaScript libraries
  • Web stats libraries
  • Data presentation and user choices

Loading Javascript libraries

Gone are the days of pure HTML only web pages. These days every website needs some JavaScript functionality even for a simple thing as displaying a site navigation bar. There is grave full of Javascript libraries out in the wild providing amazing functionalities so it is understandable you may need a combination of them to achieve your site design goals.

Several site optimisation technique suggests you load your Javascript libraries just before the end of the page. Libraries like HeadJs and RequireJS allow you to load Javascript libraries asynchronously. This is good but not enough.

One of the bottlenecks is script initialization. Most are developed with web frameworks that support a Master Template system. So subpages inherit the master template and simply override the content display. With this approach, all resources (JS, CSS) added to the master template, will be inherited by all subpages. We run into a situation were JS libraries not required on the page still get loaded and initialised.

You have sites that load Jquery UI libraries, plugins alongside BootstrapJS and many others. Pages without much interaction still have all sort of libraries loaded.

A solution will be to make sure on the templating side, the master page only has resources shared and used by all pages. Subpages can inject only the libraries required for its core functionality leaving behind irrelevant ones.

Don’t load a Jquery SelectBox plugin if it isn’t required on the page. Splitting your Javascript files into modules will help with this. You can selectively load and initialise just the right amount of code for the page.

Web stats libraries

Tracking user behaviours on your site is essential to aid your business strategies. Everyone does it now and as a result, there are a billion libraries and companies offering tracking services. Since we are spoilt for choice, it becomes difficult to pick just one tracking service as it may not provide all the features we want and, as a result, use a combination of such libraries.

The tracking libraries all need to be loaded and initialized before interaction on the page begins. Sometimes an error while loading or initializing a library can ruin the user experience on your site.

It will be better if you take a step back and think about the data you need to track that is most relevant to your business. Most of the time we are tracking data we never review or fully understand the benefits. Armed with this idea, you can cut off irrelevant tracking stats and keep your web pages light.

If you are brave enough, maybe writing yours would be better. No? :)

Data presentation and user choices

At my company, we work a lot with company’s selling mobile devices and network plans. In the mobile device space, there are numerous offers with a combination of data plans, call minutes and free texts. Sometimes retailers offer a much wider range of deals than can fit a web page.

Some web pages have a couple of checkboxes, dropdown menus with each click making a call to a backend to update the data on the page. Other retailers choose to download an entire XML of all offers to the page and then perform some computation to update prices on the page.

Requiring an Ajax request to the backend for each offer option clicked takes a toll on the user experience as the number of offers increases. Network delays could mean waiting for 2 to 3 seconds before the price on the page updates and costing us CPU cycle.

One solution is to preload most of the data plans as part of the HTML page. Sometimes displaying this info in a simple collapsible table could keep it simple. Alternatively, provide a search menu that allows a user select their preferences and then on button click, perform the required computation and update price accordingly. Keeping data presentation as simple as possible does improve the user experience.

Take home point from this post:
1. Keep Pages simple, load only the resources needed on that page.
2. Include the most useful user tracking library that provides the most vital data for your business.
3. Modularizing your Javascript code to reduce the initialization cycle on page load.

There are a million other tiny bits I could mention but let’s start with this and build a better web experience.

This was originally posted on ndifreke-ekott.info