Looking Back
Four years ago, I co-founded iScout – a safety reporting and training web application and app. Over time we’ve worked hard to improve the application, but the www website has always been lacking. The last two months, we did a total rebuild focused on (1) looking professional, (2) explaining the software with clarity, and (3) optimizing for SEO.
Defining Our Goal
Our old www had 6 pages with a decided lack of content. Worse, the homepage was 14MB and took 15 seconds to load. Pretty bad numbers all around. For our new site, we needed faster load times and way more content.
In the end, our new site launched with 147 pages, each with 300+ words. The home page is 800kb and loads in 3 seconds (under 1s if you don’t count google tag manager, hubspot, etc).
Tech Stack
Being a vue lover, we went with nuxt as the basis for our site. This made it lightning fast to build highly interactive pages, reusable components, plus all the benefits of server-side rendering for SEO. Nuxt took a lot of configuring and the docs are thin, but after two months of intense build-out we’re happy with the stack. Here’s the full breakdown:
It took a good week to get Nuxt setup the way we wanted it. For starters, Nuxt creates a page for every vue component which makes no sense to me. Nuxt prefers (or insists) that any re-useable components are dropped in a /components folder. I’m good with that, but I also like to break my pages into components. Anyways, we configured Nuxt to only turn page.vue files into actual pages and ignore everything else.
The other tough thing about Nuxt is that it’s an abstraction over webpack. Webpack is tough to configure when you’re working with it directly, but throw an abstraction in there and you’re asking for some pain.
For lead tracking, we used the HubSpot api to pull in pop-ups and forms.
I’m griping a lot on Nuxt, but it mostly worked really well.
Dynamic Content
Part of our rebuild was to include some dynamic content. Since we based Nuxt on Express, it was fairly easy to load this data server-side and then perform the server-side rendering. Our dynamic content included:
- WordPress – We setup a headless wordpress on wpengine.com where we can create posts. Then we pull them in using the WordPress JSON api and render them with Nuxt.
- Mailchimp – We send feature updates with Mailchimp but wanted that content on our website so people could browse our recent releases. Again we used the Mailchimp API to pull these posts into Nuxt
- Help – Previously we used helpscout for our help docs, but we moved them into WordPress so our team could easily edit and create help guides.
- Forms – We use our own iScout API to pull in forms from our Forms Library
- Lessons – We use our own iScout API to pull in lessons from our 2020 Training Library
End Result
We’re officially launching the new site October 4, 2019.
You can check it out at www.iscout.com
