Saratoga has been developing and managing the public-facing news website for a large South African media house for the past four and a half years. The site currently ranks as the 2nd largest news site in South Africa, with 5.5 million unique browsers visiting each month, producing more than 24 000 000 page views, when measuring international traffic.
Our team has learnt many valuable lessons from working on such a large site, with one of the key lessons being that the saying ‘time is money’, can also be applied to loading times for websites. In a case study Walmart found that for every 100 milliseconds of improvement, they grew incremental revenue by up to 1%. While Akamai found that 64% of shoppers who are dissatisfied with an online store’s experience and loading time will take their business elsewhere. In the world of online media, which is a very competitive sector that often solely relies on ad revenue, the same harsh reality applies.
Here are some of the lessons that we’ve learnt through our years of development on this site:
- Design for scalability
Unpredictable growth and wildly varying traffic can place considerable pressure on infrastructure and push monthly spend through the roof. Before the cloud there was no option but to cater for the worst case scenario and invest heavily in servers and other infrastructure to carry the worst load imaginable. Even then sites would be pulled offline when a sudden surge of interest would send millions of visitors to the site.
It’s easy to see why cloud based scaling is so popular, and auto-scaling allows more resources to be deployed and removed on demand automatically and as the need arises.
The software components need to be able to deal with scaling too. Often this means splitting services from the main codebase, which is the collection of source code that is used to build the software system, off onto their own services to allow them to be allocated more resources when required.
In our case, we split the content management service from the front end, to allow each component to scale individually. This allows the front-end to scale independently from the back-end when the traffic increases.
- Effective caching
A cache is used to store something temporarily. In computing, active data is often cached to shorten data access times, reduce latency and to improve input and output. Caching is therefore vital to almost all applications to improve performance.
For example, Web browsers such as Firefox, Safari and Chrome use a browser cache to improve performance for frequently accessed webpages and webpage components. When you visit a webpage, the files your browser requests are stored on your computer in the browser’s cache. If you click ‘back and return to that page, your browser can retrieve the files it needs from cache instead of requesting them from the server again. Ultimately the benefit of cache is that it’s much faster for your browser to read data from the browser cache, than to have to receive the files from the server.
A common misconception of caching is that it only affects the above mentioned example; the transaction between the browser and the webserver. In fact, caching affects all layers of the system, including the edge servers, the web presentation server, the web application server, the network, the existing business applications, and the database. Over-caching however is as counterproductive as under-caching, hence a well-thought caching strategy is critical.
A caching strategy reduces load on the servers, which means less servers are necessary to handle the same load as without caching. While activating a CDN (Content Delivery Network) such as Cloudflare will provide an initial and cheap performance gain, most systems require a lot of fine tuning to truly take advantage of all the features such a system provides.
- Push the workload to the edge
In a nutshell, edge computing is a method of optimising cloud systems by extending the control of computing applications, data, and services away from the servers to the other logical extreme (the ‘edge’) of the Internet. In this architecture, performing analytics and knowledge generation at the edge reduces the traffic between client and server.
Edge workers lets developers deploy code at the edge, closer to the end user, and enables programmatic functionality for routing, filtering and responding to HTTP requests that would otherwise need to be run on the server at the origin.
Combining edge workers with an effective caching strategy, back-end servers can be fine-tuned to handle just the critical transaction workload. This reduces the number of resources required and improves the overall user experience, which translates to higher income and lower expenditure.
- Design pages for performance
It is easy to overcrowd a web page with features and elements, but when looking at performance, each feature or element should have a business value for being there. Each item delivered by the page degrades the time needed to download the page, and as mentioned earlier every millisecond counts.
Performance is placed in sharp focus when one looks at the fact that websites are being accessed more and more by mobile devices on slow and unreliable networks. For good reason, performance tools such as Google’s Lighthouse insists on doing performance tests on a 3G equivalent network.
Leveraging the right technologies and techniques, such as effective caching, goes a long way to retaining visitors, reducing bounce rates and ultimately pushing up the bottom-line.