Lighthouse Performance

A real-world study of healthcare and the need to increase Lighthouse performance.

Website Performance Improvement
Google Lighthouse
Confidentiality

Problem Definition

When we first sat down with 'Frank', the CIO of a Major Healthcare Organization ("MHO") that for confidentiality reasons we cannot name, you could feel the tension in the room.

MHO faced a major challenge as all 48 hospital network websites were scoring less than 3 on the Google Lighthouse performance audit. Ordinarily, we were not in the habit of overreacting to Google announcements, but this one was different. We all knew the implication; MHO's mobile search rankings were about to plummet if we did not fix the sites and fast.

Many suggestions had been proposed up this point including the current course of action which consisted largely of 'let’s ignore the problem and hope it goes away'. MHO had already exhausted every “magic bullet” they could find including a failed attempt with a vendor claiming they could simply rehost the site and fix all the problems on the fly.

In typical Frank style, he dove into the heart of the matter and encapsulated the real issues in one sentence. MHO needed to "future-proof" their website would fix the current problems, but also make the system flexible enough that future issues wouldn't be such a problem.

Eventually, we all agreed the only solution was to address all the major issues that the Lighthouse Audit was complaining about which meant re-architecting all 48 sites. However, we had been collecting valuable content over the past 5+ years on a very stable enterprise Content Management System (CMS) and knew we did not want to lose any of that valuable information. In order to future-proof the websites we opted to tackle the following:

Bridge the content gap from over 100 different departments within the organization
Give more control to Marketing over the look & feel of every site
Create noticeably faster websites and measure the performance gain
Make the sites easier to use for our patients
Connect the data dots and provide a more complete patient journey

Solution

Our Approach

Our approach to redesigning the sites consisted of the following steps:

We expanded the existing Content Management System and utilized services to deliver much of the website content eliminating our first performance bottleneck. This approach is commonly referred to as “headless”, “multi-channel” or “decoupled” content management. This allowed us to bridge the content gap and leverage existing content from over 100 different departments within the organization.
In order to future-proof the system we admitted to ourselves there will eventually be a better and faster Content Management Systems with more Machine Learning capabilities built-in. New digital streams become available every day as people bring more and more internet devices into their homes and lives. We architected the new site in such a way that we are loosely coupled with the CMS platform and loosely coupled with the delivery channel. Switching out the Content Management System as well as adding new front-ends now becomes possible measured in weeks not years.
Re-architecting the front-end to raise all Google Lighthouse Scores to 90+ with a primary focus on performance. We utilized the latest architecture techniques including a streamlined headless front-end and incorporating microservices for hospital data. This approach eliminated all the CMS HTML bloat of the previous site but allowed us to keep the existing CMS platform. The website front-end became what can only be described as “snappy”, leading to better customer retention and less site abandonment.
Changing the website architecture allows for auto-scaling and auto-tuning which can be hosted anywhere either on premises, in the cloud, or both. This helps reduce costs as MHO would only pay for server space as needed; thus, eliminating excess servers and network connections as a potential performance bottleneck.
We set up test harnesses to measure all of our key metrics which went beyond just the basic Google Lighthouse Scores, but also included other areas such as lines of code, network speed tests, and load tests. This allows us to continually monitor scores so that if Development changes code or Marketing changes content, we are alerted in real-time if our metrics are off. This allows is issues to be corrected immediately before they negatively impact website search rankings.

We knew the site HTML, CSS and JavaScript were too bloated and had to be rewritten or replaced with more efficient frameworks. We evaluate dozens of JavaScript and CSS frameworks -- some are better performers than others.

In this case, we chose Tailwind for the front-end display framework because it is a pure HTML and CSS-based visual framework and does not rely on any JavaScript tricks for display logic. We then chose Vue.JS for our client's inactivity logic as this seemed to be the perfect blend of easy-to-use and ultra-performant.

Business Benefit

Project kickoff started after a few planning sessions. The design team then utilized the bulk of the schedule and delivered their approved designs in May. Our priority was to plan the system correctly up-front so we would know what we were building. However, we also to ensure that it was designed correctly, be easy to use, and perform well for MHO's patients.

Development and QA took the project over from Design after 2 months and were able to hit the deadline by building and testing the site in under three months. We broke down the design and leveraged our two new frameworks and drastically reduced the amount of HTML, CSS, and JavaScript being sent to the end users’ devices.

The performance score rose from under 3 to consistently ranking at 95!! Site interactive time went from 22.7 seconds down to 3.5 seconds. Our other four category scores also improved to over 90 as well in the process. MHO was thrilled with the results, particularly since most healthcare companies have yet to go through a similar exercise. As of writing this article, MHO is still the best performer in Google Performance compared to their peers (many of whom are still scoring below 30). We are pleased to report that not only were we able to get all the Google Lighthouse Scores above 90 but we did the project in half the original development time allotted and on budget. We couldn’t have asked for a better outcome of a project of this magnitude.

Next Steps

Now you may be asking yourself, do performance scores really matter?

According to Google, they sure do!

We were fortunate enough to work directly with the folks at Google, and though their algorithm is a tightly guarded secret, they have confirmed that site load time is one of the major factors to mobile search rankings. It makes sense, as how many people will wait 22.7 seconds on a mobile device for a site to load? (That's like singing Twinkle Twinkle Little Star to yourself).

In this case it was easy to measure and the abandonment rate for customers, which had drastically reduced since we launched the new site.

If you are interested in learning more about the specifics of this project and how REDEVTION helped one of the world’s leading healthcare providers raise all of their Google Lighthouse scores to above 90, please contact us today. We provide comprehensive audits of your websites that includes the Google Lighthouse measurements and much more as:

Security Vulnerability Scan
Google Lighthouse Scores
Performance Bottlenecks
SEO Recommendations
ADA Compliance Check

Get in Touch

Let us know how we can help your business grow!

fill out the form and we will contact you shortly!

REIMAGINING DEVELOPMENT SOLUTIONS