A New Web Performance Tool: Quick Performance Testing at your Fingertips
Overview
PerfBuddy is a tool that provides easily digestible performance and accessibility reports that your organization can understand.
PerfBuddy does the hard work for you to translate technical jargon into plain language that's approachable to everyone.
Services Provided
This was a greenfield project that we designed, developed, and brought to market.
Tech-stack
This Dot Labs is a development consultancy focused on providing staff augmentation, architectural guidance, and consulting to companies.
We help implement and teach modern web best practices with technologies such as React, Angular, Vue, Web Components, GraphQL, Node, and more.
PerfBuddy helps organizations understand the impact of bad web performance with in-depth reports that allow teams to identify and advocate for key areas of improvement, and structure the work necessary to improve conversions.
Quick and Easy Web Performance
Web performance metrics should be at the tip of anyone’s fingertips.
Being able to share a report that business leaders can understand is an invaluable tool all teams should have.
How Do You Use PerfBuddy?
A performance report can be generated with the click of a button. The report helps stakeholders understand the necessity of investing development cycles into improving performance, and provides a roadmap for teams to tackle immediately.
Optimizing Upstream Communication for Development Teams
Similar performance testing and analysis products are available, but they all lack the ability to easily summarize and contextualize metrics to effectively communicate upstream.
PerfBuddy offers:
- Performance overview and high-level scores with easily digestible summaries.
- Detailed metrics with clear explanations about performance, accessibility, SEO, etc.
- A report that someone with no development experience can understand.
- Extra content and case studies to show benefits of performance.
PerfBuddy Technologies of Choice
- The This Dot Labs team chose to build the project’s frontend using NextJS with TailwindCSS.
- PerfBuddy hosts mostly static content, which helps optimize SEO, but also needed to optimally display dynamic content generated within user reports.
- NextJS permits this flexibility, and Tailwind was selected to help unify our style system and keep the UI looking clean and consistent.
- PerfBuddy’s backend uses AWS Amplify’s REST endpoints with DynamoDB. This gives us a data store that easily complies with GDPR needs and allows us to quickly deploy and manipulate endpoints.
- We’re using a service called Microlink (https://microlink.io) to generate the Lighthouse data reports. Eventually, we’ll either help expand their offering, or rebuild using the Chrome Webdriver, depending on the future roadmap of PerfBuddy.
- We employed Brad Frost’s atomic design to help us plan and implement our design system so building larger components, as needed, would be easier. This also allows us to isolate core business logic in our UI to help reduce risk to the remainder of the system, allowing for easier redesigns.
Optimal Team Design for Interchangeable Workforce
PerfBuddy has been a project exposed to many developers who may not work on it consistently, like many projects in enterprise organizations.
To help our team manage this, we broke up the development process into 1-2 hour identifiable segments that enabled individuals to contribute when available, while not getting stuck in long debugging, or critical thinking paths.
PerfBuddy is a great example of a customer facing product created by our team from the ground up. Whether you are looking to modernize an existing product, or bring a new idea to market, let us help you deliver excellence.
Let's see how This Dot can help you
Are you looking for a development consulting firm that can provide staff augmentation, architectural guidance, and consulting to your company? Look no further than This Dot Labs. Our team of experienced developers and managers can help you implement and teach modern web best practices, and deliver your projects on time and within budget. Contact us today to learn more about our services and how we can help you achieve your development goals.
You might also like
Portfolio
Our clients are building for the future. Explore This Dot Labs' portfolio, and see how we have helped them achieve their diverse technical goals.
Building a Web 3 Ecosystem: Chainlink and This Dot Labs Deliver a Comprehensive Resource for Developers
topics covered in this case study:
In collaboration with Chainlink Labs, This Dot Labs both designed and developed the Ecosystem Map application with the goal of delivering a product that could scale to feature a large number of resources while remaining simple to navigate, fully responsive, and accessible.
Defining a component library with MDX for content creators
topics covered in this case study:
This Dot Labs was hired by the ReactJS team at Meta (formerly Facebook) to upgrade the React documentation site and modernize it with interactive guides and clearer API documentation.
- See full portfolio