Hasty Treat - 5 Things That Make Your Site Slow

Episode Summary

Executive Summary: This episode breaks down five common causes of slow websites: slow TTFB, too many or waterfalling requests, oversized assets, missing lazy loading, and lack of a CDN. The hosts emphasize that performance improvements are easiest when tooling automates them by default, so developers don’t have to manually manage complex optimization work.

Main Topics: Slow TTFB (Time to First Byte): They explain TTFB as the delay between a request and the browser receiving the first HTML, driven by DNS lookup, server distance, server processing, and network conditions. Too Many Requests and Waterfalling: The hosts discuss how loading too many scripts, styles, or nested imports creates request overhead and serial loading delays, especially when assets trigger more assets. Oversized Assets: They focus on images as the biggest optimization opportunity, recommending compression, resizing, and automated responsive image generation to reduce download size. Lazy Loading: They cover deferring offscreen images until needed, including native browser support and fallback techniques using intersection observation and data attributes. CDNs and Global Asset Delivery: They explain how CDNs reduce latency by serving assets from geographically closer servers, and note that many modern hosts provide this automatically. Tooling and Default Performance: A recurring theme is that performance best practices need to be automated by platforms and tools, because manual optimization is too difficult for many developers.

Key Arguments: Slow TTFB is often caused by server location and backend processing, not just frontend code. Reducing the number of requests is critical because each additional file adds network and parsing overhead. Waterfalling requests are especially harmful when one asset loads another, creating chained delays. Image optimization is usually the highest-impact asset fix because images are often the largest files on a page. Lazy loading improves initial page load by delaying offscreen content until it nears the viewport. CDNs improve delivery speed by routing users to the nearest server that has the asset. Performance improvements are more likely to be adopted when the platform handles them automatically.

Data Points: LogRocket free trial: 14 days - Sponsored segment promoting session replay debugging. Browser support for native lazy loading: Latest Edge, Firefox, and Chrome - Native image lazy loading support discussed as progressive enhancement. Browser support gap: Safari and iOS Safari do not support native lazy loading - Mentioned as the main limitation of the native attribute. Image optimization example: 30-35% smaller - A GitHub add-on reportedly reduced image sizes in a public repo by this amount. Monitor size example: 34-inch 4K - Wes described serving images based on a large display size. Connection example: 2-megabit down LTE - Used to illustrate that large screens can still be on slow connections. Video likes/dislikes example: 90% like ratio - Scott referenced a video with 1,100 likes and 125 dislikes. Another video like ratio: 34% likes - Scott described a poorly received performance tips video as heavily disliked. Temperature example: 75°F = 23.8°C - A side discussion about converting temperatures between units.

Pivotal Quotes: "“Time to first banana.”" — Wes: A joke riff on TTFB during the explanation of time to first byte. "“The stuff will not be adopted by the masses until the tools do most of the heavy lifting for us.”" — Wes: Argument that automation is necessary for widespread performance improvement. "“Number one first thing to do, check those dang images.”" — Scott: Strong recommendation that image optimization is the first place to look for site speed gains.

Implications: For developers, the biggest speed wins come from reducing backend delay, request count, asset size, and unnecessary downloads. For the industry, default-on optimization in frameworks and hosts is the key to making performance accessible.