In this article, I am going to break down how this blog works. When I started this project my main requirements were 1) developer experience, 2) performance and 3) simplicity.

Update July 2022: New blog theme

The stack

This blog is a Next.js application that is pulling in content from the Prezly CMS.

Using Next, you have a few options when it comes to page rendering: “on-demand” (server-side rendering) or ahead of time (static site generation). I've opted to build all the pages posts ahead of time when the site is generated (so on every deployment).

The site is deployed on Vercel (the company behind Next). The developer experience is awesome where it auto deploys the blog on every commit/merge to main.

For analytics I decided to use Plausible Analytics which took me 3 lines of code to set-up:

Content/CMS/Deployment

This all started as a big experiment while I was trying to figure out what we needed to do to make Prezly more developer-friendly. By trying to power an (external) blog with content written within the Prezly editor it would allow me to identify the parts of the chain that need more attention.

Every time I create or write a story in Prezly it triggers a Vercel webhook which in its turn generates+deploys the site.

Because of the limited number of blog posts the rebuild takes less than a minute:

Story Renderer

The Prezly editor stores content in a rich text format (and not HTML). This is a common practice in today's Content Management Systems as this allows for more flexibility when it comes to the rendering and management of that content. There is even a standard for it.

Here is a great article (2018) about the benefit of rich content types.

On Rich Text Editors

In Prezly's case, it means that content you write in a SlateJS powered editor is stored as a JSON object in our data store. That raw content object is fetchable through the API and we provide a renderer to then turn it into HTML.

So take this example content in Prezly:

The content (starting from hi %contact.firstname%) will be stored JSON:

Github Gist: Example email campaign (slateJS)

As we're using SlateJS as an editor you can read more about the content structure (not mobile doc) in their help article. Using the Prezly provided slate renderer the code that turns this JSON object into the HTML you are reading right now looks like this:

https://github.com/digitalbase/lifelog.be/blob/main/components/Article/Article.tsx#L36-L40

How content is rendered can be customised by feeding options into the renderer which I had to use to display code snippets (see below).

Other Pages

For other pages such as the home page, the list of blog posts and sitemap I used the Prezly Node SDK to do some very simple API fetching.

For example, the home page that lists the latest 3 articles (source code):

https://github.com/digitalbase/lifelog.be/blob/main/pages/index.tsx#L32-L42

Which by itself is just a simple wrapper to list content

https://github.com/digitalbase/lifelog.be/blob/fbb7d1d2fb56f0f2369b50e4606f975fbf49243a/src/providers/prezly.ts#L40-L63

Embedding Code Snippets

The Prezly supports embeds by making use of Iframely which natively supports github embeds (see JSON sample above). But if you have a lot of code to show off copy-pasting code into secret Github gists is cumbersome.

So I wanted to be able to show off code in a github repo or branch and Googling a solution for this got me to emgithub.com which looks to be exactly what I wanted.

Integrating the embed code in within the project was pretty clunky (dangerouslySetInnerHtml, embed.js being calls numberous times, ...) so decided to extract the code. Actually, my colleague did it for me.

https://github.com/digitalbase/lifelog.be/blob/main/components/GithubSnippet/GithubSnippet.tsx

So what the code is doing:

• fetching the raw github code (client side) using https://raw.githubusercontent.com
• use 'react-syntax-highlighter' to show a code pane
• add 'view raw' and 'copy to clipboard' functionality. Stole from stackoverflow

Styling

When it comes to styling I think I overdid it. I decided to use ChakraUI (as an experiment) but in the meanwhile I have been playing around with TailwindCSS (and more specifically with Just in Time generation). Now I want to throw out ChakraUI and switch to vanilla tailwind.

There are some upsides to using ChakraUI. For example, check out the source code for this hero component on the homepage:

Overall I feel using Chakra forced me to learn another syntax/way of doing things and I might be better off investing this time in properly learning TailwindCSS which can do the same stuff anyway.

Todo list

A list of things I want to do with the blog

• Use theme-starter boilerplate code to fetch content
• Score better on Lighthouse Audit tools
• Allow paging from home page
• Support Search
• Implement subscribe functionality (stay updated)
• Improve SEO/meta tags
• Add RSS feed (and any other feed protocols people use)
• Get rid of ChakraUI
• Make better use of Uploadcare.com (using uploadcare-image)
• Bring back sitemap.xml
• Fetch intro text from newsroom boilerplate (make customiseable)

