Case Study: PINT, Inc. Progressive Web App

To give our users a better web experience, we reconfigured the PINT site as a Progressive Web App (PWA). PWA technology helped us have a faster site that keeps users engaged.

• 14% faster average page load
• 8% decrease in bounce rate
• 25% increase in average visit duration

Client: PINT, Inc.
Location: San Diego
Industry: Web Development
PINT Services: Front-end development, Quality Assurance, Security Consulting
Technology: Web Components via Polymer, Google App Engine Hosting & Deployment

Challenge

Since the last PINT, Inc. website redesign, Progressive Web App technologies and processes have emerged which can give users faster and better site experiences. PINT needed to reconfigure its site to take advantage of these new PWA technologies which would provide:

• Faster load times
• Better overall site experience
• Increased accessibility
• Stricter adherence to best practices
• Offline Capabilities
• Save to home screen feature

Solution

We reconfigured the PINT site to be a PWA. PWAs come in many different flavors. While PWAs may seem like a very binary state, a “you have it or you don’t”, they’re mostly an approach to building websites and web apps. We modeled our approach off the almighty Google and achieved considerable success.

Infrastructure Changes

We built our servers with Python as light Flask applications on Google’s App Engine infrastructure. The tried-and-tested nature of Python and Flask ensured our server code was easy to write, debug, and test.

By choosing App Engine for our server hosting, we were able to ensure near 100% uptime with no additional configuration on our end. The result is a fast, consistent, and terse server with an average latency of less than 50ms!

Lots of the talk surrounding PWAs has purely to do with client-side tech (computer applications like browsers). While proper client-side implementation is crucial, having a server with reliable uptime and super speedy response time is the first step because it ensures our users will always be able to load our site.

Custom HTML Changes

We opted to use web components and implement them with Polymer, one of Google’s front-end frameworks. Polymer made it easy for us to create modular components that both rendered quickly and were reusable across multiple projects. That’s a win!

Web components are a new-ish and exciting addition to the web. Web components are quite literally custom HTML tags. They allow developers to make custom elements that can accomplish any variety of task.

For example, on the PINT site we created a web component called . This component allows us to easily show information about our employees, including name, title, their LinkedIn profile, and a picture of them. It allows us to turn relatively complex markup into something simple and easy to work with. Here’s what we would have for every employee without web components:

…and here’s what we have instead through the power of web components:

So much simpler, easy to read, and waaaay easier to duplicate  whenever we hire fantastic new employees.

Platform Changes

One of the main browser APIs we’ve taken advantage of for the PINT site are service workers. Service workers allow our website to have fine-grained control of what content is cached and how it is cached. What that means for the end user is near instantaneous loads on repeat visits to our site and… get ready for this… offline support.

Visitors can view the PINT site on repeat visits without a need for an internet connection. That’s great news for any data-conscious users, users with poor connectivity, or even users with no internet connection whatsoever.

The web platform is exciting. New browser APIs are adding more built-in functionality and making it easier to build feature-rich web sites and web applications.

Results

It’s been two months since we made the initial switch to PWA tools and technology. What has all of this behind-the-scenes work gotten us?

Faster Site

All pages on the site load within an average .42 seconds – this is 14% faster than before.

As you can see above, we’ve continually reduced the amount of time it takes for our site to load and be interactive.

Fewer Bounces

Our bounce rate decreased by 8% – from 66% to 58%.

More Time on Site

The average visit duration increased by 25%.

More Interactions

Even though the total number of visits dropped by 11%, the number of pageviews** per visit increased by 14%**, meaning users who did come to the site spent more time interacting. In fact, our actions per visit increased by 25%.

Improved Lighthouse Scores

Lighthouse is the standard scoring system for Progressive Web Apps, Performance, Accessibility, and Best Practices. Through Lighthouse, we found improvements that made our site faster, easier to use, and universally accessible.

After addressing those issues, we now have Lighthouse scores in the high 90s or 100!

As Lighthouse continually updates their scoring system to reflect new features, technologies, and best practices, our score will fluctuate.

We’re constantly striving to make our site the best it can be, and we’d like to do the same for you. If you think your site could benefit from utilizing PWA technology, let us know.