search

bartervg / barter.vg

Track and hold discussion on Barter.vg bugs, enhancements, and other issues
https://barter.vg
MIT License
20 stars 4 forks source link

Site optimization #253

Open Revadike opened 3 years ago

Revadike commented 3 years ago

General purpose issue to talk about site optimization.

Suggestions:

Revadike commented 3 years ago

I noticed you're currently using full-length url's on the page document, even for the same domain. Since most barter pages have a lot of (internal) links, it would reduce the document size quite a lot, by using relative links, instead of absolute links. So, for example:

<a href="https://barter.vg/u/48e/o/">My offers</a>

will become

<a href="/u/48e/o/">My offers</a>

or even this, if we're currently on the user page:

<a href="o/">My offers</a>
Revadike commented 3 years ago

Another obvious way to reduce document size, is to simply minify it. I think Cloudflare has an option to do this automatically. So, you could just enable that.

Revadike commented 3 years ago

Since barter also makes use of a lot of images, especially on pages with a lot of games, it may be beneficial to implement lazy loading for images. My personal experience with this is great. All you need is the JS library. Take a pick.

bartervg commented 3 years ago

I used Revadike's library as a test https://barter.vg/u/48e/l/ and it is very slow.

Since the pages are compressed, minify and relative URL would make a modest difference. The HTML alone is 1.9MB (uncompressed 25.2MB). Removing the absolute links to Barter profiles pages led to 1.9MB (uncompressed 24.6MB). Although minify would remove some line breaks and tabs, the HTML is a dozen lines (CSS is another problem).

Normally, I do not browse with images on, but I turned them on for the test. Lazy load is a native HTML feature: loading="lazy". I added it to the collection pages. In addition, I changed to Steam's Cloudflare CDN (cdn.cloudflare.steamstatic.com) instead of Akamai (steamcdn-a.akamaihd.net). This could improve the chances that the image is already cached (although Steam uses unique cache breackers e.g. t=1616505227, therefore, probably it won't).

I remove the title from the alt text. For example, Contradiction - the all-video murder mystery adventure capsule logo Contradiction - the all-video murder mystery adventure is now capsule logo Contradiction - the all-video murder mystery adventure. In addition, the capsule is inline-block so it is the same size even when the image doesn't load.