In a previous post I tried to find the best newsroom based on unbiased signals such as search traffic, lighthouse scores, accessibility and page speed.

Now I'm interested in the ad stack of those newsrooms: Are they all using Google Analytics? Who is using segment.com and on average how many ad trackers can we detect?

Let's dive in.

By using a combination of Netcraft Site Report and two chrome plugins (Whatruns and Wappalyzer) i went through the top-20 sites one by one and filled in these columns:

• Frameworks: Detected frameworks both on server and client excluding things like modernizr, wordpress (see next column) or small client libraries
• CMS: Content Management System powering the site. In the era of Headless CMS sites, CDN's and better devops practices this is hard to spot
• Main Language: PHP vs ASP vs Python based on the framework used
• CDN: Content Delivery Network to speed up page serving globally. Not always detected
• Tracking: Ad-tech/Tracking libraries used detected by the chrome plugins.

The results

Screenshot of the results below but use this airtable link if you want to see the raw data

Learnings

It's only 20 sites but lets try and see if there is anything interesting to learn,

Frameworks and CDN

• Wordpress powers 7 of the top-20 newsrooms
• jQuery is on 13 of the top-20 newsrooms
• Bootstrap is on 4 of the top-20 newsrooms
• 2 sites are using Angular
• 1 site is using nextJs

Hosting & CDN

As expected the major CDN players are powering those sites with 35% Akamai and the rest evenly spread between CloudFront, Google CDN, fastly and such.

Four sites (Revolut, Walmart, Honda and SAP) did not show a CDN but they might be whitelabeled/custom CDN set-ups.

Web Servers are hard to see nowadays but I think it's safe to say that the majority of sites will be powered by Apache or Nginx. Nothing interesting here.

Ad Tracking

• 14 sites are using Google Analytics
• 7 using Google Tag Manager
• 5 using New Relic
• Usual suspects: FB, Twitter, LinkedIn pixels, Adobe SiteCatalyst or Analytics, ​
• Only one site (Apple) has no ad-tech/trackers
• Newsroom with the most trackers is Paypal with seven ad trackers
• Only one site that has privacy focussed analytics which is Paypal, but then they are running that besides Google Analytics

With help from Prezly colleagues, customers and twitter I now have a list of about 60 newsroom URLs from well-known brands, but which ones are the best?

In this post, I will explore different ways to score those newsrooms on their technical foundations. Obviously, a good newsroom is about a lot more than performance and accessibility but let's start with the basics.

Here are the criteria I will use to order the list:

• Lighthouse Score
  • Page Speed
  • Accessibility
  • Search Engine Friendliness
• Ahrefs.com data
  • Url Rating
  • Domain Rank
  • Referring domains
  • Search Traffic Estimate

Assigning weights to those different criteria and averaging it in a single number will result a pretty accurate score around the technical foundations.

Lighthouse Score

There is a great way to measure some web fundamentals (performance, accessibility, best practices and SEO) and it's called Lighthouse. It actually comes with every chrome install by opening dev tools and clicking the Lighthouse tab that allows you to generate a report of any site you visit:

Page Speed

A critical component in what makes a good newsroom is speed. Speed is the killer feature. Running a lighthouse score on the Nike newsroom for example would, at the time of writing (March 8, 2021) give you a score of 62% doing a performance audit with a mobile device:

Running the lighthouse audit for almost 100 newsrooms would take me too much time but there is a way to run the same audit through code (using node).

Here is the code I used to walk through all the newsrooms and run both a desktop and mobile audit and feed the scores back to the airtable sheet:

Github Gist: performance.js

Running the audit took about 30 minutes and did crash Chrome a few times while it was running. The average desktop performance score is 41% with the median being 39%. Not a single newsroom is scoring over 80% in desktop performance.

The fastest newsrooms on the list: Revolut, Airbnb, Walt Disney and Netflix. Not surprisingly all companies that understand the importance of speed

Gijs Nelissen on Twitter

Accessibility

A second way of scoring the sites is accessibility. Here is how w3c describes accessibility:

When websites and web tools are properly designed and coded, people with disabilities can use them. However, currently many sites and tools are developed with accessibility barriers that make them difficult or impossible for some people to use. Making the web accessible benefits individuals, businesses, and society. International web standards define what is needed for accessibility.

Lighthouse can score accessibility with the same audit tool returning a score that is a weighted average of a different set of accessibility audits. I used pretty much the same code to run both an accessibility and a SEO audit for all different newsrooms:

