~bohwaz/blog/

Depuis maintenant neuf mois que je voyage en Australie sur les routes, mon seul accès au net est via les accès WiFi publics (bibliothèques, centre villes, etc.) ou via une clé 3G-WiFi. Il faut savoir qu'en Australie tous les accès à Internet sont limités. Pour la 3G il n'y a quasiment pas de fair-use, et je paye 20 dollars (15 €) pour 5 Go de données. Les WiFi publics sont limités aussi, souvent à 50 Mo par session. Pour l'ADSL c'est la même chose : pour 60 dollars par mois (45 €, engagement de 24 mois) vous aurez droit à 50 Go de quota chez la plupart des opéraDepuis maintenant neuf mois que je voyage en Australie sur les routes, mon seul accès au net est via les accès WiFi publics (bibliothèques, centre villes, etc.) ou via une clé 3G-WiFi. Il faut savoir qu'en Australie tous les accès à Internet sont limités. Pour la 3G il n'y a quasiment pas de fair-use, et je paye 20 dollars (15 €) pour 5 Go de données. Les WiFi publics sont limités aussi, souvent à 50 Mo par session. Pour l'ADSL c'est la même chose : pour 60 dollars par mois (45 €, engagement de 24 mois) vous aurez droit à 50 Go de quota chez la plupart des opérateurs. Bref vous faites gaffe à ce que vous faites pour garder votre quota...

Et s'il n'y avait que ça, mais la 3G est poussive, et dans les villes les réseaux sont saturés dès 17-18h jusqu'à 22-23h, avec des débits à pleurer, parfois de l'ordre de 1Ko/s. Le reste de la journée ça va mieux, mais reste le problème du quota. Je pensais qu'avec 5 Go je ferais pas mal de choses, je pourrais même télécharger un peu de musique, genre le dernier Lacrymosa sur Altermusique.org, mais je me suis vite rendu compte que mes sessions web bouffaient le quota à vitesse grand V.

Du coup surfer sur le web me fait souvent m'arracher les cheveux. Car les sites web de nos jours sont conçus par des gens qui sont connectés 24h/24 à la fibre, ou à de l'ADSL illimité comme en France. Des gens qui n'en ont rien à foutre de vous faire charger des centaines d'éléments inutiles sur chaque page. Bref des incompétents qui n'ont aucune idée des usages des vrais gens.

Prenons un exemple : Twitter. Ce service propose de relayer des messages de 140 caractères. Déjà passons sur le fait qu'il est impossible de se retrouver dans l'historique des messages de sa timeline : aucune pagination, aucune mémorisation de ce que vous avez lu. Donc quand on n'a pas que ça à foutre de rester connecté 24/24 à suivre des prouts et des images de chatons, bon courage pour retrouver les messages que vous n'avez pas pu lire. Il faut aller sur la timeline et cliquer sur « More Tweets » des dizaines de fois, charger plein de conneries. Ou alors si vous avez activé Javascript il faut faire défiler la page et attendre que le Javascript veuille bien charger l'historique. Rappelez-moi quel est le crétin qui a décrété que le « défilement sans fin » devait remplacer la pagination ? C'est encore pire !

Mais sans même parler de l'ergonomie déplorable de ce site (qui possède des centaines de développeurs, des ergonomes, des designers, etc. et sans parler du chiffre d'affaire colossal), il suffit de vouloir aller voir un tweet en particulier pour constater qu'ils sont nuls à chier leurs dévs. Prenons un exemple : le message de Sam Hocevar de ce 2 août 2013 qui dit « Tapie : c’est par terre ? ». Il fait 25 caractères. 25 octets. Je veux aller le lire, combien va faire la page ? 100, 200, 300 Ko ? Et non c'est pire : 528 Ko. Et encore c'est compressé.

Je veux bien être gentil et dire que la présentation, les menus, tout ça, une page de 100 Ko serait correcte vu que la page ne contient quasiment rien. Mais là franchement, quel foutage de gueule.

Alors, à quoi ça sert tout ça hein ? Déjà il y a 15 Ko de HTML compressé. Une fois décompressé ça donne plus de 100Ko. Y'a déjà un petit souci à ce niveau. Surtout qu'en regardant de près, on y voit plein de CSS/JS imbriqué pour faire trois fois rien (8Ko de CSS pour définir 4 couleurs et 2 images de fond, chapeau), et des tas d'éléments vides qui ne servent qu'à la présentation et au javascript. Je pense que le web sémantique ils doivent pas connaître chez Twitter, surtout quand on voit des perles comme ça :

  <li class="dropdown-divider"></li>

ou encore :

  <li class="dropdown-caret">
    <span class="caret-outer"></span>
    <span class="caret-inner"></span>
  </li>

Vous vous souvenez du design avec des tables ? Twitter lui fait du design avec des listes. Y'a pas à dire, on a grandement évolué...

Vous dites oui mais y'a le cache des éléments statiques. Oui bien sûr, sauf que pas mal d'éléments ont un cache qui ne dure qu'une demie-heure et évidemment mon disque dur n'est pas extensible à merci (sans compter la gestion chaotique des fichiers de cache par Firefox), et je me retrouve à télécharger toutes ces merdes à chaque session...

Twitter est un exemple criant de disproportion, mais je pourrais aussi vous parler de Facebook, dont les pages sont tellements lourdes à charger que si j'en charge une ça bloque le chargement des autres pages. C'est à dire que le chargement d'une page Facebook arrive à saturer une connexion 3G à 2 Mbps pendant plusieurs secondes.

On pourrait penser que des développeurs plus sensibilisés feraient mieux. Oui, mais non. Par exemple le Shaarli de Sebsauvage.net fait 100 Ko, dont 80 de jQuery, tout ça pour... cacher des boutons.

<script>
$(document).ready(function() {
	$('a.qrcode').click(function(){
	  hide_qrcode();
	  var link = $(this).attr('href');
	  $(this).after('<div class="qrcode" onclick="hide_qrcode();return false;"><img src="'+link+'" width="200" height="200"><br>click to close</div>');
	});
});
function hide_qrcode() { $('div.qrcode').remove(); }
</script>

Alors que ça serait bien plus efficace et léger en Javascript natif (arrêtez de faire du jQuery bordel, si vous mettez du javascript dans votre page faites du javascript) :

<script>
(function () {
	document.addEventListener('DOMContentLoaded', function () {
	    document.querySelectorAll('a.qrcode').forEach(function ()
	    	this.onclick = show_qrcode;
	    });
	});

	var show_qrcode = function () {
		hide_qrcode();
		var link = this.getAttribute('href');
		this.innerHtml += '<div class="qrcode" onclick="hide_qrcode();return false;"><img src="'+link+'" width="200" height="200"><br>click to close</div>';
	};

	var hide_qrcode = function () {}
        var div = document.querySelector('div.qrcode');
        div.parentNode.removeChild(div);
    };
} ());
</script>

Un autre exemple : cet article sur le blog de m0le. La page fait 313 Ko. Y'a plein de JS pour faire des trucs rigolos, je sais pas si ça sert mais admettons qu'on veuille les garder. Rien qu'en activant Adblock Edge (remplaçant communautaire d'Adblock), Ghostery et en bloquant cette merdasse inutile qu'est WOT (qui bloque d'ailleurs certains de mes sites sans raison), on descends à 200 Ko. Sérieusement, 113 Ko de tracking, pub et autres gadgets dont je n'ai que foutre comme 99% des visiteurs.

Aller s'il vous plaît un petit effort, pensez au tiers-monde numérique, arrêtez de surcharger vos pages !