Coding standards are better than ever so why are web page sizes increasing when they shouldn’t be?
Web page sizes are certainly increasing yet coding practice is getting better, designers and developers are able to crush filesizes down better than ever thanks to lots of great tools and techniques so why do we end up with 2mb pages now when we didn’t have them a couple of years back?
If you take a look at the mark-up of any well built website these days you’ll see it’s still lean and arguably contains less “divitis” than ever, if the site has followed best practice outlined by a tool like Google Page Speed or ySlow it will compress and minify assets, use sprites where possible etc etc. All good right, all things that should lower, not raise page size.
Use only what you need to cut the bloat
I asked several fellow designers on Twitter the other day what their “starter kits” included and what the filesize of all the assets people start projects with these days and typically the answers showed roughly similar initial setups for getting a project running including things like
- A simple html page with head/foot html stuff and meta/favicon/apple icons etc
- A base stylesheet with a reset of some sort and some basic styles for typography etc
- Most use HTML5 and therefore include a tool like modernizr.js and response.js
- Perhaps include something like Formalize
- Many include jQuery as well
Nothing too sinister there really and only jQuery adds any significant weight to page size but even with that (delivered from a CDN anyway) means all of the above only runs to about 100-110kb and my own “starter kit” is 118kb.
Still, I think that’s a reasonable start for the options and flexibility. If you’re looking at something with a bit more comprehensive, take a look at HTML5 Boilerplate but beware, the HTML5 Boilerplate “essentials” weigh in at 349kb, we’re looking at something quite hefty there so make sure you need everything in there.
A note about HTML5 Boilerplate: The folks behind the project are very open about it catering for as many use cases as possible and they encourage you to remove what you don’t need. Please take that advice!
Developers aren’t at fault
“There’s always room for some optimisation,” she said, but added that because many developers were self-taught, few were well-educated about how to slim page sizes. Anna Debenham
I know Anna does a lot of great work and talks a lot of sense so I hope partly this is a soundbite for an article that’s been put together and doesn’t read that well because I don’t think any developer worth their salt should be poorly educated about optimisation, page sizes and generally writing good code.
That’s basic stuff and as mentioned, tools like Google Page Speed and ySlow make it really easy to improve performance, there’s no excuse not to be using these guides.
So why does page bloat exist?
Typically looking at a lot of sites these days, the markup is certainly comparable to few years ago, not that much has changed in that respect.
The main thing you’ll notice on more and more sites is the overpowering number of widgets for liking, sharing, being friends with something and ad code everywhere.
It’s not just plugins and widgets of course but anyone waiting for a page to load these days will more often than not notice some delay connecting to Facebook or Twitter as the widgets load.
Of course you will want to share your content but consider the weight and load delay all these widgets are adding to your site.
I like the look of Socialite.js which might well prove a useful remedy for the weight and lack of customisation of sharing buttons.
In the meantime, just keep writing good code and make sure you are aware of the impact of all those scripts that don’t always add value to a site.