233 milliseconds!

It's how long it takes to load my personal portfolio web site welcome page.

This level of performance was achieved using what I like to call the HOTED tech stack. This achievement is not just about the technologies I used, but how I utilized their potential to maximize performance.

  • HTMX: In the face of the complexities that modern front-end frameworks bring, I turned to HTMX. This allowed me to escape the usual complexities and focus on the core issues when presenting web pages. By doing so, I was able to sidestep the common ‘JavaScript fatigue’ and fully utilize the capabilities of the browser. HTMX’s simplicity and power enabled me to create dynamic, responsive web pages without the need for complex JavaScript.
  • Oak Framework: I used Oak’s middleware structure approach wisely, avoiding overengineering and unnecessary processing. This resulted in clean, efficient development.
  • TailwindCSS: Despite its potential to produce large CSS files, I used TailwindCSS’s utility-first design to my advantage. By ensuring the browser cached the static CSS file, I was able to maintain high performance while letting creativity flourish.
  • EJS (Embedded JavaScript Templates): I used EJS to compile HTML with dynamic values, keeping things minimal. I only built the HTML in the backend, producing the final string to send as a response to an HTMX request.
  • Deno: I utilizezed Deno’s multithread characteristic to speed up my web server. Its ability to read TypeScript without separate compilation helped me develop robust and optimized code.

By effectively using these technologies, I’ve been able to build a high-performing, robust, and optimized website. It’s not just about choosing the right tools, but also about using them well.

Check out the attached video that demonstrates the page load speed.

In the first page load, I refreshed and forcibly cleared all caches. However, on the second load, utilizing all the browser’s potential by adhering to web standards, the page only takes an incredible 233 milliseconds to load, achieving 100% in the performance report from the Lighthouse web console tool.

#htmx #oak #tailwindcss #tailwind #ejs #embeddedJavascriptTemplates #deno #web #webdevelopment #performance #optimization #html #css #javascript #typescript #https #http #lighthouse #webconsole #webbrowser