As a digital recruitment company focused on the tech industry, providing a good user experience in the recruiting process is vital both for our clients that want to hire engineers and for the candidates that are seeking for a career shift.
Having this in mind we knew that having a blazing fast and performant website is a main requirement in order to communicate at a glance who we are, what services we can provide and to respond with efficiency.
Providing a good user experience
When walking into a physical store, besides the beautiful design decor tapped on the walls and floors, besides the vibrant colours and alluring scent, the experience is given by other factors such as: how smooth the front sliding doors are opened, how fast the elevator leads me to the next floor, how reachable are the products for touch or how easy is to find a certain product.
Those experiential factors can also be found on a website translated through Performance, Accessibility, Best practices, SEO and Progressive Web App.
Measuring the user experience
How good is the experience that a user has on a page can be easily measured with different dedicated tools. The tool that we’ve used at talentswipe.careers is Google Lighthouse.
Lighthouse is an online tool that allows you to audit your pages for what it believes makes the best experience, and since it’s developed by Google it’s probably a good model to follow.
With a clear 1-100 grading system, the score quality is grouped into five categories: performance, accessibility, best practices, SEO, and qualification as a Progressive Web Application.
For each of the categories, Lighthouse provides you in-depth insides with a comprehensive and realistic view of a page’s overall quality and recommends steps to improve the overall user experience on the page.
Introducing Gatsby
Aiming at providing a good user experience to our users by maximizing the score quality of all the categories previously mentioned, we’ve searched for solutions on how we can achieve this more easily because we were too lazy to reinvent the wheel and we’ve followed Bill Gates advice:
I choose a lazy person to do a hard job. Because a lazy person will find an easy way to do it
This is how we’ve found Gatsby.
According to their website, Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.
In a simple way described, Gatsby is a static site generator. That means that all the data sourcing and the fetches are made at build time then used to generate the HTML, CSS and JavaScript files. Once built, the server will send the same response to every visitor, which will make the content delivery super-fast.
Besides being well-documented and having a strong community, Gatsby offers a wide variety of features with a rich plugin system. In continuation I will mention some of its powerful features and how we took advantage of them.
Fast page loading
Built on React, a Gatsby application renders on a virtual DOM, meaning that only differences of the page are loaded, improving the front-end performance. In addition to that, the fast page loading speed is done also with the help of preloading. When the user opens a page, in the background the browser silently fetches resources necessary to render other pages on the site that are linked from that page. With Gatsby, we’ve managed to reach a 98% performance score on the first loading page on talentswipe.careers.
Progressive web app
The framework supports PWA functionality out of the box, the site created with Gatsby is by default a progressive web application. That enables web apps to load when there is no network, sync in the background and seamlessly do things while providing a native-like experience for the users.
Besides the fact that our users are able to check the latest jobs in IT while being offline, they even can install the app like a native one and have it on their screen for easy access, which we find it very cool :)
Image optimization
Gatsby ships with excellent image optimization capabilities that help you optimize performance and responsiveness of images so that you can get the benefits of awesome images that don’t slow down your site.
With Gatsby we’ve managed to efficiently encode images, properly size and serve them in next-gen formats. One cool feature that Gatsby brings is the Blur Up technique, which uses progressive loading to make a fast, visually pleasing experience without waiting for a full-resolution image with a blank screen.
Security
All the content being compiled at the build time, we don’t need to worry much about malicious requests to databases, DDOS attacks, or accidental exposure. Nevertheless, there still remain some things to keep in mind.
SEO
Gatsby can help your site rank and perform better in search engines. Having a fast loading website can have a positive impact on the search engine rankings (SEO), reducing the user bounce rates which is a major ranking factor for Google.
With a little configuration, you can make the website easily accessible for search engine crawlers like Googlebot to crawl your site and index the pages.
Conclusion
Learning a new technology can be challenging and time consuming, but luckily with Gatsby if you have some previous experience with React and GraphQL you can get started in minutes and master it in a short amount of time.
Building talentswipe.careers with Gatsby was definitely fun and even though we’ve obtained some high performant scores, we are far from perfect and there is still work to do.
We have some big plans ahead on how we can develop from now, and definitely we will write some articles about that.
Give us feedback on what you think at contact@talentswipe.careers.
Cheers!
