}

Our Work

Our Work

Case Studies

Lighthouse Performance in Healthcare

Client Name Confidential

Location United States

Category Performance

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

The Challenge

Bad Lighthouse Score

When we first sat down with Frank, the CIO of a major Healthcare Organization, you could feel the tension in the room. We were facing a major challenge as all 48 of our hospital network sites were scoring less than 3 on 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; our 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 our current course of action which consisted largely of let’s ignore the problem and hope it goes away. We had already exhausted every “magic bullet” we could find including a failed attempt with vendors that claimed they could simply rehost our site and fix all the problems on the fly.

In typical Frank style, he dove into the heart of the matter and encapsulated our real issues in one sentence. We need to "future-proof" our website so that not only do we fix the problems of today, but we make the system flexible enough we can quickly fix the problems of the future.

Eventually, we all agreed the only solution was to address all the major issues that the Lighthouse Audit was complaining about which meant rearchitecting 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

 

Our Approach

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

  1. 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.
  2. 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.
  3. We rearchitect the front-end to raise all Google Lighthouse Scores to a 90 or above with primary focus on performance. We utilized 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.
  4. Changed the website architecture to allow for auto scaling and auto tuning which can be hosted anywhere either on premises, in the cloud, or both. This helps reduce costs as we only pay for server space we need at the time; thus, eliminating the servers and network as a potential performance bottleneck.
  5. We setup 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 that if Development changes code or Marketing changes content, we are alerted in real-time if our metrics are off allowing us to correct the issues immediately before it negatively impacts our search rankings.

We knew the site HTML, CSS and JavaScript was just too bloated and had to be rewritten or replaced with more efficient frameworks. We evaluate dozens of JavaScript and CSS frameworks. While I personally remain agnostic to front-end frameworks, we absolutely discovered that some are better performers than others.

In our 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 inactivity logic as this seemed to be the perfect blend of easy to use and ultra-performant.

Business Benefits

Project kickoff started in February after a few planning sessions. Design then utilized the bulk of the schedule and delivered their approved designs in May. It was very important to plan the system correctly up-front so we would know what we were building, but also to ensure that it was designed correctly, be easy to use and perform well for our patients.

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

The performance score 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. The business was thrilled with the results, particularly since most healthcare companies have yet to go through a similar exercise. As of writing this article, we are still the best performer in Google Performance compared to our peers many of whom are still scoring below 30.

I am 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. I couldn’t have asked for a better outcome of a project of this magnitude.

 

good lighthouse score

Next Steps

Now you may be asking yourself, does a performance increase really matter? According to Google, it sure does. 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 our site to display and be usable. In our case it was easy to measure and the abandonment rate for customers and drastically reduced since we launched the new site and if you will indulge me a little paraphrasing we receive feedback daily on the order of “your site is so much faster now…”

If you are interested in learning more about the specifics of this project and how we helped one of the world’s leading healthcare provider raise all of their Google Lighthouse scores to above 90, please contact us today.

We are happy to provide a free comprehensive audit of your websites that includes the Google Lighthouse measurements and much more. The audit consists of the following areas:

  1. Security Vulnerability Scan
  2. Google Lighthouse Scores
  3. Performance Bottlenecks
  4. SEO Recommendations
  5. ADA Compliancy Check