kenmusic.net
Architectural Migration & Performance Optimization of My Website
Overview
This website started 3 years ago as a simple exercise in Raw HTML & CSS as a final project for a introductory coding class. As my programming portfolio has grown over the years, I needed a convenient and professional medium to showcase my work. This website you see now is the result.
The primary challenge was implementing a program portfolio page. Creating HTML sites for each project was a daunting task I did not want to endure. This website, instead, streamlines the process of creating Case Study pages, one of which you are reading now.
Evolution of Structure
Before: The Monolith
Raw HTML/CSS hosted on AWS Amplify. Every new page and project required manually creating HTML and adjusting CSS.
After: The Modernization
Migration to Tailwind CSS and MDX based page generation. Decoupled styling from structure and automated page generation from easy to edit files.
Technical Implementation
This version of the website is a total restructure into Next.js, focusing on the "Content-as-Data" philosophy.
Instead of creating a new .js file for every project, I implemented a dynamic approach using MDX. This file type allows me to write technical documentation in Markdown while injecting complex React components like text cards, audio players, and performance optimized video embeds.
The process of adding a project onto my portfolio is as follows:
Add a MDX file
Each MDX file is pre-rendered into static HTML at build time by Next.js.
Enter Metadata
Metadata for the project is configured in YAML in the header of the MDX file. A metadata parser extracts project information to display on the website.
Write Content
The content of the case study is written in Markdown with React components, including a shared library of custom UI components which keep styling between pages consistent.
Optimizations
Many optimizations were made to make the website performant in order to improve load times and SEO visibility.
Problem Third-Party Script Bloat
Standard YouTube iframes were adding 1MB+ of blocking JavaScript, tanking load times.
Solution:
Implemented facades so only lightweight previews are loaded initially. The heavy player scripts are loaded upon user interaction.
Problem Large File Sizes
High quality images, animations, fonts, and audio files made payload sizes large.
Solution:
Compressing assets to smaller sizes such as webp and mp3, and minimizing asset usage through YouTube embeds and Tailwind optimizations.
Problem Lack of Metadata
The original website mostly ignored metadata, lowering SEO visibility.
Solution:
Implemented dynamic metadata for each page through generateMetadata function, adding page titles, canonical URLs, and rich link previews through OpenGraph.
Key Outcomes
Restructured Website
Converted my original HTML and CSS website into a Next.js project with Tailwind CSS.
100% Static Delivery
All case studies are pre-built, resulting in near-instant page transitions and zero server-side latency.
Optimized Load Times
Transitioned from high-bitrate WAV files to 320kbps MP3s for the web player, reducing initial load size by 85%.
Easy to Update Project Portfolio
Added a project portfolio page that showcases my work and can easily be updated for new projects.
Future Work
Revamped Visual Style
Convert website to a brighter, simple design, inspired by a brutalist style.
Simplification of Source Code
Cleaning up source code to rid of unnecessary data and make code more readable.