[bilingual post] how i optimized my indie website to load in less than 512kb 10/03/2026 00:42 https://jotalea.com.ar/ # english i made my own indie website (with a bio, pictures, links to friends, a blog, interests, fluff[y boys], and even a music player). i even added some fun stuff like a cursor follower. PageSpeed Insights: https://pagespeed.web.dev/analysis/https-jotalea-com-ar/aktlb0i98b?hl=es-419&form_factor=desktop Cloudflare Radar: https://radar.cloudflare.com/scan/e5af0d35-f7ea-4e9e-abf4-b045e4668a34/summary i used vanilla php, no frameworks or anything like that, since they're full of bloat. same goes for the javascript and styles. i did use external libraries, but i loaded them minified from a cdn (the irony is that using a cdn slowed my page load by 400ms because the browser has to connect to another server). i also used [picoCSS](https://picocss.com) because i'm terrible at css, and i patched it with the [catppuccin](https://catppuccin.com) color palette so it matches my desktop. for most images, especially my logo, i drew them manually using the most ridiculous svg editor you can imagine: scratch. yes, the coding platform for kids. i took the svgs from the .sb3 files and ran them through an optimizer, and with all the tweaks i ended up with an image that went from a 2mb png to a 600 byte svg. over 99% compression without losing quality (actually, it's now scalable beyond the 512x512 resolution it had before). for the music player, i didn't want to sacrifice too much quality, so i set it up with lazy loading and partial loading: it loads (approx.) the first 10 seconds of audio, and if the user hits play, the rest loads. the next thing i could optimize is telemetry, because right now it takes 250ms to ping my phone (i use a custom setup that notifies me every time someone views my page, because it makes me happy to know people see it). i also have my own rss feed written in pure php; it's simple, efficient, and lets you follow my posts in whatever app you want. about AI usage, yes, i used ai, i take the blame. i used it for stuff like translations, SEO, css themes, markdown to html conversion, etc. finally, one of the key factors, and possibly the one i'm most proud of, is that the site weighs in at less than 512kb. my goal is to get it into the [512kb club](http://512kb.club). i'm so happy right now. # español hice mi propia página web independiente (indie), con una mini biografía, imágenes, links a páginas de mis amigos, mi propio blog, cosas que hice, cosas que me interesan, y un par de pavaditas como un personaje que sigue el cursor, un reproductor de música, etc. todo eso carga en menos de 512kb (por poco) PageSpeed Insights: https://pagespeed.web.dev/analysis/https-jotalea-com-ar/aktlb0i98b?hl=es-419&form_factor=desktop Cloudflare Radar: https://radar.cloudflare.com/scan/e5af0d35-f7ea-4e9e-abf4-b045e4668a34/summary usé php vanilla, ningún framework ni nada, esos están llenos de bloat. algo muy parecido con el javascript y los estilos. aunque sí usé librerías externas, las cargué de una cdn (la ironía, usar una cdn ralentizó la carga de mi página por 400ms, porque el navegador tiene que conectarse a otro servidor más) en version minificada. también usé [picoCSS](https://picocss.com) porque yo soy pésimo para hacer css, y le apliqué un patch que pone la paleta de colores [catppuccin](https://catppuccin.com), para que combine con mi escritorio. para la mayoría de imágenes, especialmente mi logo, las dibujé manualmente usando el editor svg más ridículo que puedas imaginar: [scratch](https://turbowarp.org). si, la plataforma de programación para niños. después agarré los svgs del .sb3 y los pasé por una página para optimizar svgs, y con todos los ajustes terminé con una imagen que pasó de ser un png de 2mb a un svg de sólo 600 bytes. más de 99% de compresión y sin perder calidad (al contrario, ahora es escalable a más de 512x512, la resolución que tenía antes). para el reproductor de música, no quise sacrificar tanto la calidad, así que lo configure con lazy loading y carga parcial: cargan (aprox.) los primeros 10 segundos del audio, y si el usuario le da al botón de play, ahí se carga el resto. lo siguiente que podría optimizar es la telemetría, porque en este momento toma 250ms para conectarse a mi celular (uso una configuración personalizada que me notifica cada vez que alguien ve mi página, me pone feliz saber que hay gente que la ve). también tengo un feed rss propio escrito en puro php; es simple, eficiente, y permite seguir mis posts en la app que quieras. acerca del uso de IA, sí; usé IA para cosas como traducción, SEO, temas/css, convertir markdown a html, etc. por último, uno de los factores clave, y posiblemente el factor que más presumo, es que la página carga en menos de 512kb. mi objetivo es ponerla en el [club 512 kb](http://512kb.club).