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.
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).
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.
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:
We're officially launching the new site October 4, 2019.
You can check it out at www.iscout.com