Performance

The first step to any performant website is to have static content. It's almost impossible to have a perfect 100 score with a coupled site since there is a dependency on the back-end to process the front-end. Celestial Lite was the tool of choice for this project. Static files generated by NodeJS allowed the freedom of backend-templating style coding through Javascript. Since all your files are created at build time, the server doesn't need to do any additional processing to serve your website.

The second step is to remove as many network calls as possible. Inline your CSS, inline your JS, and swap out your images for SVGs if possible. Every call you make, even if preloaded and synchronous, is time that your site takes to show to your users.

The third and final step is to serve your entire site from a global CDN. This is what they excel at, so take advantage of their scale and reach to load your site as quickly as possible.

Accessibility

Accessibility is one of the most important features of a website that is typically pushed aside. Being able to navigate through the web should never be difficult, and as developers, it should be one of our top priorities to make the journey as painless as possible. By using javascript frameworks such as React or Angular, it's easy to miss some of the standard HTML accessibility features such as focus states, keyboard events, and standard tags.

Using standard <h1> - <h6> tags helps screen readers, and SEO, read and organize your content appropriately. Images should have useful alt text, and buttons should have aria-labels if their text is not clearly defined.

Landmarks are another important feature that allow screen readers to jump to the most important content, such as the <header>, <main>, and <footer> tags.

Best Practices

This section is a mixture of obvious things such as using a <doctype>, SSL certificate for the domain, and a list of things that I would classify under the "ethical developer" tips category.

Zach's Ethical Developer Tips

1. Don't request geolocation on load. It's a little rude.
2. Don't request notifications on load. See above.
3. Don't block users from pasting into form fields.
4. Don't hijack the scrollbar.
5. Don't rebind key events unless you built an app specific to that.

There are a few others like "don't use third party scripts" but nowadays that's pretty difficult to do.

SEO

Getting your <meta> and <link> ducks in a row can easily put you ahead of the game. The basics include:

• Title tag (Always include a title tag...)
• Meta Description
• Open Graph - my favorite
• Meta Theme for mobile browsers
• Link - Apple icons
• And a Manifest.JSON file

Even though Google claims its bot can crawl Javascript rendered pages, its hard to beat statically rendered content. Plus, all of your links can quickly be crawled without it running into any javascript errors.

In Conclusion

A perfect score is attainable, and doesn't always have to be a bare-bones website (though sometimes that's a better idea than it sounds). With a strong focus on accessibility, and semantic HTML, you too can have a perfect score.

Finito! (The End)

Thanks for reading!