Github Gist: airtable_lighthouse.js

This audit took a lot less time to run. The audit was surprising as the top-3 was different from the performance audit with Nestle, Visa and Starbucks leading by example with +98% scores.

Gijs Nelissen on Twitter

Search Engine Optimalisation (SEO)

The time spent on small improvements that benefit the on-page SEO paints some kind of picture to what level of detail was spent on a site. Here is an example lighthouse audit of a site like the Starbucks story:

The code to run that audit is posted above and all the results are available in the airtable sheet. Facebook, Instagram (same engine?), and Airbnb all score 100% on SEO.

In the paragraphs below we'll be using ahrefs.com to go deeper into the SEO ranking.

Gijs Nelissen on Twitter

Averaging those tech scores here is the top-15 newsrooms so far:

Ahrefs.com

Ahrefs offers a set of tools allowing you to audit any site on the internet. From their website

Ahrefs is an All-in-one SEO toolset, with free Learning materials and a passionate Community & support

In our case we want to get a few indicators about the collected newsrooms. I could look at 50+ different data points but for the sake of simplicity I will keep it to these:

• URL Rating (UR) shows the strength of a page's link profile on a 100-point scale. The bigger the number, the stronger a page's link profile is.
• Domain Rating (DR) shows the strength of a website's backlink profile compared to the others in hrefs database on a 100-point scale.
• Referring domains are websites from which the target website or web page has one or more backlinks. For example, if a web page has a backlink from the New York Times, then it has one referring domain. If it has a link from the New York Times and Forbes, that it has two referring domains. If it has two backlinks from the New York Times, then it still has one referring domain.
• Search Traffic Estimate is an ahrefs.com estimation of how much organic search traffic your target website, subfolder or URL gets each month.

As I don't want to fill in those numbers in the Airtable I upgraded to an Ahrefs.com API subscription and pulled in the data. Here is the code:

Github Gist: ahref_airtable.js

I know I can make this script much faster by parallelizing the request (feel free to suggest!) but my brain doesn't function well in an asynchronous world 🤯

URL and Domain Rating

Clear winners in URL and Domain rating are Apple, Facebook and Youtube. In this case, I believe online/technology brands have a clear advantage over their 'offline' counterparts.

While the bottom of the list has more what i call 'offline' brands such as Pepsi, Ford, Budweiser or Nestle. Small surprise in that bottom 20: Google and Microsoft 😬

Referring Domains

I have normalised the absolute domains (count of absolute domains linking to this page) to a percentage value. Apple has an astonishing 26 000 domains linking to their newsroom and facebook 14 000).

Because Google and Microsoft are at the bottom of the list I am suspecting something is wrong with the crawled ahref data.

Search Traffic Estimate

The search traffic estimate is an interesting number but not reliable for the final rankings. Ahrefs tries to guess the number of visitors/month the newsroom would receive by using SERP rankings and other SEO signals.

The median of all newsrooms is 540 visitors/month. Most newsrooms are in the same ballpark but outperforming everyone else in the list are Facebook with 14 million visitors/month and Youtube approaching 3 million visitors/month.

I will not use the search traffic estimate in the final summary as I noticed it wasn't trustworthy. 14 million?!

Summarizing

To summarise all this I decided to add weight to the different criteria.

• Lighthouse Score (60%)
  • Page Speed (70%)
  • Accessibility (20%)
  • Search Engine Friendliness (10%) -> also in ahrefs.com
• Ahrefs.com data (40%)
  • URL Rating (60%)
  • Domain Rank (10%)
  • Referring domains (30%)

Overall Lighthouse is taking 60% of the final score while ahref.com data gets 40%.

The results

It took a while to apply the weights in the Airtable formulas but I got there in the end.

At the moment of writing here is a list of the best 10 newsrooms based on the criteria and code outlined in this post:

Want to suggest another newsroom to include? Please suggest it

While I'm searching for inspiration to design, build and integrate the best possible newsroom in Prezly I wanted to share the plans on how we're want to do this.

We want to include our customers and anyone that is interested in building customer newsrooms in the process. I believe this transparency will result in greater overall quality and hey, maybe we'll get the attention of a big brand or awesome designer while we're at it.

Open-Source

One of the key goals is to make the whole project open-source. That starts with picking the right license for all the work after which we'll open-source the entire thing. That includes:

• Wireframes
• Figma Files
• Scope documents
• The codebase

