The tech behind the USA TODAY NETWORK’s EU experience

The USA TODAY NETWORK launched a new experience at the end of May for users in the European Union. This experience, referred to as the USA TODAY NETWORK EU Experience, caught the eye of a few people on Twitter and Reddit because it’s fast. Really fast. This was not news to those developing the experience; there were quite a few conversations among the dev team about the raw performance.

Please note this post is NOT a guide for GDPR compliance and should not be considered legal advice. I’m just a developer, not a lawyer. This post only explains the tech stack behind the USA TODAY NETWORK’S EU Experience. Talk to a doctor if you experience any network requests lasting longer than four hours as this may be a sign of a more serious problem.

The primary difference noticed by many on social media was that we kept the front end tech simple. We did this because simple things should use simple tech. Web applications need heavy JavaScript frameworks, but this experience is not an application; it’s formatted text documents and an index. Although we did go old school with the choice of no JavaScript, we utilized some modern features from HTML and CSS. Features like sticky, positioned headers and responsive images can now be built with HTML picture tags and CSS rules. Five years ago, that meant writing a bunch of code or installing yet another jQuery plugin.

But there is an even bigger factor that did not get as much attention: the features. The EU Experience has very few features. Every feature added to a site adds to the size and level of complexity of the page. Features often have dependent features and that can make the weight of a change even heavier. For example, adding subsection index pages (“fronts” as we usually call them) means adding navigation to move between the home page and those subsections. Just adding a simple feature like subsections causes the page size to grow, even if the feature can be added using just HTML, CSS and server-side code.

The EU Experience contains no client-side features built in JavaScript, but there are a lot of good reasons to build features client-side — far too many to list and explain here. Nearly every modern major website uses client-side scripting because when done right, it can make a site’s user experience better. Getting it right for every user with every device is a significant challenge because of the wide range of performance capabilities of devices. If a user with a slow device on a slow network connection is sent every possible feature, that user is going to have a slow experience. The EU Experience shows how delivering fewer features can make even a slow device on a slow network have fast performance.

So the question becomes: What features does a site really need? That’s a very subjective question with no clear right answer. The solution is to measure which features get used so a number can be attached to each feature. That allows a site to decide with data, instead of just subjective feelings, which features add value and which just slow things down. Analytics services make this possible. On the standard experience, we take the performance hit of loading and running these scripts because the data they generate can guide us to building a faster site. The EU Experience collects no data, so decisions about feature development will be driven by the usage patterns of visitors to the standard experience.

And yes, ads play a part in the speed difference. Just running an ad blocker on a site is not enough to make the site as fast as the USA TODAY NETWORK EU Experience, as many people pointed out. It is the features of a site that play the biggest role in page speed in most cases. Debating the ethics, laws and tech of personalized ads is way out of scope of this post, and not something I’m qualified to write about, so I’m not going to try.

The EU Experience isn’t a new site; it’s a new theme powered by the USA TODAY NETWORK’s new responsive web framework. We can use this new platform to deliver stories in various formats: from our full featured mobile website to AMP, and, coming soon, Facebook Instant Articles and Apple News. This enables us to build new experiences and support new platforms faster and more consistently.

Building on this platform means the EU Experience is available on all 100+ websites within the USA TODAY NETWORK. It is served by the same containers, in the same kubernetes cluster, with the same CDN as our traditional web experience. The architecture and delivery is the same, but the amount of features is drastically different.

The EU Experience demonstrates how far the web platform has come by delivering content with a blend of tech from the past and the future. It is possible to make an accelerated instant article without new frameworks or standards, but that level of performance requires removing features that have a significant impact on user experience. The real goal is delivering the best user experience possible. This new experience shows the flexibility of our new web platform to try out new and cutting-edge storytelling, even if that means plain HTML, CSS and no JavaScript.