Predictive Preloading

Padeo's service can help your business make more sales by predictively preloading your website's images, JavaScript, CSS, fonts, and more. Here's how and why Padeo can work for you.

Introduction

One of the golden rules for fast loads on your website is to minimize the amount of data that needs to be transferred between your website server and your website visitor. There are many standardized solutions for optimizing and reducing the amount of data that website resources use such as minification and file compression. Even with all these optimizations, some amount of data still must be transferred between your website server and your website visitors. Padeo’s intelligent preloading techniques are the next step beyond website optimization.

Your website may already be optimized and hosted on fast servers with plenty of bandwidth to handle lots of web traffic. One thing you cannot control for is your website visitor’s connection speed. A customer with slow network speed still needs to download all of your website data, and if the loading holdup is due to your customer’s connection, then that customer will still suffer slower load times no matter how fast or optimized your website’s server-side is. This is where Padeo comes in.

When the bottleneck is your visitor’s connection speed, Padeo decreases loading times dramatically by making the most of the slow ‘trickle’ of network traffic that is possible on a slower network connection by predictively preloading the most likely next webpage(s) that will be visited. A near-instant page load for your customers on a spotty connection can be the difference between your website making another conversion (obtaining a lead, making a purchase, reading another post) and or the customer abandoning out of disinterest.

Problems with the Current Preloading Landscape

Using built-in browser mechanisms such as <link rel="prefetch"> or <link rel="preload"> to predictively preload/prefetch resources for future page navigation means developers rely on manually reading web analytics to inform their decisions for what to prefetch. There are a few issues with this approach:

  1. Many smaller, local businesses do not have a dedicated web developer to manage analytics and make prefetching decisions.
  2. Prefetching decisions often are not consistently updated as data trends change, and therefore less effective.
  3. Prefetching is used in a limited capacity. Real-world implementations often prefetch resources from a small set of pages such as the homepage, instead of strategically prefetching resources across the entire website. This leaves opportunity for more performance.

Padeo automatically and intelligently manages prefetching and preloading resources on a website using a data-driven approach. In addition, Padeo is extremely easy to use. Anyone can add the Padeo pixel to their site and start experiencing the benefits of intelligent preloading for free.

Image Preloading

Padeo’s image preloading works by downloading the images on the next predicted page and storing those images in the user’s browser cache (temporary storage), so they’re ready to be used and do not have to be downloaded when the user clicks to the next page.

Images and video are generally the heaviest resources to load on any given page¹. A single high resolution image can easily fall in the range of 1 to 5 Mb. Many images are optimized for web use and are much smaller in size, yet the point still holds true: Images and videos are usually the heaviest data resources to load on any given webpage. Preloading images on your website with Padeo cuts out the bulk of the data to load, speeding things up significantly. This benefit is amplified for your website visitors on slow, or spotty mobile connections.

Summary:

  • Images make up the bulk of the resource data on any given webpage and can be preloaded effectively.
  • Preloading images via Padeo cuts page load times dramatically, especially for mobile users and those with slow connections.

Preloading Font, CSS, and JavaScript Resources

Padeo can also preload all the other types of resources that a website visitor needs to load when they click to the next page like JavaScript files, Cascading Style Sheet (CSS), and Fonts.


Font Preloading

By default, web browsers wait to load font files until after the browser starts rendering visible content on the user’s screen. The browser is lazy loading the font files so that loading a specific font only starts when the browser knows that specific font is needed. This lazy loading style can result in a situation where the browser is ready to start displaying text on the page, but it has to wait for the font to finish downloading in order to render the text. This is bad because it increases the time that the user spends waiting for content to load, which hurts the user experience and leads less conversions.

Padeo’s font preloading feature automatically preloads Google and Adobe hosted fonts, so there’s never any user time wasted and the font is already available for the browser when it’s ready to begin displaying text.

