Opens an external site in a new window
Mental Health Awareness Month
“Community”
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links
  • Profile
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links

New Rodney Lab Site Live # New Rodney Lab Site Live #

blurry low resolution placeholder image New Rodney Lab Website is now Live
  1. Home Rodney Lab Home
  2. Blog Posts Rodney Lab Blog Posts
  3. rodneylab rodneylab Blog Posts
< PREVIOUS POST
NEXT POST >
LATEST POST >>

New Rodney Lab Site Live #

Published: 5 years ago
4 minute read
Gunning Fog Index: 8.9
Content by Rodney
blurry low resolution placeholder image Author Image: Rodney from Rodney Lab
SHARE:

✨ Introducing the new Rodney Lab Site #

The new Rodney Lab site is now live. It is built around the three core user experience (UX) needs of being accessible, fast, and secure. Starting out with those needs in mind, the Gatsby Static Site generator seemed a solid choice. Principally known for creating lightning fast websites, Gatsby also helps build in accessibility . As an example, it can handle page announcements by default — no doubt much appreciated by users using screen readers to access the site. The site scores exceedingly well by industry-standard tests for accessibility, speed, and security.

Some results are shown further down the page. Gatsby offers GraphQL support, which makes adding Search Engine Optimization (SEO) to the site a breeze. Traditional meta-data as well as modern JSON-LD allowing rich Google search results for the site are included. SEO, security, speed, and accessibility all help create a great User Experience, which, at the end of the day, is the most important metric of all. In the next paragraphs, we take a look in a little more detail at the site features.

🤗 Accessibility features #

Accessibility is a priority for us. We include a number of features from keyboard navigation using semantic HTML in the site code to help users browsing the site with a screen reader. Other coded-in features include all non-decorative images having alt attributes so screen readers can announce the image (this is also best-practise for pure SEO reasons). The site design is also optimized for the visually impaired, with large button and colour contrast ratio of 4.5:1 or higher  on all elements, so all parts of the site can be read by people with moderately low vision.

You can see a live report of the Rodney Label new site on the Web Accessibility Evaluation site .

blurry low resolution placeholder image New Rodney Lab Site: Rodney Lab new site accessibility evaluation results.
Screenshot: Rodney Lab new site accessibility evaluation results

🔥 Site Speed #

Waiting for a site to load can be quite annoying. On top, you quickly lose visitors when your page loads slowly. Google's own research  shows that the probability of a bounce (the percentage of site visitors leaving the website without staying to explore the content) increases 32% as page load time goes from one second to three seconds. On top, a slow site affects SEO. Google needs to 'crawl' your site — visit it with a robot which follows links on your pages, adding new content to the Google index. A slow loading page impacts the number of pages on your site the bot is able to explore in a fixed time window. Clearly, all of these factors will impact search result performance, fundamentally because they impact on user experience. All Google really wants to do it get the right information in front of its users as quickly as possible, in other words, provide them with a great user experience.

With speed being second on our list of must-haves, we decided to go for a statically hosted website. Statically hosted websites load quicker, but are suited to applications (like this one) where there is no constant feed of real-time updates. For example, a static site would not be first choice for an Instagram-like site where users are constantly adding content and interacting with it.

Statically hosted sites are faster, out-of-the-box. Gatsby has a few tricks up its sleeve to improve speed. As an example, resources from other pages are prefetched so you getter a quicker response each time you click. Images can also be optimized using the brand-new image API. This has inbuilt features like lazy loading and placeholder images. Lazy loading means the images on the fraction of the page you are currently looking at load initially. This means you see the images that matter quicker. This can have a massive impact on user experience for an image-heavy site. Placeholder show a low quality image, while the full quality image loads, allowing users on a slower connection to interact with the page quicker.

