this is my first post on dev.to and I don't know if it is the right place to share my personal website but I want to give you a little insight what I found interesting while building it.
So on a free sunday I just had the idea to create a tiny personal site to be a bit creative, share my social network accounts and SSH & OpenPGP keys.
I finalized the "design" and wrote down the HTML, CSS & JS. I tested the PageSpeed score with GTmetrix and had a pretty bad score. Fortunately GTmetrix provides some really good guides on how to improve certain criterias. Activated some caching here, enabled some webserver mods there and optimized some assets over there: Neat!
After that I digged a bit deeper in performance on the loading. There was this flash of contents that really annoyed me.
Maybe you see, that there is a video looping in the background (maybe not in Safari because Apple blocks auto-playing videos 🤦). So I had to bridge that time before the background video was loaded. The simple solution was just to take the first frame of the background video as background image. That worked great! 🙂
I also added some
dns-prefetch tags to improve the loading of external assets:
<link rel="dns-prefetch" href="//fonts.googleapis.com"> <link rel="dns-prefetch" href="//www.googletagmanager.com">
Overall it was interesting to see how granular, even the smallest website, can be optimized.
If you have any questions, critique, improvements or similar experiences, I'd be glad if you just answer here!
The code of my website is also, for sure:
🎨 My personal website: kai.neuwerth.me
This repository holds my own static website. You can see the production state right here.
I'm sorry, that I can't ship the background video that is running there because of the license,
but I'm sure you will pick your own background video anyways.
and link it in the
Set up for development
git clone email@example.com:Crease29/kai.neuwerth.me.git cd kai.neuwerth.me npm install grunt build
Feel free to use this codebase
I'd be happy if you just like this setup and "theme" and use it for your own website.
Feel free to leave an issue if you have problems or just want to share what you have done out of it.
Thanks for reading this!