3perf/website

The site of PerfPerfPerf, a web performance consulting agency

3perf.com

This is the source code for 3perf.com, a site of PerfPerfPerf, a performance consulting agency.

How to run website locally

1. Clone the repository:

   git clone --recurse-submodules [email protected]:3perf/website.git
   cd website

2. Install node_modules using yarn:

   yarn

3. Run a local development server:

   yarn develop

website's Issues

Add Chris’ photo to the contact section

Challenge

We have a new team member – Chris – who’s helping PerfPerfPerf with sales. Historically, I’ve been leading communication with all prospects, but now there’re some prospects he’s managing instead.

This means the “Talk to us” section (in the end of https://3perf.com) is outdated. Specifically, the section says “Ivan will reply”, but that’s no longer correct – it’s “Ivan or Chris” now.

It would be great to update the section to make sure we don’t confuse prospects when Chris replies to them instead of me.

Suggested solution

- ...Ivan will get back...
+ ...Ivan or Chris will get back...

Feel free to take Chris’ photo from his LinkedIn.

Update links in the header and the article footer

Challenge

For a while, I’ve been calling my articles “Articles” or “Content”. Turns out that’s not the smartest approach. For example, patio11 recommends to avoid using generic “Content” and use concrete “Case studies” or “Guides” instead – as that communicates the value of the content better.

Steps to take

#53 was the first PR to address this. It added a bunch of twitter threads and categorised all links into “Guides”, “Case studies” and etc.

However, I see a few additional places where we could leverage that advice:

• Navigation: rename “Articles” to “Case Studies & Guides”

• Navigation: rename “Cases” to “Client Stories” (why? with “Articles” renamed to “Case Studies ...”, “Cases” would be too similar to that and confusing)

• Navigation: rename “About us” to “About Us” (why? for consistent casing that follows English traditions)

• Article footer: change “Articles & open-source tools” to “Case studies, guides, and open-source tools”
  

• Article footer: replace the “101 900” image with the attached version: content-views.png.zip. (Why? The number of views on the content has changed, so ”101 900” is a bit misleading.)

Add new logos into the logos section

The Logos section hasn’t been updated with new clients for a while:

Let’s add 4 new logos there:

logos.zip

The photo is off on mobile

This has happened again :(

Add interactivity to client cases

Articles: Move the publish date on articles to the footer

Challenge

When we emphasize the publish date, the article loses its value faster than it would do it otherwise:

I once wrote an article about salary negotiation. If you go by the numbers, it created more value for more people than any other single thing I've ever written. (I keep a label in Gmail for when folks tell me they got a raise as a direct result of advice in there. The running tally is in the high seven figures a year these days.) I think if I were to revisit the topic today I'd write substantially the same advice. However, that article has a date on it, just the fact of it having a date on it makes it less useful.

I have seen variants of the following conversation happen on Twitter / Reddit / HN / etc multiple times.

"I just got a job offer as a front-end engineer at a Valley company. How do I handle the salary negotiation?"

"Patrick wrote about that here. It is good advice."

"That looks like it was written in 2012. Do you have anything more up-to-date?"

Given this, let’s de-emphasise the date on articles.

Suggested solution

This is how I see the challenge being solved. But I’m open to your ideas!

• Move the metadata block to the end of the article. I.e., from here:

  

  to here:

  

  (Note: margin-top is 32px)

• Add “Author:” before “Ivan Akulov”

  As we move the metadata down, it might be less clear what “Ivan Akulov” belongs to. Adding “Author:” before the link would make it obvious.

Update the number of reads in “About is”

Challenge

The number of views at 3perf.com → About us is outdated. It would be great to update it!

Details

• The latest number of views collected by Google Analytics is:

  • 3perf.com content (all urls that match the /(blog|talks)/ regex · GA · Fathom): 188,004
  • iamakulov.com perf content (all urls that match the /notes/.*(webpack|resize-scroll|walmart|caching) regex · GA): 93,965

• In addition to that, GA was accidentally disabled on 3perf.com in April-May 2020. That was when I published https://3perf.com/blog/notion/ which collected a lot of traffic. I don’t have any data for that period in GA, but, to my best memory, Netlify analytics showed ~60K views for that period.

This sums up to ~340K views.

Set up PR checks for ESLint and Prettier

Challenge

For a while, I was the only one committing to the repo. This meant the repo didn’t need any Prettier/ESLint checks as my environment configuration was consistent.

Now, we’ve got new contributors which might be using a different setup. This means we need to enforce consistent file formatting automatically.

Suggested solution

Set up Prettier and ESLint checks using GitHub actions / CircleCI / etc.

Set up and connect Netlify CMS

Challenge

I’d love to use some help with articles from a technical editor. Unfortunately, right now, to edit any article, you have to be familiar with Git, VS Code, and other tooling needed to commit into the site. No editor is going to have these skills.

To make editing articles easier for non-technical people, I’m thinking of setting up a CMS. A CMS would allow any person (who has credentials) to create or edit articles from a UI – without any coding.

Netlify CMS looks like a neat option, and it would be great to set it up for this. There’s a minor change Netlify CMS won’t cover all the use cases, and we’ll need to look for something else, but so far, it looks good.

Details

• The CMS must support uploading images next to the markdown files:

  content
  |- link-rels
    |- index.md
    |- image.png
  

  Otherwise, these images won‘t be optimized.

  Netlify CMS supports this if we specify media_folder: ''. See the Gatsby guide

• Let’s enable publish_mode: editorial_workflow as well. Otherwise, incomplete drafts will be published to master and published immediately

• If you need to do anything in the Netlify account (where 3perf.com is hosted), just hit me up

Cases section: make smaller & highlight categories

Challenge

The “Cases” section on the home page grew to be large, and I find it hard to read and navigate. As we’ll keep adding more client feedbacks, it will become even larger and harder to read. It’s time to adapt the design to this.

Proposed solution

• Reorg the desktop “Cases” UI to look as follows:
  

  Key changes (on desktop only):

  • Two columns instead of one
    • The column gap is 72px
  • Spacing between items increased to 48px
  • Font size of the whole section changed to 16px

• Tune the mobile “Cases” UI to apply font-size: 0.75em to company descriptions (like on desktop):

  

• For each case, add tags that would highlight what we’ve done with each client:

  

  (For now, tags would stay non-interactive.)

  Styles I used for this screenshot (just as a reference – you’re welcome to tune/reorganize if needed):

  .tags-container {
    margin-top: 8px;
  }
  
  .tag {
    display: inline-block;
    background: #ffdb01; /* This is colors.brightYellow */
    padding: 2px 8px;
    border-radius: 2px;
    margin-right: 8px;
  }

  Here’s which tags each client would have:

  • Google: #education
  • Framer: #react-performance #build-performance #core-web-vitals
  • Castor: #react-performance #core-web-vitals
  • Appsmith: #react-performance #core-web-vitals
  • Common: #core-web-vitals
  • Fat Llama: #core-web-vitals

Web Perf 101: update the page layout

Challenge

Web Performance 101 is an evergreen content. It’s as relevant in 2021 as it was when it was published in 2018. However, showing the publish date makes this content feel outdated.

Additionally, the “reach out” promos are poorly worded. We can reword them and, potentially, raise the conversion rate.

Suggested solution

This is how I see this being solved. But I’m open to your ideas!

Publish date

Let’s:

• remove the publish date (and keep the “last updated” date)

• set the “last updated” date to today / any other recent date

• deemphasize the publish date by moving the author + date block to the end & simplifying it:

  

  (note: margin-top is 24px)

“Reach out” promos

Let’s:

• tune the Footnote styles as:

  margin-top: 40px; /* ← This changed */
  padding: 24px 32px 24px; /* ← This changed */
  border-radius: 8px;
  background: black;
  color: white;
  /* font-size: 20px; */ /* ← This removed */
  max-width: 600px; /* ← This added */

• reword the footnote as:

  <strong>Want to apply this advice to your site?</strong> We’ve worked with Google, Framer, SitePoint, and other companies. <a href="/#services">Reach out</a>

• remove “Shameless ad: need help with more advanced cases? We’re a web performance consulting agency, and we’re here to help”

• put the same “Want to apply this advice to your site?” block right after the description (where “Shameless ad: ...” was before)

Montserrat: the “→” character is rendered in a fallback font

Here’s how https://3perf.com looked back in May 2022:

Here’s how it looks right now:

A few things have changed:

• the “→” character that was previously rendered in Montserrat is now rendered in sans-serif and looks differently
• the “New article:” text is rendered in Montserrat Black (aka font-weight: 900), whereas it should be Montserrat Bold (aka font-weight: 700) (fixed)

All of these changes have likely happened due to #89. We should fix them:

• The first issue has happened because the Google Fonts version of Montserrat, apparently, doesn’t include the “→” character. (Try going to https://fonts.google.com/specimen/Montserrat/tester and pasting that character in.)

  We can work around this e.g. by converting that arrow into an SVG icon and adding it straight into the HTML. (Please make sure to also add an appropriate aria-label.)

• No idea what caused the second one. (Did we include Montserrat Bold from @fontsource?) (Yeah, that’s precisely what happened)

Describe the setup process for maintainers

Challenge

New developers don’t know how to launch the site locally. There’re a few non-obvious steps (like initializing the private submodules), and it’s not clear that you need to do that.

Suggested solution

It would be great to describe the setup process in README.md or CONTRIBUTING.md for new developers.

I’m aware of the following steps:

• Get added to https://github.com/iamakulov/3perf-gold
• Clone this repository and initialize submodules (what’s the command?)
• Install dependencies (run yarn)
• Launch the site for development (yarn develop) or build it (yarn build-locally)

Update the “Cases” section

Challenge

Got a new public review. Would be great to publish it!

Plus the CMTT’s review is super old and not relevant anymore.

Suggested solution

• Remove the CMTT review

• Add the Castor review:

  Left:

  [Castor SVG Logo, but in black, please!]
  Castor is a tech platform that makes clinical trials easier

  Right:

  We made Castor’s React design system load and execute faster.

  In just a couple weeks, Ivan significantly improved runtime performance and tree shaking of our key components. One of our products’ bundle got 3 times smaller – with 10× less JS needed for the initial load.

  — David Sigley, Head of Engineering @ Castor

Add proper font subsetting

Challenge

Font subsetting is a web performance technique that removes unnecessary characters from fonts. It makes fonts smaller and faster.

Previously, we were doing font subsetting during every build:

website/package.json

Lines 38 to 42 in 0a4c706

	"install-build-deps": "pip3 install fonttools brotli zopfli || pip install fonttools brotli zopfli",
	"build-gatsby": "gatsby build",
	"optimize-fonts": "yarn optimize-fonts:landings && yarn optimize-fonts:content",
	"optimize-fonts:landings": "cd public && find . -type f -name '*.html' | grep -v -E '(blog|talks)' | xargs subfont --root . --canonical-root https://3perf.com/ --formats woff2 --in-place --inline-css",
	"optimize-fonts:content": "cd public && find . -type f -name '*.html' | grep -E '(blog|talks)' | xargs subfont --root . --canonical-root https://3perf.com/ --formats woff2 --in-place --inline-css",

However, that a) was slow (2+ minutes every time the site is built), b) got broken recently, even though we install all Python dependencies:

11:37:02 PM:  ℹ INFO: Local subsetting is not possible because fonttools are not installed. Falling back to only subsetting Google Fonts. Run `pip install fonttools brotli zopfli` to enable local font subsetting
11:37:02 PM:  ℹ INFO: Unoptimised fonts:
11:37:02 PM:           - static/Montserrat-Bold-eed2cab78bd948a1822f8e19b79b1edc.woff2
11:37:02 PM:           - ...

Due to this, I removed this font subsetting implementation in 433750e.

It’d be great to bring back font subsetting, even if simplified.

Suggested solution

Update: let’s just use Fontsource instead. Fontsource subsets fonts out of the box → #57 (comment)

Right now, we use Montserrat, Merriweather, and Fira Code fonts. Most pages use just normal, italic, and bold versions of these fonts, but there are exceptions. (Eg /, /content and maybe some other pages use Montserrat Black.) Also, 99-100% of the site content is latin.

Given this, I’d probably try subsetting fonts as follows:

• Chunk every single font file into script-specific files (latin, cyrillic, etc). This will allow us to skip loading cyrillic characters when we a page doesn’t use them.

  Example guide: https://markoskon.com/creating-font-subsets/#multiple-subsets-by-script

• For the home page, subset Montserrat Black into a custom font that would only include characters in “Make your site faster → earn more”. This will allow us to avoid loading full Montserrat Black just for a single line of text.

Extra notes:

• It would be great if you could save the above steps as a script! With the script, if eg a new version of Montserrat is released, and we need to update the font files, we could just replace the source files and re-run the script.
• Feel free to remove the eot versions of font files. We don’t need to support IE.

Relevant links

Tools:

• https://everythingfonts.com/subsetter
• https://www.fontsquirrel.com/tools/webfont-generator

Guides/docs:

• https://markoskon.com/creating-font-subsets/
• http://thenewcode.com/878/Slash-Page-Load-Times-With-CSS-Font-Subsetting
• https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range

Upgrade to Gatsby v4

Gatsby v4 makes builds faster and improves development experience. Would be nice to update to it! https://www.gatsbyjs.com/blog/whats-new-in-gatsby-4/

Upgrade to latest dependencies

Challenge

The site’s tech stack is a bit outdated. I update it every time I do major site changes, but the last time was a few months ago.

Since then:

• Gatsby.js 3 came out
• new Preact versions came out
• new TypeScript versions came out
• new styled-components versions came out (I think)

It would be great to update the tech stack so it’s easier to maintain the site.

Update gatsby-image to gatsby-plugin-image

Currently, to load images, we use gatsby-image. However, it was deprecated, and it’s now recommended to use gatsby-plugin-image instead.

It would be great to upgrade to gatsby-plugin-image. Here’s the migration guide: https://www.gatsbyjs.com/docs/reference/release-notes/image-migration-guide/