WIP: web bloat blog
Nathan Steel
4 years ago
parent
2d8aad6907
commit
527335e205
@ -0,0 +1,101 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="title" content="Web Bloat">
|
||||||
|
<meta name="description" content="The web has become bloated, and inaccessible to many, but continues to head that way. As a collective we need to address the issue, and change this.">
|
||||||
|
<meta name="keywords" content="internet, web, website, bloat">
|
||||||
|
<meta name="author" content="Nathan (Aney) Steel">
|
||||||
|
<meta name="theme-color" content="white">
|
||||||
|
<meta name="theme-color" content="black">
|
||||||
|
<link rel="stylesheet" type="text/css" href="/main.css">
|
||||||
|
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
||||||
|
<title>Web Bloat</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Web Bloat</h1>
|
||||||
|
<hr/>
|
||||||
|
<nav>
|
||||||
|
<a href="/">home</a>
|
||||||
|
<a href="/equipment.html">equipment</a>
|
||||||
|
<a href="/projects.html">projects</a>
|
||||||
|
<a href="/blog/">blog</a>
|
||||||
|
<a href="/sitemap.html">misc</a>
|
||||||
|
<a href="/support.html">support</a>
|
||||||
|
</nav>
|
||||||
|
<hr/>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
<p>The world wide web was designed to be an <a href="https://www.w3.org/People/Berners-Lee/1996/ppf.html">interactive world of shared information</a>. Of course, like everything the web has evolved, and now serves practically everything, from informational sites, to assorted media, and even full fledged applications! With these changes to the web, things have become a little, <em>bloated</em>.</p>
|
||||||
|
|
||||||
|
<h2>What is web bloat?</h2>
|
||||||
|
<blockquote><p>Websites, and pages that are unneccesarily larger than the content they provide.</p></blockquote>
|
||||||
|
<p>This can be seperated into two main points:</p>
|
||||||
|
<ul>
|
||||||
|
<li>The overall webpage filesize is far too high for the content it provides.</li>
|
||||||
|
<li>The real content the webpage offers is too little, and overshadowed by all the meaningless 'content'/anti-user bloat surrounding it.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Why is Web Bloat a problem?</h2>
|
||||||
|
|
||||||
|
<h3>Filesize is too damn high</h3>
|
||||||
|
<p>This is the main concern for most when it comes to web bloat, and for good reason.
|
||||||
|
<p>Webpage filesizes have increased by about <a href="https://httparchive.org/reports/page-weight?start=2011_10_01&end=latest&view=list">3 times (desktop) and 8 times (mobile) the size in the last 10 years</a>, which is fine for most internet users, but not everyone's network speeds have been able to keep up, preventing them from accessing many pages.</p>
|
||||||
|
<blockquote><p>Just because the average person can climb the steps to your store, doesn't mean you should forget about accessibity for those who can't.</p></blockquote>
|
||||||
|
|
||||||
|
<h3>Content isn't king/Anti-user bloat</h3>
|
||||||
|
<p>Many sites have actively chosen to make their marketing, advertising, huge images, auto-playing hero videos, and other non-content (i.e. anti-user bloat) more inportant than the content itself. Not only is this bad from a user experience perspective, as it distracts from the content, but also for filesize, as much of this (bloat) could be omitted, or at the least optimised.</p>
|
||||||
|
<p>An example of this <em>anti-user bloat</em> are seemingly innocent pages that greet users with a mass of adverts, and popups that obstruct the information. That's alone is bad enough, but sometimes still the content itself second to, and positioned below other media, articles, and non-content, making it harder to find.</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<h2>Who's the culprit?</h2>
|
||||||
|
<p>The problem here is not that the web allows for better sharing than ever, but with it's evolution, and growth (<a href="https://www.statista.com/statistics/617136/digital-population-worldwide/">4.66 billion</a> users), many websites were created, corners were cut, and trends were followed that has lead to making the web less accessible.</p>
|
||||||
|
<p>No neccesarily who, but what. And in this case, the what consists of a number of things:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Non-text Content/Media</li>
|
||||||
|
<li>Development Tools</li>
|
||||||
|
<li>Time Restrictions - Project Leads and Employers</li>
|
||||||
|
<li>Careless/Thoughtless Development</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>As the tools available for web development inreasing more, and more developers are making use of these to create websites more quickly, and "efficiently".</p>
|
||||||
|
|
||||||
|
<p>As an example, over the last 10 years many frameworks have popped up to "standardise" (which I believe is an issue of it's own) and make development faster, typically at the loss of granular control, and optimisation. Don't get me wrong, frameworks can be super useful for large bespoke websites, but...</p>
|
||||||
|
|
||||||
|
<h2>What can I do?</h2>
|
||||||
|
<p>I belive this to be topic upon itself, so I'll be writing another article regarding dechonking the web at a later date. For now focus on thinking about the size of your pages, how long they take to load, and what content is truly important.</p>
|
||||||
|
|
||||||
|
<h3>Remove everything un-needed</h3>
|
||||||
|
<p>If there's anything on the page that doesn't add to the page's focal content, remove it. The big wins here are images, video, and scripts, but styling, and text that adds nothing to page should also be taken out.</p>
|
||||||
|
|
||||||
|
<h3>Minimise, compress, and optimise</h3>
|
||||||
|
<p>For the CSS, JS, and media that has been deemed keepable, make sure it's minified and compressed. Minification is an easy way to make filesize savings with no loss for CSS, and JS; with image compresion being very much the same, just take care not to compress images too much or you may lose some quality.</p>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>More...</h2>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://danluu.com/web-bloat" target="_blank" rel="noopener noreferrer ">Dan Luu - Web Bloat</a></li>
|
||||||
|
<li><a href="https://idlewords.com/talks/website_obesity.htm" target="_blank" rel="noopener noreferrer ">Idle Words - Website Obesity</a></li>
|
||||||
|
<li><a href="https://mobiforge.com/research-analysis/the-web-is-doom" target="_blank" rel="noopener noreferrer ">MobiForge - The Web is Doom</a></li>
|
||||||
|
<li><a href="https://speedy.site/website-size-the-average-web-page-size-is-more-than-2mb-twice-the-size-of-the-average-page-just-3-years-ago/" target="_blank" rel="noopener noreferrer ">Speedy Site - Web Page Size</a></li>
|
||||||
|
<li><a href=https://www.youtube.com/watch?v=3J0SPMFjXvs"" target="_blank" rel="noopener noreferrer ">Go Make Things - The lean web (Youtube) </a></li>
|
||||||
|
<li><a href="https://www.apica.io/blog/page-bloat-what-should-we-do-about-it/" target="_blank" rel="noopener noreferrer ">Apacia - Page Bloat, what should we do about it</a></li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<hr/>
|
||||||
|
<p>Written by <a href="http://www.aney.co.uk" target="_blank" rel="noopener noreferrer">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener noreferrer">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener noreferrer">Source Code</a></p>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
Loading…
Reference in New Issue