Just how fast is the new Rodney Lab site? There are a number of benchmarking tools for speed. They offer varying results. Lighthouse is a common one it is also quite strict, for example at the time of writing a test on amazon.com returned a 78 for performance. Currently, the site scores 99 for Performance, 100 for Accessibility, 100 for Best Practices and 100 for SEO. The tool is constantly evolving, so this might change the relative weighting of factors changes.

blurry low resolution placeholder image New Rodney Lab Site: Rodney Lab site Lighthouse results.
Screenshot: Rodney Lab site Lighthouse Results

🔐 Security features #

We host the site on the Netlify CDN for speed and security reasons. Out of the box, Netlify hosted Gatsby sites include HTTP headers to improve security. On top, we have added additional headers to reduce the attack surface for bad actors, guarding against cross-site scripting (XSS) attacks . Although many sites implement CSP, it takes a lot of effort to do it well. Many sites include the 'unsafe-inline' directive which works against many of the security benefits CSP provides. Our site's high A+ score on security reflects our investment in designing safe CSP for the site.

Test Result
Mozilla Observatory A+
observatory.mozilla.org
Qualsys SSL Labs A+
ssllabs.com
SecurityHeaders.com A+
securityheaders.com

Intrinsically, statically hosted sites are more secure as users hit a CDN rather than a live server.

In terms of privacy, the site also scores well. See our results from The Markup's Blacklight Privacy Inspector .

🤖 SEO features #

Good user experience is essential for SEO. An example of the SEO and UX prioritized design of the website is the in-built blog search feature. Rather than rely on an external provider for search, which can reduce performance, we are able to offer search, keeping the site static using the js-search client-side search library  . This is a lightweight implementation of Lunr JS and provides fast site search. To improve UX we added a couple of features. Firstly, search results use stemming. This just means if you search for ‘provide”, results with the words “provider” and “provides” are also returned. That's not all, though. To further improve UX, when you open a search result, the window automatically scrolls to show the first search result and all search results in the text are highlighted. This saves you having to scroll through the text manually to find what you need.

blurry low resolution placeholder image New Rodney Lab Site: Rodney Lab new site UX optimized search results.
Screenshot: Rodney Lab new site UX optimized search results

🙏🏽 Feedback #

The page will be open-sourced soon onto the Rodney Lab GitHub page . In the meantime, keen to hear your thoughts on the site design and features. You can get in touch via @askRodney on Twitter and also askRodney on Telegram . Alternatively, see further ways to get in touch with Rodney Lab. If you have found this post useful and can afford even a small contribution, please consider supporting me through Buy me a Coffee.

We post regularly on accessible Gatsby website development as well as OpenBSD-centric content. Also, subscribe to the newsletter to keep up-to-date with our latest projects.

Thanks for reading this post. I hope you found it valuable. Please get in touch with your feedback and suggestions for posts you would like to see. Read more about me …

blurry low resolution placeholder image Rodney from Rodney Lab
TAGS:
RODNEYLABSEO

Likes:

Likes

  • votepurchase@求職中 profile avatar
Likes provided by Mastodon & X via Webmentions.

Related Posts

blurry low resolution placeholder image Rust for Gaming: Rust Game Development Engines 2024 🎮️

Rust for Gaming: Rust Game Development Engines 2024 🎮️

rust
gaming
< PREVIOUS POST
NEXT POST >
LATEST POST >>

Leave a comment …

Your information will be handled in line with our Privacy Policy .

Ask for more

1 Nov 2022 — Astro Server-Side Rendering: Edge Search Site
3 Oct 2022 — Svelte eCommerce Site: SvelteKit Snipcart Storefront
1 Sept 2022 — Get Started with SvelteKit Headless WordPress

Copyright © 2020 – 2025 Rodney Johnson. All Rights Reserved. Please read important copyright and intellectual property information.

  • Home
  • Profile
  • Plus +
  • Newsletter
  • Contact
  • Links
  • Terms of Use
  • Privacy Policy
We use cookies  to enhance visitors’ experience. Please click the “Options” button to make your choice.  Learn more here.