Render Better Onboarding for Custom Hostnames

Introduction

Render Better automatically optimizes the load time of Shopify storefronts for a blazing fast shopping experience. 49% of customers abandon poor loading websites, which results in substantial lost revenue for merchants. Render Better helps save you from lost customers due to poor loading times and eliminates the high engineering costs required to keep an entire website loading optimally.

In this onboarding guide, you’ll learn about how Render Better works, important considerations before setting up Render Better, and the steps needed to set Render Better up. This guide is targeted to your website design, marketing/communications, and IT teams whom we recommend read through this guide to ensure a smooth launch experience.

Table of contents

How does Render Better work?

Render Better automatically improves load times of ecommerce websites by sitting between the website and its traffic and optimizing code on the fly. To achieve this, a website points its domain at Render Better’s global CDN and Render Better CDN fetches the website response, rewriting it to load more optimally before serving it back to browsers.

Render Better sits between your traffic and Shopify and optimizes each request on-the-fly
Render Better sits between your traffic and Shopify and optimizes each request on-the-fly

Render Better learns how to optimize websites by crawling them and discovering the types of content, images, third parties, and other resources that need to be loaded and their priority. When visitors request a web page, Render Better fetches it from the server (such as Shopify) and uses what it learned about the page to make sure resources are loaded in the optimal order and at the right time.

We call this process Resources Priority Optimization (RPO), a proprietary technique we’ve pioneered through years of R&D that sets us apart from our competition.

Website resources overwhelm browsers, clogging up their load like a pipe with too much in it. To prevent a visitor’s browser becoming clogged, Render Better uses RPO to make sure only the most important resources load first (such as text and images), and less important resources being loaded later (such as third parties and low priority scripts).

We make sure the most important content visitors want to see is loaded first
We make sure the most important content visitors want to see is loaded first

Furthermore, we make sure resources that are loaded are each compressed and squashed as much as possible. Image sizes are adjusted if they’re too big for the screen, unneeded font characters are removed, text is minified and compressed, and more.

Important considerations

We’ve built Render Better to be as unobtrusive and surprise-free as possible, but there are still some important considerations to make before completing the installation of Render Better. Please review these considerations to ensure you know what will change so you’re not caught off guard.

Domain changes

For Render Better to work, you need to point your storefront’s domain (e.g. yourdomain.com) at Render Better’s servers. This requires a change to your domain, but you will still remain in full control of your domain and your website at all times.

During the installation of Render Better, your website’s primary domain is pointed at Render Better and a subdomain is created to point directly at Shopify. The subdomain is needed to pull the website content for Render Better to optimize (the HTML, CSS, JavaScript, images, etc.) and to redirect visitors to when they go to checkout (Shopify does not allow Render Better to sit in front of Shopify’s checkout page). Typically, that subdomain is a shop subdomain on your domain, such as shop.yourdomain.com, that is set up during your onboarding. A typical set up may look like the following:

  • www.yourdomain.com - This is where all website traffic will land for your store. The traffic passes through Render Better.
  • shop.yourdomain.com - The shop subdomain points directly at Shopify. This is where all visitors that checkout will land.

An important consideration regarding this domain set up is whether any apps, analytics services, or other third party services need to be updated to expect traffic from the new checkout domain (e.g. shop.yourdomain.com). It is recommended your vendors review this domain change to your checkout.

See the next section for more details about the checkout domain.

Your new checkout domain (shop.yourdomain.com)

As a part of the onboarding process we will set-up a shop. subdomain that points to Shopify. This domain will be the Primary Shopify Domain which Shopify will use to process payments. For security purposes Render Better will not proxy this checkout domain. You can think of the shop. subdomain as nothing more than just Shopify without Render Better. Your current domain (www or the root domain) will point to Render Better which optimizes the page before sending it to your visitors.

The basic flow of a customer on your site will start with them visiting your site on Render Better via the www or root domain. While they’re shopping on your storefront they will see the Render Better optimized version of your site. Once they are ready to checkout, Render Better will send them to the shop. domain to finalize the checkout and process payments.

💡
Your shop domain will be publicly accessible, but any customers that land directly on the shop domain will be automatically redirected to the Render Better optimized domain

How does this affect my SEO?

As a part of the onboarding process the Render Better team will help with modifications to your theme to make sure any search engine crawler requests that go directly to the new shop. subdomain get directed to the optimized version of your site. We do this via a canonical meta tag and by modifying the robots.txt file to make sure crawlers only crawl and index the optimized domain. This will prevent search engines from indexing the shop.yourdomain.com site.