Summary:

  • Sometimes a font that hasn’t loaded prevents the browser from displaying text - wasting your users’ time.
  • Padeo can preload important font files so they are always ready to go.

Padeo takes things a step further by predictively preloading critical resources that the next page will need. Padeo’s predictive preloading means that critical resources are already downloaded, so your website visitors spend less time waiting, and more time engaged with your website. Join the Waitlist


CSS Preloading

Both HTML and CSS are render blocking resources, which means that the browser stops rendering the web page until the necessary HTML and CSS files are downloaded. In some cases, CSS files can take a significant amount of time to load, blocking the browser from showing your website content until the download is complete. Loading external stylesheets (standalone .css files) can require multiple roundtrips between your website server and the browser, which takes time. This leads to your customers staring at a blank screen instead of being able to view your website sooner.

Padeo preloads CSS resources that the next predicted page will need while the user browses their current page. With CSS preloading, the next predicted page can begin rendering sooner because the critical and non-critical CSS has been preloaded.


JavaScript Preloading

Scripts are some of heaviest resources on the average web page (behind videos and images). The average page has 448 KB of scripts (around half a MB)². This may not seem like a lot, but preloading the scripts on a webpage can make a huge contribution towards decreasing loading times, especially for those on slower connections or on mobile devices. Preloading scripts is just the start of it - Padeo preloads all the resources that a page needs like: images, videos, CSS, and fonts.

Just like CSS, Javascript files can be render blocking. Render blocking resources are vital to the process of rendering a web page. Sometimes these render blocking resources can take a while to load, blocking the browser from showing your website content until the download is complete.

There are multiple ways to reduce the impact of render blocking resources. Some include:

  • Moving non-critical files out of the critical render path, so they are not render blocking.
  • Decreasing the total number of render blocking resources by bundling resources together.
  • Reducing the size of render blocking resources (less data to load).

Padeo takes things a step further by predictively preloading critical resources that the next page will need. Padeo’s predictive preloading means that critical resources are already downloaded, so your website visitors spend less time waiting, and more time engaged with your website.


DNS Prefetching

When a browser requests a resource from a third party server (such as a different website’s server, or a CDN server where your website content lives), that third party server’s domain name must be resolved (matched) to an IP address before the browser can issue the request. This process is known as DNS resolution.

Resolving DNS requests uses very little bandwidth, but the latency (time) can be high, especially on mobile networks. This makes DNS requests a perfect candidate for prefetching since there is good payoff (significant time saved) and low cost (little bandwidth used). DNS prefetching is essentially figuring out the IP address of every link on a page before you click on it, so when you click a link, the DNS resolution has already happened and page loading time is reduced significantly.

Padeo’s DNS prefetching helps load your website content from a CDN server faster by doing DNS resolution in the background as the user browses your website. When a user clicks a link to another website from your website, DNS resolution has already happened, so they experience a faster page load which reflects well on your website too.

DNS resolution times are highly variable. The higher side of latency delays can be anywhere from half a second to several seconds. When it comes to page loads, one to two seconds is a massive time to wait. According to the Chromium Projects, browser DNS prefetching saves about 200 milliseconds (one fifth of a second) on average, but more importantly, it prevents the worst case delays of several seconds that cause many of your customers to abandon their browsing altogether.

Conclusion

Deciding how to appropriately and accurately preload resources on your website shouldn't be how your business uses your team's time and resources. With Padeo's predictive preloading service, your business can make more sales and more conversions on your website using an accurate, data-driven approach for making your website faster.

PLATFORMS

Every CMS. Every Website.
Padeo works for you.

No matter what CMS you're using, you can start using predictive preloading to make more sales on your website with Padeo.

INDUSTRIES

Every business needs a faster website.

No matter what industry you're in, you can start using predictive preloading to make more sales on your website with Padeo.

Make more sales with a faster website using Padeo

Start making more sales and more conversions on your exsting website with Padeo. Setup takes less than 5 minutes.

Join the Waitlist