ICON Interactive is a digital agency that's been around for over 20 years so we've seen the crest of various waves of technology. While approaching our site relaunch we wanted to focus on developing a performant site that would showcase our work in a clear, concise manner while also prioritizing performance and the content management experience in the process. We've done just that, so we wanted to share how we did it.
Make It Fast
We opted to go with a site built around the JAMstack, which is a modular & performant approach to building websites. It centers around the idea of server-side rendering the site's pages which are then served as code-split payloads with pre-rendered HTML through a CDN. One can also integrate a mesh of services via APIs & framework plugins. This approach removes the need to directly manage web servers that host the site and makes for a performant & secure user experience.
ICON enjoys utilizing Vue as our JS framework of choice so we went with Gridsome as our site's framework since it's based on Vue and has a rich ecosystem of plug-ins & documentation. Gridsome is heavily inspired by Gatsby which is a React-based site framework anyone new to this space should check out.
Gridsome pulls in data via GraphQL which offers a unified schema and syntax to manage various sources of data. The tooling around GraphQL is fantastic, there's an included query editor to test queries during the development process which also integrates relevant documentation directly into the interface.
For the content management system we wanted to prioritize ease of use and create a fault-tolerant system for updating the website. We went with Forestry as our CMS since it updates the site by adding the content directly to the github repository as a commit which provides granular logging of each update and allows for version roll-back if needed.
Forestry's templates are easily customizable to the developer through YAML files. They also provide a GUI interface to modulate and manage templates which is intuitive & flexible. All the images are uploaded directly to a linked AWS S3 bucket via the Forestry interface which relieves bloat on the git repository and provides an integrated, seamless experience for the content editor.
Forestry is essentially creating and modifying markdown files for the site to ingest at compile time. Each update that is pushed up will take about 2-3 minutes before it is reflected on the live site because the entire site is being recompiled on each update. The benefits gained in site speed & SEO performance from this compilation process are worth it.
Our site is deployed through AWS Amplify which links to our code repository and provides continuous deployment, which means our site gets rebuilt and deployed each time new commits are pushed to the repository or changes are added through the CMS. Amplify also provides deployment for feature branches so we can test updates of a different git branch before they're merged into the main production branch. The compiled site is then served through the AWS CDN which provides a highly performant way to host & serve the site.
The site is being built from an open source Github repository since the Github API has fantastic support for CMS integrations like Forestry. We wanted to open source the site's code to serve as an educational resource for anyone curious to learn more about building websites with the JAMstack.
Lighthouse Performance Audit
Our previous site was built on Wordpress and suffered from image bloat which impacted the performance. We're incredibly pleased with the massive jump in performance, accessibility, & SEO from utilizing a JAMstack architecture.
Previous ICON site:
New ICON site:
Thanks for reading! If you're curious to learn more about the JAMstack here's an excellent whitepaper from Netlify.
Top comments (0)