A side effect of this approach is that customers that want to modify their newsroom experience can do so by starting with one of our base themes. It also means bugs and improvements can now be made by more than the Prezly newsroom team 🎉.

Self-Host

Today all of the newsroom code is heavily tied into our monolith. We've chosen a multi-tenancy approach where a single codebase powers all (10 000+) newsrooms. The difficulty with this approach is that any customisation for a single customer or base themes has to go through the main repository. This also prevents us from collaborating with customers when it comes to theming.

Another goal in this project is to allow customers, or anyone interested in using the theme to self-host their newsroom on existing infrastructure, Vercel, Netlify or any other preferred host can do so.

Awesome DX

The ecosystem around frontend development is changing at a rapid pace. I believe a critical ingredient of involving themes and developers in the ecosystem is to have a world-class developer experience.

An excellent experience while working on a theme means has to have things like hot reloading, super-fast local environment, easy installation and enough freedom around theming choices such as which framework to use.

Outside of the pure developer experience, there are a lot of things we can do to make Prezly more enjoyable for developers such as improving API docs, providing different SDKs, reliable documentation, starter kits and interactive tutorials.

Break up in phases

It would be arrogant to believe that we'll come up with the best solution for any newsroom use case. Here is an incomplete list of the functionality we currently support:

• 60 Languages (i18n localisation)
• Gallery functionality
• Categories and Tags
• CSS/JS customisation
• Segment.com, Google Analytics, GTM, Google webmaster support
• Attachments and Contact Cards
• Search
• Embedding tweets, instagram or other embeddable content
• Sharing buttons + short urls
• Subscribe functionality
• Cookie bar + GDPR tools

To give us enough freedom to experiment and focus on user experience we're breaking this project up into different phases. By not worrying about how a cookie bar or language switcher is ultimately going to come about we're hoping we can catch more speed and work in some kind of an MVP approach.

To allow for that the different themes need to be aware of all the functionality they support to prevent customers from enabling a theme that does not support the functionality they need.

Let me know what you think!

Is 'newsroom expert' a job title? In the last 8 years, I have been involved in planning, designing, building, migrating and hosting a lot of newsrooms. From small startups and NGO's all the way up to large brands like Sennheiser, AXA or Shopify.

Within Prezly we offer three newsroom themes that I'm not super proud of. The first one has been there for almost 8 years with minimal maintenance and upgrades. In fact, some of our clients have customised newsrooms that are notably better than we offer our customer base.

In the next 3 months, we're going to fix that.

Examples / Inspiration

To prepare for this project I wanted to get some inspiration from the best newsrooms out there. Googling my favourite brands with search queries like 'Apple newsroom' or 'Red Bull newsroom' turned out to be really underwhelming.

What are we looking for?

What is a newsroom? A website with a list of news items/stories listed in chronological order? So like a blog? Or a magazine?

Please help by suggesting the newsrooms you really like.

Use Cases

Looking at the use cases of Prezly I've split the research into three different use-cases:

1. Brand newsroom: Site with a listing of important company news and stories
2. Blog: A lot like a newsroom (1) but more focus on text and author.
3. Other: Anything else that is about some kind of chronological listing of content. For example a website to announce podcast episodes, or a cooking blog.

Brand Newsroom

To research brand newsrooms I used the top 50 most valuable global brands together with the 500 favorite Millennial brands to search for relevant results. All the newsrooms that are noteworthy were added to an airtable sheet with a rough rating to do more research later.

It might surprise you but the results browsing through all those newsrooms were really underwhelming. To prove it lets take the 10 most valuable global brands with their main newsrooms:

• Apple - www.apple.com/newsroom
• Amazon - press.aboutamazon.com
• Microsoft - news.microsoft.com
• Google - www.blog.google
• Samsung - news.samsung.com/global
• Coca-Cola - www.coca-colacompany.com/news
• Toyota - global.toyota/en/newsroom
• Mercedes - www.mercedes-benz.com/en/newsroom
• McDonald's - corporate.mcdonalds.com/corpmcd/our-stories.html
• Disney - thewaltdisneycompany.com/news

Only a few of those check all the boxes when it comes to design, content organisation and performance. But we haven't even talked about performance, accessibility or privacy controls.

I am looking for more examples of good looking Brand newsrooms. Please help by suggesting your own in this form.
​

All research (Lighthouse scores, Design rating, Accessibility score) will be shared in this open spreadsheet.