technology | end 2014 | May 2015 | increase |
---|---|---|---|
HTML | 59Kb | 56Kb | -5% |
CSS | 57Kb | 63Kb | +11% |
JavaScript | 295Kb | 329Kb | +12% |
Images | 1,243Kb | 1,310Kb | +5% |
Flash | 76Kb | 90Kb | +18% |
Other | 223Kb | 251Kb | +13% |
Total | 1,953Kb | 2,099Kb | +7.5% |
- 100 files in total (up from 95)
- 7 style sheet files (up from 6)
- 20 JavaScript files (up from 18)
- 3 font files (up from 2)
We’re Killing the Web!
A little melodramatic, but does anyone consider 2Mb acceptable? These are public-facing sites—not action games or heavy-duty apps. Some may use a client-side framework which makes a ‘single’ page look larger, but those sites should be in the minority. The situation is worse for the third of users on mobile devices. Ironically, a 2Mb responsive site can never be considered responsive on a slower device with a limited—and possibly expensive—mobile connection. I’ve blamed developers in the past, and there are few technical excuses for not reducing page weight. Today, I’m turning my attention to clients: they’re making the web too complex. Many clients are wannabe software designers and view developers as the implementers of their vision. They have a ground-breaking idea which will make millions—once all 1,001 of their “essential” features have been coded. It doesn’t matter how big the project is, the client always want more. They:- mistakenly think more functionality attracts more customers
- think they’re getting better value for money from their developer, and
- don’t know any better.
The Apple vs Microsoft Proposition
It’s difficult to argue against a client who’s offering to pay for another set of frivolous features. Clients focus more on their own needs rather than those of their users. More adverts on the page will raise more revenue. Showing intrusive pop-ups leads to more sign-ups. Presenting twenty products is better than ten. These tricks work to a certain point, but users abandon the site once you step over the line of acceptability. What do clients instinctively do when revenues fall? They add more stuff. Creating a slicker user experience with improved performance is always lower down the priority list. Perhaps you can bring it to the fore by discussing the following two UX approach examples … Historically, Microsoft designs software by committee. Numerous people offer numerous opinions about numerous features. The positives: Microsoft software offers every conceivable feature and is extremely configurable. The negatives: people use a fraction of that power and it can become overly complex—for example, the seventeen shut-down options in Vista, or the incomprehensible Internet options dialog. Apple’s approach is more of a dictatorship with relatively few decision makers. Interfaces are streamlined and minimalist, with only those features deemed absolutely necessary. The positives: Apple software can be simple and elegant. The negatives: best of luck persuading Apple to add a particular feature you want. Neither approach is necessarily wrong, but which company has been more successful in recent years? The majority of users want an easy experience: apps should work for them—not the other way around. Simplicity wins. Ask your client which company they would prefer to be. Then suggest their project could be improved by concentrating on the important user needs, cutting rarely-used features and prioritizing performance.2015 Can be the Year of Performance
The web is amazing. Applications are cross-platform, work anywhere in the world, require no installation, automatically back-up data and permit instant collaboration. Yet the payload for these pages has become larger and more cumbersome than native application installers they were meant to replace. 2Mb web pages veer beyond the line of acceptability. If we don’t do something, the obesity crisis will continue unabated. Striving for simplicity isn’t easy: reducing weight is always harder than putting it on. Endure a little pain now and you’ll have a healthier future:- use tools to encourage caching, reduce HTTP requests, minify payloads and remove unnecessary components—see The Complete Guide to Reducing Page Weight
- consider Chris Ruppel’s idea of Throttled Thursdays to limit your bandwidth and experience your site/app like your users.
Frequently Asked Questions about 2MB Web Pages
Why are some web pages as large as 2MB?
Web pages can be as large as 2MB due to a variety of factors. These include the use of high-resolution images, videos, and other multimedia content, as well as complex scripts and stylesheets. Additionally, the use of third-party plugins and widgets can also contribute to the size of a web page. While larger web pages can offer more engaging and interactive experiences, they can also lead to slower load times, especially for users with slower internet connections.
How can I reduce the size of my web pages?
There are several strategies to reduce the size of your web pages. These include optimizing images and videos, minifying CSS and JavaScript files, and limiting the use of third-party plugins and widgets. Additionally, using efficient coding practices and server-side compression can also help reduce the size of your web pages.
What is the impact of large web pages on user experience?
Large web pages can negatively impact user experience by causing slower load times. This can be particularly problematic for users with slower internet connections or those using mobile devices. Slow load times can lead to user frustration and may cause users to leave your site, potentially impacting your site’s bounce rate and overall performance.
How does the size of a web page affect its SEO performance?
The size of a web page can significantly impact its SEO performance. Search engines like Google consider page load time as a ranking factor, meaning that larger, slower-loading pages may rank lower in search results. Additionally, slower load times can lead to higher bounce rates, which can also negatively impact your site’s SEO performance.
What is the ideal size for a web page?
There is no definitive answer to this question as the ideal size for a web page can depend on a variety of factors, including the nature of your content, your target audience, and their internet connection speeds. However, as a general rule, it’s recommended to keep your web pages as lightweight as possible to ensure fast load times and a positive user experience.
How can I check the size of my web page?
There are several online tools available that can help you check the size of your web page. These tools typically provide a breakdown of the different elements contributing to your page size, such as images, scripts, and stylesheets, allowing you to identify areas for optimization.
Are there any benefits to having larger web pages?
While larger web pages can lead to slower load times, they can also offer more engaging and interactive experiences for users. High-resolution images, videos, and other multimedia content can enhance the visual appeal of your site and potentially increase user engagement. However, it’s important to balance these benefits with the potential drawbacks of slower load times.
How does the size of a web page affect its mobile performance?
The size of a web page can significantly impact its performance on mobile devices. Larger, slower-loading pages can lead to a poor user experience, especially for users on slower mobile networks. Additionally, larger pages can consume more data, which can be a concern for users with limited data plans.
What are some common causes of large web pages?
Common causes of large web pages include the use of high-resolution images and videos, complex scripts and stylesheets, and third-party plugins and widgets. Additionally, inefficient coding practices and a lack of server-side compression can also contribute to larger web page sizes.
How can I optimize images for my web page?
There are several strategies for optimizing images for your web page. These include reducing the file size of your images, using the correct image format, and implementing responsive images. Additionally, using a content delivery network (CDN) can help deliver your images more efficiently, further improving your page load times.
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.