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:
Moreover, Google’s research indicates that slow-loading pages have low user engagement and a high bounce rate:
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™ 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.
The page rendering system is faster from the HTML side due to the following changes.
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.
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:
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.
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.
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?
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.
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.