How I created this

This is how I started thinking about this website, a little bit of background about what I had in mind and where I envisioned this to go.

A "live" story of how I created this website and this blog

For a couple of years I had a Wordpress blog, benoitzohar.fr, hosted by myself on a OVH server in France, then I moved it on an Online server. I added plugins on plugins and huge images - this was way before I realized internet is not an infinite source of bandwidth. Eventually I realized that the website was taking 10 to 14 seconds to load on a fiber connection with the latest Macbook Pro.

But, well, there was always a more important project to tackle, and my wordpress stayed online until another server change screwed up the config and benoitzohar.fr somehow ended up displaying for a while poi.lu, which was a funny but useless domain I bought in the past.

Busbud allowed me to go to a performance conference in California for the second year in a row and after 52 weeks of doing my best to make use of the perfs best practices on busbud.com, I decided it was time to go further and start something from scratch, using everything I learned in the past years as a front-end performance-focused developer.

I will make the snappiest portfolio ever

If I learned something about web performances it's that time to First Contentful Paint matters. You want your users to see the most of your website as fast as possible. So, try to load as few bytes as possible, in as few requests as you can.

I figured, if I'm going to write a portfolio it'll be static. and it should be fast. and also pretty. I will ditch the blog part (or so I thought! 😏), have a page with links to my portfolio, linkedin, github, twitter and that's enough.

I haven't been using static content frameworks and tools for a while and there's no way I'm going back to PHP to do that - Yes, my current online "résumé" is written in PHP, with a nice little MVC framework that I wrote while at Versusmind - So I started looking at things like Gatsby or NextJS in more details. But there was always too much JS client-side, and I couldn't fine tweak things as I wanted.

I also looked at a couple of options to host my files, my static files of course. The idea is to put the project on Github, create html, js and css files at build time, and deploy that automatically on a static hosting server, like Netlify.

One thing is almost certain now, it's that I want to use components for my static website and I will probably use React server side only.

I stumbled upon react-snap and decided to use it for my project along with create-react-app because it helped me setup a powerful local dev environment at nearly no cost in time for me. I'll figure out later what to do with that extra JS that's sent client-side - and which I don't want/need.

Then, this week, I stumbled upon a nice avatar

I can't remember or find who it was on twitter, but I saw a drawn avatar. So I decided to make one, in SVG. I saw Sarah Drasner talking about SVGs and performance a couple of weeks ago so I thought, why not dive into it. I always used SVG. Never created one. But still, I'm not much of a painter so I used the great getavataaars.com website to get a base of what my avatar would look like.

Then I started playing with the <path />s, <circle />s and <rect /> and ended up having a 4kb avatar of myself. Busbud's amazing UX designer Winnie helped me with the color and draw my eyes 🤩

Let's make the tiniest page ever! (and write about it)

While on a plane to France, I had time to think about what I'd like for my portfolio to be good. I want it to be the fastest portfolio ever.

More importantly I want to be able to in charge of my own site. I don't want a tool that gives the best average result, I want everything on the site to be as fast as possible.

Also, I want to document what I do so other people can understand why I did what I did, what lead me there and also not make the same mistakes as I did.

So, let's create a blog too! I don't want to use Medium because of their policy on viewers but I want my site to look as nice. I can use Markdown since I'm already using it everyday on Github I don't see why not.

I'm thinking, I'll do a PR on Github for each blog post, so you can go and check what code I changed while you read my post.

So I'm starting to write this post right now. I'm guessing the rest of it will come along my new portfolio. This post will end when I first deploy my new portfolio, and I'll create a blog post for each changes that I make in the future.

SVG perfs

I started working on the front page for the portfolio. It's merely an avatar of me and 4 links with SVG icons.

If you're still wondering why I'm not using a icons font, may I suggest that you read "Seriously, Don’t Use Icon Fonts" on that subject. You might also want to read "Seriously, use icon fonts" to get some perspective on the first article.

So now I have 5 SVGs files that are loaded on an <img /> because this is how you do it in react. I want to inline them but how do I do that? I've been working on websites for close to a decade and I still need google to find solutions, that will never change and I'm not ashamed to admit it!

Also I want a solution that will use definitions and <use> in case there's more than once the same svg icon on the page. But it still should inline the svg if not.

Or should I create a sprite definition file and make use of the browser's cache to speed up next pages?

Should I use a CSS framework

I already know that the answer is no, even if I worked on a tiny css framework called ProntoCSS two years ago to impress Shopify. I want to micro-manage every bit of the portfolio.

I wanted to use that 58 bytes of css code that supposedly fit any requirements on desktop and mobile but, bad news, it doesn't fit iPhone 5 and equivalent screen size. And by looking around me I can tell you that people still use those, even in a tech savvy context.

Let's face it, if I learned something working for a website with a lot of traffic for two year, it's that most visitors are on mobile now. I'd say between 70% and 80% are on mobile, and it's a trend.

I'll need to add some analytics to my portfolio, I'm wondering how much bandwidth that can use and if it'll impact my visitors 🤔probably not since I'm planning on having a static site so I can just defer the analytics and hope that most of people stay on the page long enough for it to load...

Choosing a font

I've been attracted by variable fonts for quite some time now. It's basically a font face which have a set of variables. It can be weight and width: with those 2 variables you can control the shape of you font. It adds a few bytes to a standard font but overall it's worth it if you plan on importing multiple weights from Google Font or other. It will most probably need fewer bytes to have the same - and more - weights than a standard font.

Importing a variable font still costs around 50kb. I will definitely need a proper compression of assets on the server: Brotli or gzip at least. If the static file hosting service that I will choose does not handle compression, I'll have to use a cdn solution such as fastly. Also I should check out the status of http2 on the service I'll choose because it will change a lot how I will handle my assets.

I think I'll need a threshold, a maximum limit for the number of bytes downloaded per page on my portfolio. I don't even know how to pick one. I want to say 200kb but it's hard to evaluate, between the images that will be lazy loaded, some JS that will be defered. Should I limit my time to FCP instead?

I'll get started and improve gradually later.