7 ms·
A 40KB Optimization Saved Us 50TB of Bandwidth
- giantrobot 6y agoWas the optimization breaking scrolling on mobile?
- baptistejamin 6y agoIt is a bug with the default Ghost template that we are using. We are currently fixing this issue.
- dirtnugget 6y agoI don’t know what it is but trying to scroll this page on an iPhone is barely possible, it keeps bouncing back at certain points.
- baptistejamin 6y agoIt is a bug with the default Ghost template that we are using. We are currently fixing this issue.
- unilynx 6y agoBut think of all the bandwidth they’re saving! Reader mode works to read the site
- seanwilson 6y agoIt would be nice if chat boxes only loaded the full chat functionality once the user has interacted with it. Why do they need so load so much just to show a chat widget circle in the corner that likely won't even be clicked on the majority of the time? 170KB for the chat widget is good but when you're trying to make minimal fast loading pages, this is still feels like a lot. If you avoid JS, use minimal CSS and stick to SVG images, you can get whole landing pages to load in under 500KB. One trick I use though is to delay loading chat widget JS for about 5 or 10 seconds after the page loads. It's not needed immediately and the delay lets the browser prioritise loading the rest of the page first.
- baptistejamin 6y agoHello Sean! You are totally right, in many cases splitting the chat in many sub-parts can improve loading time. It is something we tried during our optimization batch. We figured that it wasn’t improving so much the loading time in our case. Saving around 10KB. In fact our JS size is 80KB and CSS 30KB. The rest are fonts. We offer an option for our customers to delay the chat. It’s a built-in feature. Not enabled by default. About landing pages, you are totally right. SVGs make a real difference.
- shortstuffsushi 6y agoPer the article, your total size is something like 230kb, so more than half your size is in fonts? I'm sure I'm in the minority here in that I don't like loading external fonts, but couldn't system fonts be good enough, or using the default of the site you're hosted within?
- seanwilson 6y ago> We figured that it wasn’t improving so much the loading time in our case. Saving around 10KB. Would you be able to offer the feature I mentioned? Load only enough CSS + JS to show the chat widget circle then load the rest after the user clicks? It would need less than 10KB of code total before compression, and then optimising the size of the full widget wouldn't be as critical. I know you can trigger the Crisp chat pop-up programmatically so I guess it's something a user could implement but it would be a feature I would really appreciate since I'm always optimising the page speed of websites I help with.
- lmkg 6y agoFun fact: loading chat boxes on pageload can get you in hot water with GDPR/PECR! Most such services use cookies in some fashion. You don't need consent for cookies that are "strictly necessary" to provide a service, but you can only use that exemption for users who initiate a chat session. FYI this is a concrete example given by a regulatory authority of non-compliant behavior they observe in the wild, so it's not just theoretical.
- 6y ago
- mywittyname 6y agoAre chatboxes actually effective? I hate them with a burning passion. They take up half the screen on mobile, hiding the content I want to see, they often have annoying sounds & animations, and they are always present on pages where I don't expect them to be. A chatbox blocker would be a killer addition to the ABP browser on mobile. Why not create a "Chat with us" page that loads the chatbox instead of force feeding it to every user who comes to your site, wasting bandwidth and load performance?
- seanwilson 6y agoYes, especially for quickly resolving support problems. It's a much more efficient way to communicate complex issues in both directions. Imagine how long a 10 message email chain takes in real time to resolve in comparison. Assumes you have responsive and knowledgeable operators though.
- deleted 6y ago[deleted]
- cyrux004 6y agoI think what you are referring to is different from what is being referred here. This comment is about the chat box on landing webpage which is generally for lead generation/sales
- seanwilson 6y agoI don't see the difference or where they mention that. Messaging a question you have via a chat box and getting a fast and knowledgable answer is useful and way more convenient than writing an email. Sounds + pop-up messages are bad though.
- deleted 6y ago[deleted]
- Quekid5 6y agoI reluctantly[0] concur. Absolutely agreed that the chat responder must be an actual person and also competent. I get the impression that many sites just use a chatbot for the initial interaction and then maybe escalate to a human (competent or not) if you are persistent enough. [0] I don't know why exactly. Maybe it's because I abhor phone convos, so I get similarly nervous around chat... but I really shouldn't because you do get a tad more time to actually formulate responses.
- spzb 6y agoIs the 50TB bandwidth saving actually discussed at all in the article? I certainly can't see it
- hinkley 6y agoI was about to ask the same thing. And where does that savings come from? The improved compression and minification? Reduced packet retransmit? Both?
- godshatter 6y agoI think the 10 items at the end were supposed to be where they cut the sizes down, but it doesn't sound like huge numbers. Unless they are saying that by cutting 40kb out of what is sent across results in 50TB or bandwidth savings over a period of time. Would they have anywhere near that amount of traffic?
- Deukhoofd 6y agoThis might be one of the most obnoxious articles I have read. Randomly making every other sentence bold, underlined or italicized does not serve readability in any way.
- ebg13 6y ago> We are performing those comparisons from the EU, over fiber Internet and a good WiFi access point. That seems like a really stupid marketing move. According to their charts, Zendesk is over 6x the size, but only takes 0.36s longer to load with more network requests and equal CDN latency. If their size difference only matters over a weak connection, they should have done their comparisons with a weak connection. They either threw away an opportunity with their charts or maybe their optimization didn't make a big enough difference to matter in the end. If I were them, I'd redo these tests quickly from somewhere else and update the charts to make it look like what they did matters. Also the "Saved Us 50TB of Bandwidth" in the title isn't discussed anywhere in the post. (And why would a customer care?)
- whoisburbansky 6y agoChatboxes seem fairly unobjectionable, what really grinds my gears is chat bubbles on landing pages. If I'm on a landing page, the last thing I want is a distraction ping and a bunch of notifications trying to boost "engagement." Easiest way to get me to bounce off a page.
- mmastrac 6y ago> Vendored libraries should be built with special optimizations as to remove unused code, for instance Socket.IO which we use to establish a RTM messaging connection to our servers contains a legacy HTTP long-polling connection method — that is quite heavy! — though we only need to use the WebSocket connection method with today's modern browsers; I guarantee that they are going to get burned by a middlebox down the road that breaks websockets.
- baptistejamin 6y agoWe are enforcing websocket since 4 years now and not using long polling since. It works really great as it is widely supported. We removed polling from SocketIO because it was just useless since 4 years.
- CodeWriter23 6y agoHi, there’s some issue where your site gets stuck / won’t scroll on an iPhone 8 Plus, Safari, iOS 14.0.1.
- xmichael0 6y agoLooks like an advertisement pretending to be interesting tech.
- fizixer 6y agoclick-bait: No mention of 50TB bandwidth in the article.
- hinkley 6y agoOne of my hopes for the next ten years is that we normalize collecting and graphing of telemetry data over time, for things like binary size, disk space, memory usage, and network bandwidth. We are fairly good at tracking feature regressions, but it's always only a couple voices calling for tracking these metrics, which are a part of the cost of doing business, one that we often have control over. We shouldn't have to wait for a major event to start looking at these sorts of things.
- ogre_codes 6y ago> "Through this quick article, you'll understand which company offers the fastest live chat solution for website." They spread the Shamwow thick and early in this advert-o-blog don't they?
- microcolonel 6y agoBeing proud of your work isn't Shamwow, it comes naturally when you actually like the thing you made.
- microcolonel 6y agoI wonder how difficult it would be to synthesize the sound instead of loading it from a file. :+ )
- sedatk 6y agoI like having easy access to chat with a real person, but I hate the icons overlaying the content, especially with an even larger tooltip. It directly interferes with my engagement with the content. Why not make it part of the site navigation instead, such as next to login on the web page?
- slaymaker1907 6y agoIf you are so concerned about size, why are you using a custom font? Even optimized, that is apparently 10KB that is completely unnecessary.
- microcolonel 6y agoAs somebody who generally disables JavaScript, I don't really understand why some people here find the little corner chat buttons that obnoxious; I actually use them to get things done on a fairly regular basis and some of them at least tend to work very well (Crisp being among the best). Probably the worst I could say about them is that when people don't design their websites properly, and the button is overtop of something important, there's often nothing you can do. For various business reasons we'll probably end up implementing our own, and I don't see why the loader can't be a couple hundred bytes in one script tag, including its icon, but Crisp at least appears to be the least bad “modern webapp”-style implementation of this. P.S. you can cut down the size of some of your inline SVGs by urlencoding them instead of using base64. So in the CSS for the button, in addition to getting rid of the redundant "result" and "in" parameters (i.e. the default "in" of filter elements is the previous "result", even if it has no name), and just doing your compositing in the filter rather than with use elements, you can use data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='30' width='35'><defs><filter id='a' height='140%' width='140%' x='-15%' y='-15%'><feMorphology in='SourceAlpha' operator='dilate' radius='1'/><feOffset dy='1'/><feGaussianBlur stdDeviation='1'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0'/><feComposite in2='SourceGraphic'/></filter></defs><path fill='white' filter='url(%23a)' d='M14.23 20.46l-9.65 1.1L3 5.12 30.07 2l1.58 16.46-9.37 1.07-3.5 5.72-4.55-4.8z'/></svg> instead of data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjMwIiB3aWR0aD0iMzUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxmaWx0ZXIgaWQ9ImEiIGhlaWdodD0iMTM4LjclIiB3aWR0aD0iMTMxLjQlIiB4PSItMTUuNyUiIHk9Ii0xNS4xJSI+PGZlTW9ycGhvbG9neSBpbj0iU291cmNlQWxwaGEiIG9wZXJhdG9yPSJkaWxhdGUiIHJhZGl1cz0iMSIgcmVzdWx0PSJzaGFkb3dTcHJlYWRPdXRlcjEiLz48ZmVPZmZzZXQgZHk9IjEiIGluPSJzaGFkb3dTcHJlYWRPdXRlcjEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIgc3RkRGV2aWF0aW9uPSIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCBpbj0ic2hhZG93Qmx1ck91dGVyMSIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA3IDAiLz48L2ZpbHRlcj48cGF0aCBpZD0iYiIgZD0iTTE0LjIzIDIwLjQ2bC05LjY1IDEuMUwzIDUuMTIgMzAuMDcgMmwxLjU4IDE2LjQ2LTkuMzcgMS4wNy0zLjUgNS43Mi00LjU1LTQuOHoiLz48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGw9IiNmZmYiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIiB4bGluazpocmVmPSIjYiIvPjwvZz48L3N2Zz4=
- secondcoming 6y agoIt's good to see web developers taking resources into account. Something the rest of software development has been doing since the start.
- solarkraft 6y agoYou probably did great engineering, but wow, you could still fit multiple websites in that.
- nogbit 6y agoYou removed long polling from Socket.io which kills your mobile users since they can’t NAT that web socket. Have you received feedback from your mobile users?
- kelsolaar 6y agoYour page does not scroll properly if at all on iOS 14.0.1 and Safari.