maxhaesslein.de

This website is developed with Kirby and is hosted on Uberspace.

• on the live server, everything is static HTML. Nothing gets generated dynamically.
• no tracking codes, ad codes, external webfonts or other external scripts are loaded
• the website is built with Progressive Enhancement in mind and works without JavaScript (and is even usable without CSS)
• JavaScript gets loaded asynchronously after the content (in the viewport) and CSS is loaded
• elements below the fold are lazy-loaded
• every picture has a very small blurry preview picture (around 5 - 8 KB) which is directly embeded into the html via a base64 encoded data URI scheme. This is shown while the full picture is loading.
• all images are available in different resolutions, depending on the pixel density and size of the display
• AVIF and WebP images are provided, with a JPEG fallback for older browsers
• the HTML, CSS and JS is gzipped, which speeds up delivery. It is not minified, because this only makes "view source" unusable and does not improve performance (gzip takes care of additional whitspace, and all the other improvements of minifying are neglectable on this small codebase)
• preview videos and muted, gif-like content-videos are converted to AV1 and hevc/h.265 codecs (with a h.264 fallback for older browsers)
• other videos are not embeded directly but displayed with a preview image and the Vimeo player only get loaded after a click by the user. The player sets the dnt option, so no cookies are set and nothing gets tracked (a description for the 'do not track' option can be found here at the dnt parameter). Additionally, the iframe is sandboxed.
• files get heavily cached by the browser (except HTML files which are only cached for 5 Minutes, because they are allowed to change); all images and videos use a hash in their filename, so the browser knows when they change and can fetch the new version
• Fonts used on this website are Gentium Basic (regular, italic & bold) by Victor Gaultney for text, Grenze Gotisch by Renata Polastri and Omnibus-Type for headlines and M PLUS 1 Code (regular & bold) by Coji Morishita for code blocks.
• the website is developed on my local machine with Kirby and is version-controlled via git - because Kirby uses static text files for the content instead of a database, it's super easy to roll back to an old state. The currently deployed website version is v.14.8.5
• I use a custom bash script that utilizes the static site generator plugin by d4l to build static html pages and sync them to the server via rsync