A PWA for PVD Geeks: A Case Study in Performance, pt. 1
Part of developing any good web application requires understanding what the experience is like for end users. More than just making sure “everything works” and looks good, loading and performance should also be key factors in delivering engaging and pleasant user experiences that will encourage your users to stay and, more importantly, come back.
As the reach of the internet grows so will its user base, but not every user’s connection and device is the same. Emerging markets often offer less than ideal network conditions and device capabilities are hard to anticipate across the board, with an ever increasing amount of these new connections originating from mobile devices.
A great example of development practices rising up to meet this challenge can be seen with the adoption of responsive design, which aims to match the user with a layout and presentation of a given application based not on device type (e.g. not doing User-Agent sniffing) but instead by adapting the layout based on the user’s screen size, while still being able to deliver core features and content
On top of all of these new demographic challenges, is the need to understand user perception and patience. As reported in an analysis by Google on mobile user expectations, if your application is slow to load, users will abandon your site.
While our development tools have come a long way in helping us build and develop more feature rich web applications, it is easy as developers and designers to suffer from a “detached” anecdotal developer experience, provided by our powerful laptops and high-speed network conditions in our offices and homes. However, production like environments are often a complex set of configurations and conditions that can be cumbersome (or costly) to set up locally and so access to a developer to reproduce all those unique conditions can be tricky. Thus, developers tend to only experience the application running in the most ideal and “happy” conditions.
A beacon on the horizon
So great! We’ve come to realize performance and the technical execution and delivery of our web applications is important to all our users and the viability of the product itself. Just as importantly, we want to be empowered as developers and creators with a process that is principled, clear in its feedback and is easy (relatively) to digest and implement as not every solution will be limited to just code changes, and implementation details will be distinct from application to application.
Wouldn’t it be great if we could get a tool to help us with this though? What would it look like and what could it do for us? 🤔
- Ensure high performance web applications that feel native.
- Promote well built and optimized web applications that feel native.
- Identify best practices for ensuring good experiences across all browser and device types, even with offline capabilities.
- Tooling that is evergreen by design to adapts as user trends or external conditions change (phones get better, wider reach of high-speed internet, etc).
- Good developer experience in the form of clear feedback and documentation with action items on how to resolve issues.
- Ease of integration into a Continuous Integration / Continuous Delivery (CI / CD) pipeline.
This is where Lighthouse comes in. Developed by Google and part of Chrome DevTools (as well as a Chrome Extension and npm module), Lighthouse provides developers an auditing and profiling tool to check how an application scores against four categories:
- Progressive Web Application (PWA): A philosophy in application development that subscribes to ensuring engaging and performant experiences for users of any device or connection. In particular acknowledging that being competitive means being able to load reasonably well (less than 3 seconds) on a 3G connection on a lower end device, supporting offline capabilities, and push notifications (to name a few).
- Performance: Rules for scoring how quickly an application gets to various stages of presentation and interactivity and how that contributes to (or detracts!) from user experience / engagement.
- Accessibility: Making sure an application is accessible to all users, like those with screen readers.
- Best Practices: Generally accepted modern practices for application development and avoiding common pitfalls.
For example, this is what a Lighthouse report score summary look like, as run against GitHub.com
The full report provides a breakdown of specific recommendations available in each of those categories that can be made for your specific application. For example, here are the PWA recommendations for GitHub.com.
It should be noted that the PWA category overlaps with a lot of other practices, so even if you aren’t intending to specifically make a PWA now or saving it for later (like I am!), chances are focusing on getting high scores in the other 3 categories will contribute to that score organically. So yeah, that’s pretty sweet, right?! 👍
For a great exposition on the history of getting to Progressive Web Applications, I highly recommend this video from my co-worker Craig Freeman.
Providence Geeks
The inspiration for this article series came from my own work helping to build a new website for the local Rhode Island community Providence Geeks. Kenzan (my employer) had established a relationship with the groups leaders Brian Jepson and Joel Evans to rebuild and rebrand the website as a way to give back to the community and to provide an open source project that anyone could contribute to.
I took this article series on as a personal side-project, as a way to give back to the community myself and as learning opportunity to familiarize myself with website performance and how browsers render web pages, and then be able to apply this knowledge to the new Providence Geeks website.
Turning on the Light 💡
If you haven’t already run Lighthouse against your web application I recommend you do so, I bet you’ll be surprised! I know I was when I tested the Providence Geeks website, which I thought was pretty small and modest (code wise) and would certainly at least score in the performance category.
Go ahead, I’ll wait.
So, are you curious to learn more? If so, in the second installment of this series I will be discussing the tech stack of the Providence Geeks website and sharing the first few steps in my personal roadmap towards using Lighthouse to help build a performant and enjoyable Progressive Web Application. 👌
Feel free to tweet me your Lighhouse score, I’d be happy to help if you have any questions!
