this post was submitted on 18 Mar 2024
797 points (99.0% liked)

Technology

34981 readers
158 users here now

This is the official technology community of Lemmy.ml for all news related to creation and use of technology, and to facilitate civil, meaningful discussion around it.


Ask in DM before posting product reviews or ads. All such posts otherwise are subject to removal.


Rules:

1: All Lemmy rules apply

2: Do not post low effort posts

3: NEVER post naziped*gore stuff

4: Always post article URLs or their archived version URLs as sources, NOT screenshots. Help the blind users.

5: personal rants of Big Tech CEOs like Elon Musk are unwelcome (does not include posts about their companies affecting wide range of people)

6: no advertisement posts unless verified as legitimate and non-exploitative/non-consumerist

7: crypto related posts, unless essential, are disallowed

founded 5 years ago
MODERATORS
you are viewing a single comment's thread
view the rest of the comments
[โ€“] [email protected] 27 points 8 months ago (19 children)

I ended up using a static site generator for my personal site because I fucking hate JS and frameworks and WebComponents. The front page is 646 KB and it loads in 4 seconds. I'd love for it to be 1 second or less, but the fonts are a factor.

And I shrunk the shit out of that background too with pngcrush so miss me with that.

[โ€“] autokludge 16 points 8 months ago

Haven't done this type of optimizing in a long time, I had a quick look at the network graph for your front page (F12 dev tools in desktop browser), my understanding is it looks like you are getting blocked from loading additional resources (fonts + background) until your style sheets are fully read --pink line is document loaded i believe.

It may be worthwhile to experiment with adding some preload links to the html template? or output? like below and assessing if it makes things faster for you.

<link rel="preload" as="image" href="https://volcanolair.co/img/bg1-ultracompressed.webp" fetchpriority="high">

<link rel="preload" as="font" href="https://volcanolair.co/fonts/Inter-Regular.woff2">

<link rel="preload" as="font" href="https://volcanolair.co/fonts/Inter-Bold.woff2">

___

load more comments (18 replies)