💡
In addition to the above theme modifications Render Better automatically injects <meta name="robots" content="noindex"> on your rb. staging subdomain to ensure it doesn’t get indexed.

Adding your checkout domain to Google Analytics exclusions

Splitting your store into two domains can cause Google Analytics to track a single customer session as a referral when moving between the domains. Adding the domains to the Referral Exclusion List tells Google Analytics to consider traffic flowing between the two domains as a single session so it doesn't count as a referral.

The Shopify Documentation recommends adding both your primary domain and checkout domains to the Referral Domain Exclusions. See the documentation here for reference: https://help.shopify.com/en/manual/reports-and-analytics/google-analytics/exclude-referrer-domains

Other Google Analytics changes

You may have your Google Analytics views set up to filter out unknown domains. These rules may cause conversions to not be registered and will need to be adjusted to include the shop. subdomains. If you are not seeing conversions tracked in Google Analytics you may need to add shop.<yoursite>.com to the list of allowed domains.

Third Party Scripts and Shopify Apps

Most third party scripts and Shopify apps work flawlessly with Render Better, but occasionally some of these might have issues with Render Better. Before launching with Render Better, we recommend checking third parties and apps loading on your site loaded through Render Better are working correctly.

Below are some third parties we’re aware of that have had problems with Render Better that we’ve had to work with merchants to resolve:

Shogun

Shogun is known to have issues with domain redirects. This can surface as the Shogun Builder preview window showing an error. If you are using Shogun please let us know ahead of time so we can make sure to modify your theme to support Shogun.

Builder.io

Similar to Shogun - we will need to modify your theme to allow Builder.io’s tooling to show your website in their editors.

Analytics

Most analytic services work without any issues with Render Better, but there are a few things to know:

  • If you opted to change your domain from the root domain to a www subdomain (e.g. yourdomain.com to www.yourdomain.com) your analytics will now start to show as coming from your www subdomain.
  • There is the possibility that you may see sales coming from the shop.yourdomain.com domain due to the way browsers handle analytics cookies. If this occurs, please contact us so we can assist.
  • If you are using views in Google Analytics to filter by domains make sure that your checkout domain will be included in the view.

Cookies

Functionality like the cart, discounts, and affiliate tracking utilize cookies to keep track of who a visitor is throughout their session. Splitting your domain into the shop and www domains can cause cookies to not be shared across the domains. Render Better has a solution in place to modify the cookies so they can be shared across your subdomains.

To ensure the least amount of potential issues be sure to point all external traffic, ads, etc. at the Render Better optimized domain so the cookies can be shared across your domains.

Theme changes

As a part of the onboarding process the Render Better team will make a few small changes to your Shopify theme to do the following things:

  • Allow you to control the Render Better directly in Shopify
  • Redirect any customers to the Render Better optimized domain
  • Modify the canonical tag and robots.txt to point to the Render Better optimized domain
💡
It is important to make sure that these changes are in any new theme updates. If you need us to make the changes to another theme as well as your current “Live” theme please let us know during onboarding.

If you need to make these changes manually (for example, if you track your theme code in a Git repository), please follow our theme code installation instructions:

Install Render Better’s Shopify theme support code for custom hostnames

Uptime

When using Render Better, traffic will be served from Render Better’s servers instead of directly from Shopify’s, so that means the uptime of your website is tied to the uptime of Render Better’s servers and Shopify’s. The stability of Render Better’s customers is of paramount priority to us. From day 1 we’ve thought about how to ensure maximum uptime and stability of the Render Better platform. Below are some of the ways we make sure your site is maximally available.

Rock solid infrastructure

Render Better uses the same global network provider as Shopify, a trusted provider of many Fortune 100 businesses, so we’re confident in the stability of our platform. If you trust Shopify’s uptime, you can trust us.

Tests, QA, and Monitoring

Our monitoring system pings your site every few minutes to make sure everything is working properly. Render Better also has continuous log and exception monitoring in place. Our engineers are on call for major issues and are alerted via a 24/7 pager system. All deployments are backed by hundreds of automated tests and manual QA review.

Fallback Mechanisms

If Render Better detects any issues with our optimizations, we’ll simply serve up your original site directly from Shopify. For example, if our optimizations fail to modify your code within a few hundred milliseconds, Render Better will automatically pass your site through without making any changes.

You’re in control

We provide instructions for your team to turn off Render Better should you ever need to do it yourself, so you’re always in control of your site.

We have a wide range of Shopify sites currently running on our platform, without issues, from only a few thousand sessions per month to several hundred thousand sessions. Thanks to our robust infrastructure, we can handle sites of any size and fluctuation in traffic.

Root domain requirements

If your store uses the root domain instead of a subdomain (i.e. yourstore.com instead of www.yourstore.com, additional steps may be required to set up Render Better. Some domain registrars and DNS services don’t support a needed feature Render Better requires called domain aliasing or CNAME flattening.

If you are on the root domain (non-www), verify that you can use alias records (aka CNAME flattening). If your DNS provider does not support alias records, consider using a free provider like Cloudflare to point your nameservers to or redirect your root domain to your www subdomain. We will help you with this step during set up.

  • Known providers that support alias records:
    • Cloudflare
    • DreamHost
    • DNS Made Easy (digicert)
    • Route 53
  • If you opt into moving from a root domain to the www subdomain please let us know in advance so we can work with you to move your domain before onboarding to Render Better. We require your site to be on the new domain for 2 weeks before onboarding.

Launching your site on Render Better

The launch of Render Better for your site follows a 2-phase process which is there to ensure everything goes off without a hitch. These phases are broken out into the following:

  • Phase 1: Installation and Review
  • The Installation and Review phase ensures that everything is working exactly as expected before going live with Render Better. We’ll QA the site on our end and work with you to ensure everything looks good before launching on Render Better. Typically, this only takes about 1-2 weeks for most websites.

  • Phase 2: Launch
  • When everything looks good, we will schedule a date and time to launch your website with minimal downtime. During this phase, your domain will be pointed at Render Better and traffic will start passing through Render Better’s global CDN.

Phase 1: Installation and Review

Installation

The first thing we will do is set up a new sub-domain that you can test Render Better on. We will provide you with a set of CNAME records to add to your DNS Provider which will create an rb. subdomain.

In addition to this, we’ll help you with the theme changes and Shopify Pixel tracking that needs to be added.

Review

Once the rb. subdomain is set up please poke around and see how things perform. We mainly want to look out for application and plugin functionality along the customer journey such as reviews, images, cart flows, etc to make sure everything works as you expect.

If you suspect that something is broken in the staging site make sure that it’s not also broken on the live site. To help us address any issues please take either a screenshot or a video recording of the issue and send it to us along with the URL you’re seeing the issue on.

We will conduct our own set of tests, but please let us know if you spot any issues or have questions so we can work through those before going live.

Important things to check

Are any third party features or apps missing on these pages:
Home Page
Collections Page
Product Page
Cart/Checkout

Phase 2: Launch

New CNAME records

In order to get everything ready we will need to add a few CNAME records to your DNS: shop.yourdomain.com. This will be your checkout domain and will also function as your fallback domain in the case that we encounter an error serving traffic.

Forwarding your domain to Render Better

  • The final step is to forward your domain to Render Better. We will change your existing record from Shopify to point to <yourdomain>-prod.renderbetter.app
  • This step can take anywhere from a few minutes to an hour. During this time we will set your primary domain to shop.<yourdomain>.com and turn off automatic redirection. This will allow customers to still shop on your site while the DNS is propagated across the world.
💡
You may experience the domain for your store change during this time. Once the DNS has fully propagated you see see the it return to your original domain.

Additional notes

You may notice that your primary domain in Shopify shows the “SSL unavailable” badge. This is because Render Better has the SSL Certificate in order to serve traffic under that domain. This is expected behavior and should not cause any issues. Please contact us if you believe it is causing any trouble with your site.

image

Important things to check

Now that you have officially onboarded to Render Better please double check that your website is behaving as you expect.

Some notable items to check:

Are any third party features or apps missing?
Home Page
Collections Page
Product Page
Cart/Checkout
Collections page
Can you navigate to a product?
Does searching and filtering work?
Product pages
Can you add an item to a cart and checkout?
Are any apps or plugins missing?
Checkout/Cart
Can you checkout/purchase?
Are any apps or plugins missing?
Do the alternative payment options (PayPal, Google Pay, etc.) work?
Can you go back to the main site from the checkout (e.g. clicking the logo)?
Account features
Can you create an account?
Can you login?
Can you login through the checkout page? (if feature enabled)
Misc
Do forms work?

Although we don't anticipate you'll have any issues with any of the features, we advise this regression testing just to be safe. If there are any issues discovered, it may be possible it's related to Render Better or it may be an existing bug. We have a troubleshooting guide on how to tell which it is and what to do if you discover an issue related to Render Better here:

Troubleshooting Render Better

Reach out to our support team

We’re always here to help if you have questions or need assistance! Please reach out to success@renderbetter.com or your account manager if you have one for all your inquiries.