Daniel Liem

Recruiting Referral Bonus Program | Pesto

Doug Safreno

Over the past year, our React-based web app performance slowly degraded from bad
to horrible. We had no clue why, and we wasted a lot of time optimizing React
code. However, it turned out our issue didn't have to do with React at all, and
instead was due to the way we used SVGs and their impact on the DOM node count.

In this post, I'll explain how we diagnosed the issue and fixed it, dramatically
improving our web app's performance.

Basic actions in our app were taking forever
"Performance" can mean a lot of things, but in our case, the issue was very
concrete: relatively basic actions in the app, like switching rooms or opening
settings, were taking anywhere from a few seconds to tens of seconds.

Investigating with the Chrome Developer Tools
I started by Googling "web app performance," and most of the results were pretty
useless or were quickly proved irrelevant.

I then tried Google Chrome's developer tools for optimizing performance. I setup
my localhost to point at our prod infrastructure and ran some analysis using our
own production Pesto team.

I didn't make much progress on the performance or memory tabs, but on a whim
decided to try Lighthouse, Google Chrome's tool for optimizing your site for
SEO. Most of the issues had to do with page load (worth noting, but not the core
issue at hand) but one did not - "Avoid an excessive DOM size."

Lighthouse was reporting that our app had 5,422 elements. Chrome's guidelines
recommend no more than 1,500. Very interesting...

To experiment more quickly, I installed this Chrome extension
[https://chrome.google.com/webstore/detail/dom-analyzer/hjaomadfoogedimonbneolajleaneifj?hl=en] 
to look at DOM node sizes. 

When I removed avatars, our node counts dropped from 5,412 to 1,056, and the app
became noticeably snappier.

Problem found! But avatars are core to our app. How would we make them work?

Solution
At the time, our avatars were rendered in React by stitching together the SVG in
the DOM. 

Instead, I decided to try loading in the SVG by using an <img> tag with the
source pointing at the SVG.

It worked! The DOM size stayed relatively low (1389):

And Pesto got much faster.

Future work
Since this was implemented, we also improved our DOM nodes further by removing
off screen nodes. We can still shave DOM nodes in many places, and we have
planned future projects to do so.

What is Pesto?
Pesto is the digitally native, authentically human workplace. In Pesto, you and
your teammates customize your own avatars and virtually meet in customizable
rooms. Try it out - it's free!

We dramatically improved our web app performance by making SVGs use way fewer DOM nodes

We just raised $5M [https://pesto.app/blog/seed] and are supporting over 10,000
teams... but we're only 8 people. This is unsustainable - that's why we're
hiring.

This time, we’re excited to announce our first ever external recruiting referral
program!

If you refer someone we successfully hire (meaning: they accept our offer to
join Pesto), you have the option to choose the following:

 * 💰 $10,000 cash bonus
 * 📈 "right to invest" in our next round (must be accredited). To clarify: you
   are responsible for your own cost basis

In order to qualify for a referral:

 1. You must introduce the candidate to us via email, text, or some other form
    of communication that provides evidence of a paper trail
 2. The candidate cannot be a personal connection to a current Pesto employee,
    they must be a new connection
 3. Additionally, if a Pesto employee has reached out to the candidate on their
    own for hiring purposes, you cannot suddenly claim you are a referrer of
    that candidate to capitalize the opportunity. You must have referred them 
    before we reached out on our own
 4. Simply providing a list of potential candidates for us to reach out to does
    not qualify as a referral


--------------------------------------------------------------------------------

Here’s why we’re doing this:

 1. We want incentives to align. We know finding great talent in today’s market
    takes time and hard work.
 2. We think it’s only fair to compensate you if you help us. It’s a triple win
    after all - for us, for you, and for the potential hire!
 3. We want folks who believe in us and the long-term potential of Pesto and
    remote work, and we can’t cultivate this community alone

Right now, we’re hiring for the following: https://pesto.app/blog/jobs

🖌️Product Designer #1 [https://pesto.app/blog/jobs#designer]
⚒️Software Engineers [https://pesto.app/blog/jobs#engineer]

Today, we’re a team of 8 that is fully distributed across the US. If you or
anyone you know is just as excited about building a more digitally native,
authentically human workplace with us, send us a message at jobs@pesto.app


--------------------------------------------------------------------------------

Special thanks to Justine Palefsky at Kindred Homes for letting us borrow this
whole idea! ☺️