Optimise performance, assets, cache TTL, and general UX #2

New issue

Open

opened 2025-09-01 16:12:34 +00:00 by ari · 0 comments

ari commented

2025-09-01 16:12:34 +00:00

Contributor

Hello!

Your website's UX could be significantly improved. I've made a PR taking the first step at #1 by optimising all image assets and giving them a high fetch priority - similar to how CSS is loaded - to reduce a high LCP, which negatively affects UX.

Further, you could consider the following:

Enable GZIP compression. Since you're using Nginx, this is straightforward. For example:

gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types image/svg+xml text/plain text/xml text/css text/javascript application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript application/x-font-ttf application/vnd.ms-fontobject font/opentype font/ttf font/eot font/otf;

This is a very common configuration used by many servers.

Style images better. They are currently too large and harsh on the eye. For projects, consider using a card layout like https://ari.lt/projects for a cleaner appearance. And when you do switch to a smaller card layout you could further shrink the image dimensions and size, once again improving the load times.
Improve cache settings. This is very important: your site takes over 4 seconds to fully load. Imagine the impact on every user every time they visit. Set proper Cache-Control and Expires headers to provide the best experience. This especially applies to fonts - set the TTL to at least 6 months since they very rarely change.
Optimise fonts: Tools like glyphhanger with the -LATIN option can subset fonts to only the Latin alphabet (including Lithuanian letters), reducing file size.
Avoid delivering fonts only via url(...) in CSS. This causes cache misses and blocking network requests. Instead, consider lazy loading or at least preloading fonts to speed up rendering. Do note however that preloading may cause console warnings when cached and unused, and can slightly increase bandwidth usage due to preconnects, so unless you really want to avoid a little bit of JS, I would recommend lazy loading for a generally cleaner experience.
- Speaking of JS, since your target audience is developers and open source fans, make sure your JS is compatible with LibreJS. For example, see headers of https://ari.lt/ and https://ari.lt/static/js/pow.js - they mark your JS as libre.
Improve font rendering by adding font-display: swap; to your CSS, which improves performance by showing fallback fonts immediately and swapping to the web font once loaded. Optionally, use text-rendering: optimizeSpeed for a very minor performance gain, though it may slightly reduce legibility.
Since your site is static, minify static resources at build time. Minifying HTML, CSS, and JS can reduce load times and improve compression ratios. But if you're doing any form of JS, I would recommend not doing a full minification, but rather removing some unnecessary white space to be more transparent and comply with LibreJS standards while still improving performance.
Add Security headers: even for static content, enabling security headers like those recommended by OWASP and Cloudflare's examples can improve trust and SEO.
- Speaking of SEO, consider adding a custom 404 page, a robots.txt file, and a sitemap.xml. Also consider adding more meta tags, such as keywords, and Open Graph tags for better social sharing.
Add more interactivity. The site currently feels quite basic and, well, static, rigid. Some interactive features could greatly enhance the user experience. Even a basic CSS animation or some simple JS could help :)

I hope this unsolicited advice helps!

Hello! Your website's UX could be *significantly* improved. I've made a PR taking the first step at #1 by optimising all image assets and giving them a high fetch priority - similar to how CSS is loaded - to reduce a high [LCP](https://web.dev/articles/lcp), which negatively affects UX. Further, you could consider the following: * Enable GZIP compression. Since you're using Nginx, this is straightforward. For example: ```nginx gzip on; gzip_disable "msie6"; gzip_vary on; gzip_proxied any; gzip_comp_level 6; gzip_buffers 16 8k; gzip_http_version 1.1; gzip_types image/svg+xml text/plain text/xml text/css text/javascript application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript application/x-font-ttf application/vnd.ms-fontobject font/opentype font/ttf font/eot font/otf; ``` This is a very common configuration used by many servers. * Style images better. They are currently too large and harsh on the eye. For projects, consider using a card layout like <https://ari.lt/projects> for a cleaner appearance. And when you *do* switch to a smaller card layout you could further shrink the image dimensions and size, once again improving the load times. * Improve cache settings. This is _very_ important: your site takes [over 4 seconds to fully load](https://pagespeed.web.dev/analysis/https-uselis-eu/c5rfbdid8j?form_factor=mobile). Imagine the impact on every user every time they visit. Set proper [Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control) and [Expires](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Expires) headers to provide the best experience. This especially applies to fonts - set the TTL to at least 6 months since they very rarely change. * Optimise fonts: Tools like [glyphhanger](https://github.com/zachleat/glyphhanger) with the `-LATIN` option can subset fonts to only the Latin alphabet (including Lithuanian letters), reducing file size. * Avoid delivering fonts only via `url(...)` in CSS. This causes cache misses and blocking network requests. Instead, consider [lazy loading](https://git.ari.lt/ari.lt/ari.lt/src/branch/room101/src/static/js/base.js#L518) or at least [preloading fonts](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload) to speed up rendering. Do note however that preloading may cause console warnings when cached and unused, and can slightly increase bandwidth usage due to preconnects, so unless you really want to avoid a little bit of JS, I would recommend lazy loading for a generally cleaner experience. * Speaking of JS, since your target audience is developers and open source fans, make sure your JS is [compatible with LibreJS](https://www.gnu.org/software/librejs/manual/html_node/Setting-Your-JavaScript-Free.html). For example, see headers of <https://ari.lt/> and <https://ari.lt/static/js/pow.js> - they mark your JS as libre. * Improve font rendering by adding `font-display: swap;` to your CSS, which improves performance by showing fallback fonts immediately and swapping to the web font once loaded. Optionally, use `text-rendering: optimizeSpeed` for a very minor performance gain, though it may slightly reduce legibility. * Since your site is static, minify static resources at build time. Minifying HTML, CSS, and JS can reduce load times and improve compression ratios. But if you're doing any form of JS, I would recommend not doing a full minification, but rather removing some unnecessary white space to be more transparent and comply with LibreJS standards while still improving performance. * Add Security headers: even for static content, enabling security headers like those recommended by [OWASP](https://owasp.org/www-project-secure-headers/) and [Cloudflare's examples](https://developers.cloudflare.com/rules/snippets/examples/security-headers/) can improve trust and SEO. * Speaking of SEO, consider adding a custom 404 page, a [robots.txt](https://en.wikipedia.org/wiki/Robots.txt) file, and a [sitemap.xml](https://en.wikipedia.org/wiki/Sitemaps). Also consider adding more [meta tags](https://www.w3schools.com/tags/tag_meta.asp), such as keywords, and [Open Graph tags](https://ogp.me/) for better social sharing. * Add more interactivity. The site currently feels quite basic and, well, static, _rigid_. Some interactive features could greatly enhance the user experience. Even a basic CSS animation or some simple JS could help :) I hope this unsolicited advice helps!