Inside Postclick’s Thor Render Engine

Inside Postclick’s Thor Render Engine

Page speed plays a significant role in user experience and, ultimately, your advertising conversions. When page rendering takes too long, you risk frustrating audiences and increasing bounce rate. 

While Google PageSpeed Insights scores the speed of pages and allows you to analyze the pages’ performance on both mobile and desktop devices. It is still up to your team to implement changes to pages to help them load faster — this takes up time and effort. 

Not anymore – Postclick’s Thor Render Engine™ alleviates the pain of slow loading un-responsive landing pages. However, before we delve into how Thor Render Engine™ works, let’s first discuss why you need to ensure all your landing pages load fast and are responsive. 

Why page rendering should be a priority for landing pages

A slow rendering page can have catastrophic effects on advertising conversions. Every second delay in mobile page load time leads to a drop in conversions:

Slow mobile page load time

Moreover, Google’s research indicates that slow-loading pages have low user engagement and a high bounce rate: 

Google data on slow loading

For DTC and ecommerce brands, a slow-loading landing page adversely affects advertising conversions and, ultimately, sales. Data shows that 80% of users said a slow loading website was more frustrating than a temporarily down website. 

To put it into perspective, this is the difference one second makes for an ecommerce brand.

In addition to creating personalized landing pages for audiences, it is also essential not to overlook the backend details of the pages. All the factors that make pages render faster and responsive to all screen sizes. 

With Thor Render Engine™, your team can sit back as Postclick provides a better user experience for mobile browsing and lowers the risk of visitors bouncing. 

What is the Thor Render EngineTM?

Thor Render Engine™ does a full rewrite of landing pages to help make them responsive and load instantly. The technology changes the HTML structure, JavaScript, CSS Refactoring, and Responsiveness of pages. 

Thor Render Engine™ works silently behind the scenes to make every landing page lightning fast — your team doesn’t have to do anything. 

How is it unique?

The ability to automatically alter the structure of landing pages and scale the page content to match any screen size are what make the Thor Render Engine™ one of a kind. The technology achieves this by making changes to the following aspects of landing pages. 

HTML structure

The page rendering system is faster from the HTML side due to the following changes. 

Resource prioritization

A lot of unused, ambiguous, or un-optimal code is stripped from landing pages resulting in a clear, fast-rendering markup.

The updated HTML structure guarantees all resources load in the correct order. Page styles (except font styles) have been added to the head section so pages load faster than using CSS stylesheets.

Responsiveness no longer needs other breakpoints in CSS or JavaScript because pages will load fast and look great without additional code. Moreover, all scripts are placed in the bottom of the page body so they don’t block page rendering. Critical scripts and resources (e.g., fonts) use browser pre-load abilities, which means they’re not blocked while the page renders. Furthermore, no synchronous JavaScript is placed in the head tag of the page.

Image and video lazy loading

Although images and videos are not render-blocking, when there are multiple page images, the bandwidth can be clogged up with too many requests. 

This leads to poor user experience since images in the top fold are loaded simultaneously with images below the fold, which aren’t visible to audiences.

To solve the issue, we introduced the following optimizations:

  • Images above the fold load with higher priority — the download starts immediately, making the images visible even before the page gets interactive.
  • Images and videos below the fold are loaded lazily — the download triggers when the visitor scrolls to them. Gray boxes are used as placeholders for not-yet-loaded images.
  • To prevent the user from seeing these gray boxes, images are actually loaded when the visitor scrolls into the viewport. 
  • The same rule applies to videos, that are loaded in iframes.

To make this happen we leveraged cutting-edge API of IntersectionObserver, that makes lazy-loading efficient with small code size footprint:

Page rendering iframe lazy load

JavaScript refactor

