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:
- 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.
I will discuss a few actionable points and break down each scenario. The items are:
- Web stats libraries
- Data presentation and user choices
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.
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.
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
- It isn’t the Language. Just your mind. Everything else is a Tool. - May 11, 2016
- How I learn and keep up with The Tech Times – Podcasts - February 24, 2016
- Website Optimisation: The Little Bits - January 11, 2016