4 ms·

Tangental, but it's frustrating creating a website and optimizing it for performance down to the bone; and then having 'mission critical' plugins totally rip th

Tangental, but it's frustrating creating a website and optimizing it for performance down to the bone; and then having 'mission critical' plugins totally rip the potential performance gains to shreds. My ecommerce site [0] (built on a custom stack, not shopify; making it orders of magnitude faster). I got it down to 600kb with 27 network requests total (with it being heavily media/image based). Now find me any other ecommerce site which can boast a comparable network payload. Unfortunately, after throwing google analytics + fb ad trackers + a chat widget + a youtube video, the network requests have ballooned to 100+. It's very ironic how these companies promote the development a performance driven web, but the tools they want us to embed do quite the contrary. They do, however, offer a lot of value. What to do? [0] — www.getfractals.com

spullara 8y ago
Your site is still really fast compared with almost all ecommerce sites. I built the backend for a friend of mine's blog and I always use it as an example of how fast the web could be but yours might be a more impressive example: https://www.lukew.com https://www.lukew.com
- nikkwong 8y ago
  Thank you kindly! The site you have attached is also rocket speed! CMS's like shopify offer great value, and are a great starting place even for technical folks. However I think the lack of prioritization they've placed on the performance of sites on their platform has overall been a net negative for e-commerce at large. The mobile experience of most shopify stores is usually atrocious and the inclination to bounce before page load is all too real. I understand they are working with an old stack, and changing course may be nigh impossible at this point. However, I built my stack in 2014, and the dividends of doing something custom vs the status quo have more than paid off.
- whitepoplar 8y ago
  Check out http://changelog.com http://changelog.com for an example of a fast (it's the fastest site I've ever used) site that's rendered server-side without any of the SPA madness. It's open source, built on Phoenix and makes good use of Turbolinks. (https://changelog.com/posts/why-we-chose-turbolinks https://changelog.com/posts/why-we-chose-turbolinks)
PavlovsCat 8y ago
Tiny thing: the purple buttons change border thickness when hovering, you could give them a 1px transparent border in the default state, to prevent content shift around one pixel when hovering over them.
- nikkwong 8y ago
  Hey, I actually struggled with that a bit, I really appreciate this advice! Will include it tonight :) thank you!
  - PavlovsCat 8y ago
    I've been there myself, glad to help, and love the site :) When transitioning between a different number of properties (e.g. for shadows, gradients) or different types (inset vs normal shadow), this trick is really useful. Here's a fiddle to demonstrate it for box-shadow: https://jsfiddle.net/90o6av2w/ https://jsfiddle.net/90o6av2w/
Rjevski 8y ago
> after throwing google analytics + fb ad trackers + a chat widget + a youtube video But do you actually need all of this? Don’t get me wrong, this is still way ahead compared to the garbage the usual sites load, but I think you can do better. For analytics, is there a way you can only include it for a certain % of requests? This should work fine with analytics and still give you a good overview. The chat widget can be put behind a link on its own page. For YouTube consider having a static thumbnail that links to the video instead of the embed code, or see if another provider offers a lighter embed (Vimeo?)

spullara 8y ago

Your site is still really fast compared with almost all ecommerce sites. I built the backend for a friend of mine's blog and I always use it as an example of how fast the web could be but yours might be a more impressive example: https://www.lukew.com https://www.lukew.com

nikkwong 8y ago
Thank you kindly! The site you have attached is also rocket speed! CMS's like shopify offer great value, and are a great starting place even for technical folks. However I think the lack of prioritization they've placed on the performance of sites on their platform has overall been a net negative for e-commerce at large. The mobile experience of most shopify stores is usually atrocious and the inclination to bounce before page load is all too real. I understand they are working with an old stack, and changing course may be nigh impossible at this point. However, I built my stack in 2014, and the dividends of doing something custom vs the status quo have more than paid off.
whitepoplar 8y ago
Check out http://changelog.com http://changelog.com for an example of a fast (it's the fastest site I've ever used) site that's rendered server-side without any of the SPA madness. It's open source, built on Phoenix and makes good use of Turbolinks. (https://changelog.com/posts/why-we-chose-turbolinks https://changelog.com/posts/why-we-chose-turbolinks)

PavlovsCat 8y ago

Tiny thing: the purple buttons change border thickness when hovering, you could give them a 1px transparent border in the default state, to prevent content shift around one pixel when hovering over them.

nikkwong 8y ago
Hey, I actually struggled with that a bit, I really appreciate this advice! Will include it tonight :) thank you!
- PavlovsCat 8y ago
  I've been there myself, glad to help, and love the site :) When transitioning between a different number of properties (e.g. for shadows, gradients) or different types (inset vs normal shadow), this trick is really useful. Here's a fiddle to demonstrate it for box-shadow: https://jsfiddle.net/90o6av2w/ https://jsfiddle.net/90o6av2w/

Rjevski 8y ago

> after throwing google analytics + fb ad trackers + a chat widget + a youtube video But do you actually need all of this? Don’t get me wrong, this is still way ahead compared to the garbage the usual sites load, but I think you can do better. For analytics, is there a way you can only include it for a certain % of requests? This should work fine with analytics and still give you a good overview. The chat widget can be put behind a link on its own page. For YouTube consider having a static thumbnail that links to the video instead of the embed code, or see if another provider offers a lighter embed (Vimeo?)