Tools for optimising your front-end development

Published 07 April 2022

Dev
Tools for optimising your front-end development Cover Image

I’ve been building web experiences for a number of years now and I wish I knew some of these when I first started out. Although not a comprehensive list, I have grouped them into 3 separate categories with each having tools that can be helpful while building web experiences.
  1. 1. SEO
  2. This I believe varies according to the tech stack you are using for your web app. For instance, when building with WordPress, I lean towards the Yoast SEO plugin. For Rails apps, I use the Meta Tags gem.
  3. Beyond tech stacks, there are general tools/approaches to SEO that can help you build better web experiences, such as:
    1. a. Facebook Debugger
    2. Your web apps will most likely (definitely be shared) on Facebook and as such, you will want to ensure that your apps are Facebook sharing-friendly. This is a free tool that can be accessed on https://developers.facebook.com/tools/debug.
    3. b. Page Speed
    4. As a developer, it’s imperative that you understand the importance of page speeds in your apps. You’ll want your website to load within three seconds, or two seconds if it’s an eCommerce site. The two-to-three second mark is the turning point where bounce rates skyrocket – in fact, 40% of consumers will wait no more than three seconds before abandoning a site (Monaghan, 2020).
    5. There is a lot of apps that test your app’s page, my two go to’s are:
  4. One last note to make here, please, please ensure your web app has an SSL certificate, not only for SEO purposes but for security purposes too.
  5. 2. Usability
    1. a. Google Search Console
    2. This is a free tool by Google that will allow Google to crawl your site for any Performance issues, Mobile Usability, Coverage, etc.
    3. Below is an example of some usability monitoring done by Google for Kubukisa. Because of this, I was able to quickly optimize the app.
    4. Google search console error - example
    5. b. Hotjar
    6. Absolutely one of my favorite tools. It allows you to Survey your users which can be very useful as user feedback is pivotal in building products with high user retention. Moreover, Hotjar will let you record heatmaps which can indicate bottlenecks and areas of improvement in your apps as they will indicate the areas where users might be struggling with using your app. These heatmap recordings can be pivotal in also understanding the user’s key focus which is what you may want to better optimize and focus on if your app has multiple features.
  6. 3. Analytics
  7. There’s a lot of chatter about privacy lately and why teams should abandon Google Analytics, which has been my primary analytics tool for years now. However, I personally, recently started with a self-hosted instance of Fathom analytics which seems to be fairly good so far as I am impressed with the privacy and usability. In case you were wondering, I am self-hosting on Render.

  8. What tools are you using to improve the experience in your web apps? I’d like to hear from you. @ mention me on Twitter or LinkedIn and let’s keep the conversation going.

Tags:

dev