September 16, 2022
File Size on the Web
Why do web developers care so much about saving a few kilobytes?
The web is the world. Almost everyone worldwide has access to the web, be it from a blazing fast internet connection or a really rough signal. But even with a bad signal, a hundred klilobytes shouldn’t matter, right?
Research by Google found that 53% of mobile visitors leave the website if it doesn’t load in 3 seconds. With average load times for sites hovering around 19 seconds on 3G and 14 seconds on 4G, it’s clear that every second matters.
But surely a few megabytes won’t make a difference, right?
The first thing I would check would be your image sizes. Large, unoptimized images can slow down your website significantly. I’ve seen far too many websites with a single 8-12mb photo that accounts for 90+% of the load time and 99% of the file size. Use image compression tools like squoosh.app and consider using optimized image formats like
webp. If you’re using a metaframework such as NextJS for React, try looking into built in solutions (NextJS has NextJS images built in). Also, consider lazyloading images. If you’re using WordPress or another CMS, see if there’s a plugin for automatically optimizing images for your CMS (Try Smush for WP).
Complex animations and videos can impact website performance and slow down load time. To improve the user experience, it’s important to limit animations and use transitions sparingly. Transitions can add visual interest and help guide users through the user interface, but it’s best to use them sparingly and only in response to user input (e.g., hover or click). Too many animations and transitions can be overwhelming and distract from the content. Remember, less is more when it comes to animations and transitions.
When it comes to website performance, fonts are an often-overlooked consideration. While a single font may only be around 20-60kb, using multiple font families, weights, variants, and character sets can quickly add up to hundreds of kilobytes. These fonts must be parsed by the browser, which can slow down load time and be noticeable to users. Even a slight delay in font loading can cause the page layout to shift, which can be frustrating for users. This phenomenon, known as cumulative layout shift (CLS), is something that Google takes into account in its page ranking algorithm. To improve website performance and enhance the user experience, it’s important to be mindful of the number and size of fonts used on your site.
Web font best practices is a great resource for optimizing your fonts.
Final Things to Check
To get a sense of the performance of your website, try using the Lighthouse tool in your inspect element pane of any Chromium browser. You can also open the Network tab in your inspector (any browser), hard refresh (
Ctrl+Shift+R), and view the page waterfall, sorting by size. This will give you a breakdown of the total file sizes and can help you identify areas for optimization.
More Blog Articles