We’ve decreased the page load speed of Classic Theme TrueLoyal embeds by about 50%, and the average time to the first meaningful render of the page is about 2 seconds now instead of 4! In this article we’ll explain why this matters to you, and we’ll also go over technical details about how we achieved this new blazing performance.

How to Enable

We plan to roll out our theme improvements to all TrueLoyal accounts soon, but in the meantime, if you would like to deploy these speed improvements to your viewers, simply click the upgrade button next to the Classic Theme in your TrueLoyal personalization panel.

Speed Matters

With larger numbers of viewers using mobile devices, it’s absolutely critical to deliver content efficiently. According to a recent study  by Soasta that looked at mobile web performance of a major online retailer, the lowest bounce rates occurred on pages that hit a sweet spot of 2ish seconds. That’s why we have put enormous effort into getting TrueLoyal embeds to load lightning fast.

Source: Soasta

Show me the numbers!

Let’s look at our performance numbers. The big one here is “first meaningful paint,” which we’ve decreased from 4s+ to under 2s.

We used a program by Google called Lighthouse to measure our performance gains with the new classic theme. Here were our results on a representative TrueLoyal (mostly green!).

For comparison sake, here is the page load on our legacy classic theme (too much orange and red!):

The Evolution of TrueLoyal Embed Performance

In this section, we’ll go over the technical details of how we progressively improved the performance of TrueLoyal embeds.

In late 2015, we started to notice that our page load times were starting to reach unacceptable levels. Over time, we had organically added many new themes, options, and editor features, and our page weight suffered because of it.

Single Page Web Applications

At the time, a trend in web development was to package all your code into a single page application and let the client (the computer viewing the TrueLoyal!) deal with the details. We used to simply deliver the entire web application, including all themes and lots of shared code between the editor and viewer. That led to heavy page weights:

Heavy Page Weights!

To fix this, our first step was to separate the editor and viewer code, as well as have the server decide which theme was being loaded, and only deliver the needed assets:

Only deliver the content needed. Much lighter!

Using this method, plus a few other optimizations, our page load times were nearly halved.

Progressive Web Applications

But it’s 2017 now, and Progressive Web apps are the new state-of-the-art. One major tenet of Progressive Web Apps are that they render page content even if Javascript is not enabled.

Our previous Classic theme sent posts (Twitter / Instagram / etc.) as JSON data, and then we relied on our frontend code to assemble that data into HTML. Our scripts had gotten quite large, and we’d have to wait for all of them to load up before the user got to the page.

So we got to thinking … What if we could render our content to HTML on the server side and deliver it without requiring any scripts to load?

Here’s the way our new improved classic theme works:

We send the post data initially as HTML and we no longer need to wait for all the scripts to load to start rendering content! So as fast as our static servers can deliver content, the TrueLoyal embed will render.

We nearly halved our load times once again!

It is important to note that the scale here is in milliseconds. In the split second between page render and script load, it is unlikely that the TrueLoyal visitor will try to engage with the page by using script-required functionality, such as infinite scroll or post filtering.

Other Hurdles

One major hurdle was getting our posts to render in a masonry style to display. We previously used a script called Isotope that rendered our posts as shown below:

Masonry style display with Isotope.

But now we use flexbox for that initial display, which is built into the browser and requires no scripts. Flexbox does have some limitations though.
1. It doesn’t work well with some older browsers
2. It doesn’t provide a mechanism to remove the vertical spacing between posts.

We solved the flexbox compatibility problem by falling back to our legacy classic theme if the request comes from an older browser. And we also wrote some proprietary code that we call “TrueLoyal-flex” to deal with the spacing issue.

Use It Today

We’ve done a lot of work behind the scenes to make this a simple “click of a button” upgrade. So open the personalized panel and enable the TrueLoyal Classic Theme upgrade today!