menuLinkedinGitubEmailSkip to content

11ty portfolio

A static site portfolio built using 11ty, Pug templates, TailwindCSS, and Webpack

My Role

  • Used 11ty to generate a portfolio that score all 100's in Google Lighthouse test

  • Developed a 11ty Tailwind Pug Starter Kit. Available on Github

Tech Stack

  • 11ty

  • TailwindCSS

  • SCSS

  • Pug

  • Webpack

  • PWA

  • Netlify

  • CI/CD

About this project

Every year I like to work on my portfolio site and see how I can improve my site to be more performant, user-friendly or accessible. My last portfolio was built with Gatsby and according to Google Lighthouse, takes about 3.6 seconds for it to fully load. I'm pretty sure I can improve that load time.

Problem

My portfolio have a minimalistic design but still takes 3.6 seconds to load, which is very odd. After performing an analysis on my portfolio, I realized the bottle-neck came from my JavaScript files and most of it is due to the Gatsby framework. Since it is a hybrid static site, it does require React to re-hydrate the portfolio. I have minimal need for JavaScript but I can't remove it due to the way the site is generated, so I decided to create a new portfolio with minimal JavaScript.

Process

For my new framework, I settled on 11ty, which is a simple static site generator that compiles JavaScript based templates into HTML. For CI/CD, I used Buddy and Netlify to run Lighthouse tests to keep track of my performance scores per build. When the test falls below 100, the build will fail and will output hints on how to fix them.

When I first implemented Google Analytics, it added 1 second to my load time and doubled my loading speed, so I decided to move the script to the end of the body and added an event that will only load GA tracking when the page have finished loading. My bounce rate would not be 100% accurate, but do I want to sacrifice performance for more accurate data? Luckily, it was an easy choice, since I am implementing for a portfolio site, most of my users would be coming from direct traffic. My main demographics would be users that stays and navigates around the site, so having less accurate bounce rate would not be a big factor.

Result

I rebuilt my portfolio as a true static page and was able to include very minimal JavaScript. Instead of using JavaScript to toggle a mobile navigation menu, I was able to use HTML checkboxes and CSS to replicate the same effect. I also used Webpack to generate and insert a build year on the footer instead of using a Date function. I'm glad there were non JavaScript alternatives to get the same result. What made the development process easier was running automated Lighthouse tests and by using Google Lighthouse performance tips, I was able to create a portfolio thats meets Google's performant criteria and learned a lot about accessibility and performance. 🎉

BeforeAfter
First Contentful Paint0.8 s0.9 s
Speed Index0.8 s1.1 s
Time to Interactive3.6 s0.9 s
First Meaningful Paint0.8 s0.9 s
First CPU Idle3.1 s0.9 s
Max Potential First Input Delay100 ms20 ms

View on Github