How to do server-side testing for single page app optimization - | Digital Marketing Cebu
post-template-default,single,single-post,postid-17155,single-format-standard,ajax_fade,page_not_loaded,,qode-theme-ver-10.1.1,wpb-js-composer js-comp-ver-5.0.1,vc_responsive

How to do server-side testing for single page app optimization

How to do server-side testing for single page app optimization

Reading Time: 5 minutes

Gettin’ technical.

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:

  1. A person requests an internet page,
  2. The server finds the page and sends it to the person’s browser,
  3. The page is rendered on the person’s browser, and any scripts run throughout or after the page is displayed.
A fundamental illustration of server-client communication.

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:

  1. A person requests an internet page,
  2. The server interprets the script within the page, and creates or modifications the page content material to swimsuit the scenario
  3. The page is distributed to the person in last type after which can’t be modified utilizing server-side scripting.

To discuss server-side rendering, we even have to discuss a little bit bit about JavaScript. JavaScript is a scripting language that provides performance to internet pages, reminiscent of a drop-down menu or a picture carousel.

Traditionally, JavaScript has been executed on the shopper aspect, inside the person’s browser. However, with the emergence of Node.js, JavaScript might be run on the server aspect. All JavaScript executing on the server is working by means of Node.js.

*Node.js is an open-source, cross-platform JavaScript runtime surroundings, used to execute JavaScript code server-side. It makes use of the Chrome V8 JavaScript engine.

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).

If the content material is rendered client-side, JavaScript builds the applying HTML content material inside the browser, and requests any lacking knowledge from the server to fill within the blanks.

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.)

Server-side rendering additionally allows search engine crawlers to discover internet content material, bettering search engine optimization; and social crawlers (just like the crawlers utilized by Facebook) do not consider JavaScript, making server-side rendering useful for social looking out.

With client-side rendering, the person’s browser should obtain all the utility JavaScript, and wait for a response from the server with all the utility knowledge. Then, it has to construct the applying, and at last, present the whole HTML content material to the person.

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

Client-side testing includes making modifications (the variation) inside the browser by injecting Javascript after the unique page has already loaded.

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.

But for complicated purposes, client-side testing will not be the best choice: Layering extra JavaScript on prime of an already-bulky utility means even slower load time, and an much more cumbersome person expertise.

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.

WiderFunnel - client side testing activation mode
Activation Mode waits till the framework has loaded earlier than executing your take a look at.

When you do server-side testing, there are not any modifications being made on the browser stage. Rather, the parameters of the experiment variation (‘User 1 sees Variation A’) are decided on the server route stage, and hooked straight into the javascript utility by means of a service supplier.

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.”


Source link

No Comments

Sorry, the comment form is closed at this time.