Hasty Treat - 5 More Things That Make Your Site Slow

Episode Summary

Executive Summary: The episode covers five practical web performance tips: reduce shipped JavaScript, bundle and minify code, enable compression, load scripts asynchronously or defer them, and add database indexes. The hosts stress that modern tools can automate much of this work, but developers still need awareness and measurement to avoid bloat and slow queries.

Main Topics: Reducing shipped JavaScript: Discusses avoiding oversized client bundles by using modules, code splitting, tree shaking, and bundle analyzers to identify hidden dependencies and unused code. Bundling, minifying, and compressing assets: Explains why bundling code into fewer files, minifying it, and enabling gzip compression reduce transfer size and improve load speed. Async and defer script loading: Covers how async and defer prevent render-blocking by allowing the browser to continue parsing HTML while scripts download and execute later. How browsers parse and block on scripts: Walks through the browser loading sequence to show why script tags in the head can block rendering and why placing scripts near the body end used to help perceived performance. Database indexing: Highlights indexing as a major backend performance win for fields commonly used in find, sort, filter, and order queries, especially slugs and emails. Modern tooling and automation: Emphasizes that frameworks, bundlers, and platforms now handle many optimizations automatically, reducing developer burden and foot guns.

Key Arguments: Shipping too much JavaScript is a common source of slowdown, especially in older apps with deeply chained dependencies. Bundle analyzers and visualizations make it easier to spot unexpectedly large modules and dependency bloat. Code splitting and tree shaking can remove unused code and reduce final bundle size significantly. Bundling and minification reduce request count and payload size, improving delivery efficiency. Gzip is an easy server-side win because browsers can unpack compressed assets automatically. Async and defer stop scripts from blocking HTML parsing, improving perceived and actual page speed. Database indexes dramatically speed up lookups and sorts on frequently queried fields. Indexes should be applied selectively because too many indexes consume resources and time to build. Many performance issues are now better handled by frameworks and build tools, but developers still need to understand the basics. Measuring and visually inspecting output is essential to avoid hidden performance regressions.

Data Points: Number of performance tips in this episode: 5 - The hosts present five additional performance recommendations in the second part of the series. Example bundle size reduction: 28K minified to 88.5K minified; 2.9K gzipped instead of 9.5K gzipped - Referenced when discussing React Router 6 and the Closure compiler's impact on bundle size. Database size example: 400,000 to 500,000 entries - Wes mentions his data tables are in this range and that index creation is still relatively quick. Query frequency example: 100 times per week - MongoDB Atlas emails suggest indexing queries that ran about this often and were slow. Compression example: 47 repeated occurrences - Used to explain gzip's redundancy reduction with a repeated variable name example. JavaScript bloat example: 200 kilobytes - A React toggle module was cited as unexpectedly large due to dependency weight. Hidden package bloat example: 2 megabytes - A slug library shipped Unicode character descriptions, causing large client-side payload growth.

Pivotal Quotes: "shipping too much JavaScript" — Wes: Introduces the first performance problem: oversized client bundles and hidden dependency bloat. "The parser blocks and stops parsing the other HTML elements on the page." — Scott: Explains why synchronous scripts in the head can delay rendering of visible content. "you can't index everything because then you run out of space." — Scott: Warns that indexing is powerful but must be used selectively due to storage and maintenance costs.

Implications: Listeners should audit bundles, enable compression, load scripts non-blockingly, and index hot database fields. The broader takeaway: performance gains often come from small, disciplined defaults plus tooling, not manual heroics.