Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    10,482
    Thanks
    6
    Thanked 1,231 Times in 1,201 Posts

    Average web page weight is expected to exceed 3MB in late 2017

    I was looking for a new mobile data plan that fits my needs and as we all know there are differently priced plans with different data volumes inclusive (from, like, 400MB monthly to “unlimited”). Being a price-conscious consumer that led me to think how much data I would probably consume and that, in turn, led me to wonder how big the average page of a website would be. I came across a few interesting articles on how the web page weight has developed over the years:


    I find most interesting but least surprising from the first article that the size/amount of HTML hasn’t changed all that much, and even despite the increased CSS capabilities with the additional styles for responsiveness the size of the CSS didn’t increase significantly. The worst offender are images that are becoming bigger and are usually poorly (or not at all) optimized. That article also predicts that the 3MB barrier for an average page (and average means that there are pages even bigger than that!) will be broken in late 2017. As the second linked article impressively compares, that’s the size of a good game we played back in the nineties.

    One conclusion I draw from this: our lives get more expensive not only due to monetary inflation but also due to laziness and ignorance on the sides of web developers and content editors.

    Things to ponder …
    Last edited by VIPStephan; 01-13-2017 at 01:49 PM.

  2. #2
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    1,465
    Thanks
    2
    Thanked 219 Times in 209 Posts
    Quote Originally Posted by VIPStephan View Post
    due to laziness and ignorance on the sides of web developers and content editors.
    ... and that really is all it boils down to. For the vast majority of websites out there, NOT counting content, there is ZERO legitimate reason for a page template to break 72k spanning 3 files, assuming screen media is the only target. +1 file and 16k per additional media target like "print".

    That's it, about all that's needed to do the job. But thanks to frameworks, people STILL refusing to extract their cranium from 1997's rectum on coding their HTML, failing to use progressive enhancement or even grasp the simplest of accessibility concepts, and just slathering endless pointless scripting on websites whilst providing ZERO real-world improvement in usability or functionality, the size of websites is becoming mind-numbingly idiotic.

    You can see this in the simple fact that so many relatively simple sites now waste more bandwidth on JavaScript than they do IMAGES!!! -- How this is even acceptable is mind-blowing. A megabyte or more of JavaScript that if you use the page for more time than it took for it to load, it leaves you going "FOR WHAT?!?"

    jQuery, Bootcrap, YUI, Angular, endless pointless idiotic halfwit dumbass nonsense that just makes the sites slower, less user friendly, harder to use, and less accessible -- much less harder to maintain!

    It's why I'm constantly and so vehemently ripping on such stupidity... and it starts even with the HTML, but it grows exponentially from there. You'll see two to five times the HTML needed to do the job and go "well, it's still only 50k", but then it's 200-500k of CSS doing 32k's job, and a megabyte or more of JavaScript on pages that at MOST should have 40k of JS ASSUMING they should even have scripting on them in the first bloody place...

    ... and it tells users -- in places like Northern NH, Western ME, the Dakota's where high speed is 768kbps with 1 second ping, places like Canada and Austrailia where bandwidth caps even on home connections are a reality, or as you discovered users on mobile -- to sod off.

    A lot of it cannot be laziness -- you don't write ten to a hundred times the code needed to do the job and be "lazy". That's what I don't get about a LOT of these frameworks is you end up writing as much if not more code than you'd have without it to do the same job, so how is that any "easier"? How does that make you "more productive"? It HAS to be ignorance or just plain ineptitude in those cases as no other excuse adequately explains it apart from intentional hostility towards anyone who doesn't meet their perfect fairy-tale story of endless unlimited 45mbps broadband with zero ping times.

    ... and never blame on malice what can be adequately explained by stupidity!

    ... and it's not just monetary; think of all the extra POWER consumed by that code. You see it in how some sites can actually suck down 10% of the battery on a cheap phone (like my crappy Cubot) just by loading their complete version without blocking images and scripts! Which is why on mobile I block images and scripts by default!. Think about the extra power needed when every switch, gateway, and router between you and the server has to handle that data... the extra power consumed by the CPU, RAM, wireless broadcasting... it just gets worse and worse.

    In a world that's increasingly interested in using less energy to get the job done (See the strides Intel has made with 10 watt quad core desktops as powerful as a 45 watt AMD, 85 watt i7's that AMD needs 280 watts to compete with) the extra energy these bloated garbage sites waste is just contributing to everyone's woes.

    It's why I've been considering switching from the traditional term "code bloat" to calling certain things people are doing both server and client-side as being "code pollution". It's a laugh when you encounter special snowflake developers who get their panties in a knot if you toss a plastic bottle in the regular trash, but will slop together five different frameworks resulting in a multi-megabyte monstrosity and not see the problem.

    Just look at these forums, your typical vBulle**** slop. Pull up the main forum index... it's there's only one thing on the entire page (apart from the adverts I have blocked that damned near cripple the forums functionality by their mere presence) that warrants JavaScript - the dropdown for inbox notifications... and even that could be done in CSS now. There's only 9.52k of plaintext, and nothing I would even treat as a content image. Despite being a very link-heavy page, there is no real excuse for it to exceed around 25k of HTML -- but that's to the ineptitude of the average vBull developer, they manage to crap out a whopping 104k of HTML, EASILY four or even five times what a simple page needs.... you figure in the ape-**** bat-**** cat-**** rat-**** ridiculouus 3.5 megabyte pageload spanning an even more absurd 361 separate files and it's hardly a shock that without blocking 90%+ of that garbage it's a minute+ first-load here on what's supposed to be a 15mbps connection! (90%+ of that load time being handshaking on all those endless separate 'files for nothing'). You know things are jacked up when it's using 150 separate images that only total 91k, but has 2.8 MEGABYTES of scripting spanning 103 files! Oh baby, who put the herp in the herpaderpaderp...

    All to do the job of 25k of HTML, 32k of CSS, and maybe 16k of JS in three files NOT counting the advertising crap.

    You pop the bonnet? Static scripting in the markup, endless pointless meta no legitimate UA gives a flying purple fish about, absolute URI's on everything, yet another ignorant dumbass framework (YUI), multiple tracking packages, multiple advertising methods many of which are just proven to make users go "screw this, I'm not using this site" if they don't know what an adblock is, endless pointless separate CSS files... But even the simplest parts of the HTML are ... again, just reek of the incompetent. See:

    Code:
    <div class="above_body"> <!-- closing tag is in template navbar -->
    <div id="header" class="floatcontainer doc_header">
    	<span class="logo"><a name="top" href="http://www.codingforums.com/"><img src="http://www.codingforums.com/images/cf-logo.png" alt="CodingForums" /></a></span>
    
    
    
    
    	<div class="bannerBoxHeader" style="display:none">
    		
    		
    	</div>
    
    	
    	<div id="toplinks" class="toplinks">
    			<ul class="isuser">
    				<li><a rel="nofollow" href="login.php?do=logout&amp;logouthash=1484377636-0b912eb78890171117b0ee633b8b77ed4743626e" onclick="return log_out('Are you sure you want to log out?')">Log Out</a></li>
    				
    				<li><a href="usercp.php">Settings</a></li>
    				<li><a rel="nofollow" href="member.php?u=418169">My Profile</a></li>
    				
    				<li class="popupmenu nonotifications" id="nonotifications">
    					<a class="popupctrl" href="usercp.php">Notifications</a>
    					<ul class="popupbody popuphover">
    						<li>No new messages</li>
    						<li><a href="private.php">Inbox</a></li>
    					</ul>
    				</li>
    				
    				<li class="welcomelink">Welcome, <a rel="nofollow" href="member.php?u=418169">deathshadow</a></li>
    			</ul>
                
    					
    	</div>
    
    </div>
    </div><!-- closing div for above_body -->
    Doing the job of:
    Code:
    <div class="mainHeader"><div class="widthWrapper">
    	<h1>
    		<a href="/">
    			CodingForums.com<br>
    			<small>Web coding and development forums
    		</a>
    	</h1>
    	<ul id="userMenu">
    		<li>Welcome, <a rel="nofollow" href="member.php?u=418169">deathshadow</a></li>
    		<li>
    			<a href="usercp.php">Notifications &#x25BC;</a>
    			<ul>
    				<li>No new messages</li>
    				<li><a href="private.php">Inbox</a></li>
    			</ul>
    		</li>
    		<li><a rel="nofollow" href="member.php?u=418169">My Profile</a></li>
    		<li><a href="usercp.php">Settings</a></li>
    		<li><a rel="nofollow" href="login.php?do=logout">Log Out</a></li>
    	</ul>
     <!-- .widthWrapper, #mainHeader --></div></div>

    There is NO words to describe that apart from ignorance and ineptitude... given the lack of semantics and failure to leverage selectors so you don't have to throw classes at EVERYTHING. Sure, it's only around 500 bytes more, but when that's basically 40% more code than needed, lacks basic semantics on one of the most important elements a page should have, passes a hash in the URI instead of letting sessions do their bloody job, and worst of all puts a presentational image in the markup?!? DERP! ... and that's before we talk the REAL dee dee dee of abusing DIV and lists on obviously tabular data!

    But that's standard practice, has been since the HTML 3.2 days and is typical of how many developers just flat out cannot get their mind out of that era... the only difference being they can use "but everybody has broadband" as a lame excuse to cover up for their apathy, ignorance, and wishful thinking!

    It's like "Really jackass? Do you REALLY need 3.5 megabytes spanning a hundred or more files to deliver 5k of plaintext and a half dozen content images where even the IMAGES don't break 150k?!?" -- you can't tell me they slopped in that much unnecessary crap out of laziness given the amount of wasted labor that had to go into such disasters.
    Last edited by deathshadow; 01-14-2017 at 08:44 AM.
    I would rather have questions that can't be answered, than answers that can't be questioned.
    http://www.cutcodedown.com

  3. #3
    Regular Coder Strider64's Avatar
    Join Date
    Dec 2011
    Posts
    174
    Thanks
    5
    Thanked 26 Times in 26 Posts
    Other than a portfolio websites (and maybe some other speciality websites) there is no need for high resolution images.

    The other day when I decided to develop using Google Maps API I noticed that Google was using straight javascript for their tutorials. I said to myself cool for it will force me to stick straight JavaScript. I was even surprised that it wasn't done in jQuery for I have done previous development with Google (I think for my memory isn't as good as once was, but I'm pretty it was Google) that they were using JQuery.
    Last edited by Strider64; 01-14-2017 at 12:49 PM.
    "A person who never made a mistake never tried anything new." ~ Albert Einstein

  4. #4
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    10,482
    Thanks
    6
    Thanked 1,231 Times in 1,201 Posts
    Quote Originally Posted by deathshadow View Post
    A lot of it cannot be laziness -- you don't write ten to a hundred times the code needed to do the job and be "lazy".
    That’s because people don’t write this code, they either copy and paste it together or some point-and-click IDE is writing it for them. And that’s the laziness – combined with ignorance. Poorly optimized embedded fonts are another major factor – for instance, people include the entire Font Awesome font collection (in the worst case from EOT to SVG) without subsetting when they are just using five or ten icons.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •