Render Better is designed to optimize most Shopify ecommerce websites with a failsafe design, but sometimes there can be bugs in the optimizations that can affect the site. To help troubleshoot these issues, we’ve put together this guide.
- Check if Render Better is the problem
- Check if Render Better is breaking site features
- Check which optimization is breaking site features
- Next steps
- Turn Off Render Better’s Optimizations
- Turn off a specific optimization
- Example code
- Turn off all optimizations
- Example code
- Reach out to our support team
Check if Render Better is the problem
It can be hard to tell if Render Better is breaking features on a website since there are many moving parts with any website, so we’ve built some tools to make it easier for your team to investigate. We recommend first testing whether Render Better altogether is the problem and then once its established that the issue is with Render Better, you can try narrowing it down to specific optimizations to determine which optimization(s) are the problem. If Render Better is breaking something, then there are several options to disable Render Better partially/fully for visitors depending on your needs and urgency.
The following steps will help guide you through this process.
Check if Render Better is breaking site features
To check if Render Better is breaking a site feature, the first step is to identify whether the issue exists on your original site without Render Better running. This will help narrow down whether Render Better is the problem or if it’s something else.
To perform this check, open a private browser window, aka an Incognito window (this will help prevent cookies and browser extensions from affecting your testing), and type in the affected URL with the text ?rb_original_site appended to the URL in the URL bar of the newly opened private browser window.
For example, if the following URL has an issue on it…
https://example.com/products/example-product
… then open a private browser window and enter the URL…
https://example.com/products/example-product?rb_original_site
This will temporarily redirect you to your original site without Render Better running. From there, you can test whether the feature is still broken. If it is still broken, then the issue exists on your original site, which means Render Better is not causing the feature to be broken and you should investigate further with your developer.
Once you’re done testing this, if the problem is not occurring on your original site, that means Render Better is affecting that feature to cause it to not work. Either proceed on to the next section to learn how to identify which specific optimization(s) are breaking the page feature, or you can disable all optimizations using the code further down in this guide if you need to correct the issue quickly.
?rb_no_redirect=false to the URL.Check which optimization is breaking site features
Once you’ve verified Render Better is breaking a site feature, you can narrow down which specific optimization is breaking that feature.
Use the URL view-source:<https://your-broken-URL>?rb_info replacing <your-broken-URL> with the URL that has a broken feature to get a list of optimizations enabled for the given URL.
For example, if the URL is…
https://example.com/products/example-product
… then change the URL to…
view-source:https://example.com/products/example-product?rb_info
You’ll see your site’s HTML with a green comment at the top with each enabled optimization applied to the page like in the image below:
Within the quotes are the names of each optimization. Try appending ?rb_disable=name-of-optimization to the URL (without the view-source: part at the beginning of the URL) and check to see if the issue is resolved. This will disable the specific optimization temporarily for you. You can chain together multiple optimizations you want to disable by putting a comma between each optimization.
For example, if you want to disable optimizations called aspect-ratios and critical-css and the URL is the following…
https://example.com/products/example-product
… then change the URL to…
https://example.com/products/example-product?rb_disable=aspect-ratios,critical-css
If the disabling a specific optimization fixed the issue, then you’ve identified which optimization is breaking the feature on that page.
Next steps
Once you’ve determined which optimization(s) are breaking the page, you can disable them permanently for that page or sitewide using the instructions below. If you can’t figure out which optimization is breaking the page, you may want to disable all optimizations for that page. If the issue is sitewide, we recommend temporarily disabling all optimizations sitewide and reaching out to our support team (instructions below) for our assistance.
Turn Off Render Better’s Optimizations
The following instructions allow you to turn off specific Render Better optimizations or all optimizations, respectively. Use these features to disable optimizations running on specific pages or sitewide.
Turn off a specific optimization
To specify which exact optimizations to disable, use the data-rb-disabled-optimizers attribute. This code should be applied to the head tag in your Shopify theme.
Example code
The following code would disable only the critical-css, third-party-deferral, and aspect-ratios optimizations
<!doctype html>
<html>
<!-- Settings should be added to the <head> tag as attributes -->
<head data-rb-disabled-optimizers="critical-css,third-party-deferral,aspect-ratios">
<!-- ... the rest of your HTML follows -->Turn off all optimizations
To disable all optimizations from being applied, use the data-rb-disabled attribute. This code should be applied to the head tag in your Shopify theme.
Example code
<!doctype html>
<html>
<!-- Settings should be added to the <head> tag as attributes -->
<head data-rb-disabled>
<!-- ... the rest of your HTML follows -->Typically the head tag code is found in your layout Liquid files in your Shopify theme. When you apply this code, it will affect every page using that layout. So for example, if you apply this change to your layout/theme.liquid file, this will disable Render Better sitewide if that layout file is used for every template.
You can use Shopify Liquid tags to narrow down disabled optimizations to specific templates instead. For example, the following code would only disable optimizations on product pages:
<!doctype html>
<html>
<!-- Settings should be added to the <head> tag as attributes -->
<head {% if template == 'product' %}data-rb-disabled{% endif %}>
<!-- ... the rest of your HTML follows -->Reach out to our support team
We’re always here to help whenever you get stuck or need assistance! If you have questions, please reach out to success@renderbetter.com or your account manager if you have one for support.
Please include steps of how to replicate any issues and include a video or screenshots demonstrating issues for our team to investigate more quickly. Additionally, we recommend testing in your browser’s private browsing mode (aka Incognito mode) to prevent your browser’s cache or other browser extensions from affecting testing.