My personal website and blog built with Astro and MDX.
I've always wanted a platform to showcase my projects and share my thoughts on the Web. This website started with the aim of fulfilling that dream. Hope you enjoy it! 😄
Take a look: https://fatehak.dev
Technologies used to build the website:
- Astro and MDX
- Web Components for interactivity.
- Tailwind CSS for theming.
- Remark and Rehype plugins for markdown transforms.
- Prettier, Stylelint, Eslint for formatting.
- Husky, lint-staged, commitlint for clean commits
- Github Actions for CI/CD.
- Cloudflare for publishing, DNS, and analytics.
I wanted to build the website with speed and usability in mind. So, I tried to use every trick to achieve maximum performance and ease of use.
Here is everything I've done so far:
- Kept JS payloads minimal with the 'no-framework' strategy and used Web components for interactivity, this lead to a total payload size of just 6kB!
- Prefetched on-page internal links at browser idle time.
- Prevented CLS for images and video elements.
- Served images in next-gen formats with fallbacks.
- Optimal delivery of images based on viewport size and lazy loaded them.
- Self Hosted and preloaded critical fonts. Used font subsetting to further reduce file sizes from 700kB to 90kB!
- Removed FOUC through proper asset loading.
- Set up Cloudflare with Brotli compression and configured headers for early preload hints and optimal cache TTL.
- Built accessible custom MDX components for a great reading experience.
I wanted to verify if all the optimizations I've done so far actually worked, so I did a Lighthouse test for my site fatehak.dev.
To my surprise, I got an overall score of 100 consistently for both Mobile and Desktop on a five run average. It feels great when your hard work finally pays off! 🎉
Tools that came in handy for testing my website's performance: