25 Jun How to do server-side testing for single page app optimization
We discuss rather a lot about advertising technique on this weblog. But at this time, we’re getting technical.
In this publish, I group up with WiderFunnel front-end developer, Thomas Davis, to cowl the fundamentals of server-side testing from an internet improvement perspective.
The different to server-side testing is client-side testing, which has arguably been the dominant testing technique for many advertising groups, due to ease and pace.
But fashionable internet purposes have gotten extra dynamic and technically complicated. And testing inside these purposes is turning into extra technically complicated.
Server-side testing is an answer to this elevated complexity. It additionally permits you to take a look at a lot deeper. Rather than being restricted to testing photos or buttons in your web site, you possibly can take a look at algorithms, architectures, and re-brands.
Simply put: If you need to take a look at on an utility, it’s best to take into account server-side testing.
Let’s dig in!
Note: Server-side testing is a tactic that’s linked to single page purposes (SPAs). Throughout this publish, I’ll refer to internet pages and internet content material inside the context of a SPA. Applications reminiscent of Facebook, Airbnb, Slack, BBC, CodeAcademy, eBay, and Instagram are SPAs.
Defining server-side and client-side rendering
In internet improvement phrases, “server-side” refers to “occurring on the server side of a client-server system.”
The shopper refers to the browser, and client-side rendering happens when:
- A person requests an internet page,
- The server finds the page and sends it to the person’s browser,
- The page is rendered on the person’s browser, and any scripts run throughout or after the page is displayed.
The server is the place the net page and different content material stay. With server-side rendering, the requested internet page is distributed to the person’s browser in last type:
- A person requests an internet page,
- The server interprets the script within the page, and creates or modifications the page content material to swimsuit the scenario
- The page is distributed to the person in last type after which can’t be modified utilizing server-side scripting.
In laymen’s (ish) phrases:
When you go to a SPA internet utility, the content material you’re seeing is both being rendered in your browser (client-side), or on the server (server-side).
Basically, the page is incomplete upon arrival, and is accomplished inside the browser.
If the content material is being rendered server-side, your browser receives the applying HTML, pre-built by the server. It doesn’t have to fill in any blanks.
Why do SPAs use server-side rendering?
There are advantages to each client-side rendering and server-side rendering, however render efficiency and page load time are two big professional’s for the server aspect.
(A 1 second delay in page load time may end up in a 7% discount in conversions, in accordance to Kissmetrics.)
All of which to say, with a posh utility, client-side rendering can lead to sloooow preliminary load instances. And, as a result of client-side rendering depends on every particular person person’s browser, the developer solely has a lot management over load time.
Which explains why some builders are selecting to render their SPAs on the server aspect.
But, server-side rendering can disrupt your testing efforts, in case you are utilizing a framework like Angular or React.js. (And nearly all of SPAs use these frameworks).
The disruption happens as a result of the model of your utility that exists on the server turns into out of sync with the modifications being made by your take a look at scripts on the browser.
NOTE: If your internet utility makes use of Angular, React, or an identical framework, you’ll have already run into client-side testing obstacles. For extra on how to overcome these obstacles, and efficiently take a look at on AngularJS apps, learn this weblog publish.
Testing on the server aspect vs. the shopper aspect
The unique page masses, the content material is hidden, the mandatory components are modified within the background, and the ‘new’ model is proven to the person post-change. (Because the page is hidden whereas these modifications are being made, the person is none-the-wiser.)
As I discussed earlier, some great benefits of client-side testing are ease and pace. With a client-side testing software, a marketer can arrange and execute a easy take a look at utilizing a WYSIWYG editor with out involving a developer.
A Quick Hack
There is a workaround in case you are decided to do client-side testing on a SPA utility. Web builders can make the most of options like Optimizely’s conditional activation mode to be sure that testing scripts are solely executed when the applying reaches a desired state.
However, this may be tough as builders may have to take many variables under consideration, like location modifications carried out by the $routeProvider, or triggering interplay based mostly targets.
To keep away from flicker, you might want to cover content material till the front-end utility has initialized within the browser, voiding the efficiency advantages of utilizing server-side rendering within the first place.
Here is an instance the place we’re testing a pricing change:
“Ok, so, if I want to do server-side testing, do I have to involve my web development team?”
But, which means that testing will get folded into your improvement group’s work move. And, it signifies that it is going to be simpler to combine successful variations into your code base in the long run.
If yours is a SPA, server-side testing could be the more sensible choice, regardless of the work concerned. Not solely does server-side testing embed testing into your improvement workflow, it additionally broadens the scope of what you possibly can really take a look at.
Rather than being restricted to testing page components, you possibly can start testing core elements of your utility’s usability like search algorithms and pricing modifications.
A server-side take a look at instance!
For internet builders who need to do server-side testing on a SPA, Tom has put collectively a fundamental instance utilizing Optimizely SDK. This instance is an illustration, and isn’t useful.
In it, we’re working a easy experiment that modifications the colour of a button. The instance is constructed utilizing Angular Universal and categorical JS. A world service supplier is getting used to fetch the person variation from the Optimizely SDK.
Here, now we have merely hard-coded the person ID. However, Optimizely requires that every person have a novel ID. Therefore, you might have considered trying to use the person ID that already exists in your database, or retailer a cookie by means of categorical’ Cookie middleware.
Are you at the moment doing server-side testing?
Or, are you client-side testing on a SPA utility? What challenges (if any) have you ever confronted? How have you ever dealt with them? Do you will have any particular questions? Let us know within the feedback!
“Sareno Web & Search Engine Marketing Solutions”
“A Digital Marketing Agency in Philippines. We provide quality output with the best price in the market. Contact us today and get a FREE Consultation.”