~bohwaz/blog/

Avec de vrais morceaux de 2.0 !

Le web est une poubelle, et tout le monde s'en fout

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 !

Écrire un commentaire
(facultatif)
(facultatif)
(obligatoire)
                              _   
 _ __ ___  ___ ___  ___  _ __| |_ 
| '__/ _ \/ __/ __|/ _ \| '__| __|
| | |  __/\__ \__ \ (_) | |  | |_ 
|_|  \___||___/___/\___/|_|   \__|
                                  
(obligatoire)

Les adresses internet seront converties automatiquement.
Tags autorisés : <blockquote> <cite> <pre> <code> <var> <strong> <em> <del> <ins> <kbd> <samp> <abbr>

benoitb

Tu as de la chance : sur le blog de m01e, la page citée pèse plutôt 818 Kio, pour moi. Et avec Ghostery + ADBlockPlus, elle descend à presque 603 Kio...
Mais contrairement à toi, je n'ai pas de limitation de volume, et un débit sympa. Cependant, ça ne justifie pas cette débauche.
NB : plus de 235 Kio de JQuery. Quand même...

Nono

La même, j'aimerais bien avoir des détails !

Cependant, je me permet quand même de reprendre :
"113 Ko de tracking, pub et autres gadgets dont je n'ai que foutre comme 99% des visiteurs."

De la pub ?! Ou ca ?!?
Des gadget => oui, ceux de wordpress, je n'ai pas ajouté grand chose, et je n'utilise que piwik pour les stats ..
Quand à WOT, il m'a déjà sauvé la vie plus d'une fois, mais c'est vrai que pour la page d'un vrac, ca risque de se payer cher en octet ...

Cela dit 313ko, pour un wordpress, je trouve pas ca très lourd ...

goulougoulou

Ben, l'histoire des débits limités, c'est vers quoi essaient de tendre, et de toutes leurs forces, les FAI français et européens.
Argument de poids : cela éviterait les téléchargements illégaux...
Bref, on en reparlera,

Joko

Partisant u web soft, simple, léger, j'ai du affronter les développeurs "web 2.0" qui préfère charger a coup de dojo pour un effet js ridicule, des graphistes qui "savent" qu'une page sans un minimum de contenus graphiques (en hd, évidemment) perds énormément d'attrait et des dirigeant qui se demandent comment on peut dev un site sans cms / framework

Ces gens là suivent la normalité. Ce qui est normal, c'est "ce que ceux qui réussissent font" ou "ce que le plus grand nombre font"

Le poids de la page concerne les utilisateurs mobiles, et les perdus, comme toi, en couverture réseau faible.

Pour les mobile on triche, on truche, on adapte. Pour les gens limités comme toi, on les ignore.

Mais c'est normal, ton "environnement de surf" ne représente même pas 5% des gens.

Coder propre, coder léger, coder beau, c'est du luxe

erk

Tout à fait d'accord.

Les gens ne savent pas coder en JS, ils disent coder en jquery.

Tout ça pour faire des trucs tous bêtes comme une anim ou un onclick.

L'exemple "Shaarli de Sebsauvage.net" est tout à fait parlant ! Le gars a même pas compris qu'on pouvait faire un objet.onclick ! C'est bien plus clair et en plus, quand jquery sera oublié (dans moins de 10 ans à mon avis), il devra refaire son code car il est trop dépendant d'une librairie).
Et je parle même pas au niveau rapidité...

Mathieu

*troll hors sujet* Je me permets de signaler que ton code JS planterait lamentablement sur un navigateur qui ne supporterait pas au moins une seule des méthodes utilisées (au hasard : querySelector ?). Je sais que c'est trop cool de fustiger jQuery ces temps-ci, mais faut pas oublier que le gros du code de jQuery sert en réalité à tester le support natif des éléments, ou à les émuler s'ils n'existent pas ; le but étant justement de ne pas avoir à reproduire ces tests et codes alternatifs pour tous les navigateurs. (Je sais bien que tout le monde adore tester systématiquement l'existence des fonctions/objets avant de les utiliser, mais bon, on fait pas toujours ce qu'on aime dans la vie *sarcasme*).

Ceci dit, ton propos et très juste. A mon humble avis, si tout le monde optimisait ses pages comme au temps du 56k, on diminuerait la conso énergétique et l'usure d'un sacré paquet de matos sur Terre.

BohwaZ

arthur : je parle du script wot inutile. Si tu veux wot tu installe l'extension, mais l'imposer aux visiteurs je vois pas l'interet. Ceci dit wot en lui meme n'est qu'une blacklist de plus, et impossible d'en faire enlever mes sites flagges a tort...

Sil : l'internet australien est a peine pire que le net francais ou j'avais 3mbps en plein centre de paris... Et la moyenne mondiale theorique est de 2,7 mbps...

Nono : je sais pas si ya de la pub c'est juste que adblock edge bloque des trucs en plus.

Joko : je ne suis PAS en couverture reseau faible, c'est bien la le probleme. Le debit theorique est tres bon, mais en pratique... C'est pas ca.

Mathieu : queryselector est supporte depuis plusieurs annees (IE8, chrome 1, firefox 3, opera 10). Si tu tiens vraiment a supporter les tres vieux brouteurs, utilise base2.js, ca fait 6 ko. Loin des 80 ko de jquery qui est surtout la pour t'inciter a ne pas faire du vrai js...

nico

Oui si tu as que des boutons a a cacher c est mieux de le faire à la main, mais qu'en est il si tu veux améliorer rapidement et facilement l'experience utilisateur sans jquery ?

Mais je suis d accord avec toi sur le principe.

FMR

Salut !
Il existe un navigateur qui ne charge que la partie textuelle des sites nommé "TextOnly" https://play.google.com/store/apps/details?id=com.spacenext.textonly&feature=search_result#?t=W251bGwsMSwxLDEsImNvbS5zcGFjZW5leHQudGV4dG9ubHkiXQ..
De plus, les adds-blocks c'est bien, mais ça charge quand même les pubs en background. Éditer son fichier hosts c'est mieux pour la fluidité dans la mesure où toutes les adresses blacklistées sont redirigées vers le réseau local https://www.facebook.com/AdZHosts

Pour moi la vrais connerie, plutôt que d'utiliser tel ou tel langage web plus ou moins lourd, c'est de faire transiter les chaînes TV dans les tuyaux d'internet (ce qui bouffe 2/3 Méga), ce n'est pas une nécessité. Et puis, que sait on de ce que les FAI font des données TV ? Des stats? Encore un truc privateur de libertés...

BohwaZ

FMR : techniquement la TV ne passe par Internet mais reste sur le réseau interne des FAI.

Nono : Par exemple https://www.mywot.com/en/scorecard/journalintime.com le site a été noté par un robot uniquement sur le fait qu'il figurait sur une blacklist, dont j'essaye vainement de me faire délister depuis dix ans. Donc niveau fiabilité je trouve que WOT c'est plutôt limite... Et évidemment ils ne répondent pas aux mails demandant de délister non plus. Si tu peux faire un truc ça serait super cool de ta part, merci. Comme tu peux voir j'ai bien essayé de commenter pour faire pencher la balance dans l'autre sens mais vu que je ne suis pas un utilisateur aussi "réputé" qu'un robot (forcément) mon commentaire n'a aucune valeur.

Nono

BohwaZ: Il suffisait de contacter le "robot" :)
Je l'avais déjà fait, il est assez rapide à répondre et ... j'ai pris le temps de le faire aujourd'hui. Et son commentaire/rate est déjà supprimé !