Web design relies on eye-pleasing aesthetics and fast load times. Unfortunately, those two goals often contradict each other.
A single web page is really a collection of files, or “resources,” such as images, stylesheets, analytics, iframes, favicons, and scripts. If a slideshow has eight photos, for example, then its page might need at least 22 resources:
- The HTML page
- 8 photos
- 8 thumbnails (one per photo)
- 1 CSS stylesheet for presentation
- 2 graphics for the next/back buttons
Not to mention:
- Graphics for the site’s logo, background, decorative header, footer, and frame
- Google Analytics or similar package
- Third-party ads
- Stylesheets for mobile vs. widescreen devices
For example, today’s home page uses 31 files weighing a total of 398.69 KB.
Today, pages that require 50–100 resources are not unusual. If you’ve ever seen a web page begin to load — then halt — load some more — and hesitate — then you were waiting for that page to load the many files it requires outside of the HTML itself.
But resources are only half the story.
Kilobytes vs. resources
Demanding dozens of resources isn’t always a killer bottleneck. Sometimes a web page may load slowly because its files are larger than average. Simply put, more kilobytes take longer to load. A 200-kilobyte file will take twice as long, on average, as a 100-kilobyte file.
Expansive or poorly-compressed photos, complicated backgrounds, and images with transparency contribute to a web page’s weight in kilobytes. jQuery 1.7.1 weighs 94 kilobytes — four times as much as many websites’ logos. And verbose HTML documents don’t help, either.
Oddly, how those kilobytes are organized makes a subtle difference.
Which takes longer, a single 100-kilobyte file or a hundred one-kilobyte files? With a difference of milliseconds, the single large file will load faster than a hundred tiny files because the act of calling for a file requires extra effort for a web server.
Weighing live data
We took a survey of home pages created by the agency from 2010 – today.
As one might expect, pages that requested more files also used more kilobytes.With three exceptions, more resources = more kilobytes. But the more complicated a website is likely to be, the greater variation it may have.
What about those exceptions?
Three sites bucked the trend. Two, highlighted at the top, were original design and a redesign of the same site, both of which required a series of page-wide, bandwidth-hungry JPG files. The third had images which were not properly compressed for the web.
(To be fair, there was a fourth exception. But it required so many kilobytes that the chart would have broken out the top of your screen, and we didn’t want to be responsible for breaking your computer.)
Should graphics surrender quality or size for performance? It depends. How web design balances between aesthetics and performance reflects its authors’ goals. But as we look to a future with pixel-dense screens, we can expect images to grow in kilobytes while occupying the same real estate within a design.