The JavaScript refactor includes the following optimizations:

  1. Modular architecture: All JavaScript code on landing pages relate to features of specific widgets. We split our code into multiple bundles, each containing a code for the particular feature. So, when a user designs a page with only images and links, no code for Form or Popup widgets will be loaded, making the page load fast.
  2. Super lightweight: Old libraries were removed and we re-designed the entire code architecture, this allowed us to reduce total JavaScript size on the page from over 1MB to about 200kB (that is 5x less!), while a typical page will load less than 100kB thanks to modularization described above.
  3. All Async: As JavaScript is render-blocking, we moved all script imports to the bottom of the body tag. This allows the browser to render the full page before scripts are executed, allowing visitors to see meaningful content earlier. Scripts that provide interactivity will load and execute only after they start to interact with that section of the page. This provides a very good experience especially on mobile devices with lower performance and often a poor internet connection.

CSS refactor

We’ve also rewritten our entire CSS stylesheets, removing the unnecessary third-party code so the stylesheets are reusable, readable, and lightweight. We also use generic CSS classes to reuse CSS code as much as possible.

We’ve also implemented CSS-only animations with GPU acceleration. The most important change in our CSS stack was introducing the relative unit “rem” instead of pixels. Landing pages can now scale smoothly on every device size, from smartphones to 4k desktop displays.

CSS responsiveness

We are using “rem” in combination with “vw” unit to make landing pages responsive. This means there are two gaps in device resolutions when the page is scaled down between 768 and 1200 pixels width. In all other resolutions, the main content remains a fixed width, just like in the builder. 

The fixed-width value is 400px for mobiles and 1200px for desktop.

“Rem” units give us the ability to recalculate widget position and size smoothly. It also means we don’t have to use JavaScript to make this happen.

We’ve made the following alterations:

  • Below 400px content automatically scales to fit the screen width
  • Between 400px and 768px the content width is fixed
  • From 768px mobile view switches to desktop view
  • From 768px to 1200px content automatically scales to fit the screen width
  • Above 1200px the content is fixed

As far as lightning-fast page speed goes — the AMP framework also promises faster page load speed on mobile devices and better user experience for mobile browsing. Though the framework initially only catered to mobile experiences, it has now evolved to include other devices. 

However, there are a few characteristics that make Thor Render Engine™ unique. 

How is Thor Render EngineTM different from the AMP framework?

AMP initially helped speed up mobile search results in Google. The framework enables pages to load faster by restricting HTML/CSS and JavaScript. AMP pages are also automatically cached by Google AMP Cache for faster load times on Google search. However, the AMP framework has Javascript and CSS limitations. 

Thor Render Engine meanwhile has no Javascript and CSS limitations. 

In fact, The Postclick team can design and publish AMP landing pages for you directly from the platform. The Postclick AMP validator helps fix any errors so pages are AMP-compliant, appear in the Google AMP Cache, and optimize the user experience.

The AMP validator combined with Postclick’s Thor Render Engine™ makes for better user experience for mobile browsing and lowers the risk of a high bounce rate. 

Ensure all your landing pages are responsive and fast-loading 

The Thor Render Engine™ automatically improves page speed and responsiveness. This guarantees your landing pages have a good user experience increasing advertising conversions and improving ROAS.  

Partnering with Postclick gives you access to the technology that enables landing pages to score a 100 on Google’s PageSpeed Insights with the first contentful paint loaded in just 0.2 seconds. 

Thor page speed

Get a complimentary conversion analysis

Postclick is changing the possibilities for teams focused on advertising conversion. We would like to offer you a complimentary analysis of your ad campaigns. The analysis includes competitive insights against your top 5 competitors and the top sites in your industry. Our team will share insights on how we can increase your conversion rates, in addition to a comprehensive competitive analysis.

Plus, we will review your campaigns to analyze your post-click health, compare your site against industry and competitive benchmarks, and identify the most effective opportunities to increase your ROAS. Request your analysis here.

Fahad Muhammad
by Fahad Muhammad

Fahad Muhammad is a Content Marketer at Postclick. He writes about post-click landing pages, advertising trends, and personalization. When he’s not busy writing, he can be found glued to an episode of Top Gear.

Learn more about the technology that powers Postclick

Get in touch and let’s see if we’re a good fit to work together.

Let’s talk
Postclick Sales : +1.415.604.0021