Suivre

Bon sinon ça y est, j'ai ENFIN publié mon nouveau site ☺️ Il n'est pas parfait mais je suis passé de près de 20 Mo pour un site "vitrine" (ce qui était beaucoup trop j'en conviens) à un peu moins de 5 Mo (peut mieux faire mais c'est un début, c'est la faute aux fontes) /> dansleru.sh

· · Web · 9 · 9 · 6

Et un énorme merci à @FLOZz pour YOGA qui m'a permis de bien réduire la taille des images ! :)

Afficher le fil de discussion

Bon bah plutôt 4 Mo grâce à @Sans_DeC … pour le coup l'hébergement gratuit (avec un nom de domaine payé) chez OVH me suffirait :troll:

Afficher le fil de discussion

@danslerush Ha...je crois que je suis repéré là ! 😂
Excellent ! Le reste aussi ! 🙏

@brunus Ah ah ah petit "easter egg" aux codeurs fous ! Merci !! 😍

@danslerush @brunus
Je viens de voir le site, le RWD est propre, ça fait plaisir, néanmoins si je peux apporter ma pierre, je te propose de modifier le JS de place en suivant ces recommandations :
flaviocopes.com/javascript-asy
résumé: tu passes le js dans la partie HEAD comme ya 20 ans sauf que là tu ajoute un attribut "defer" et c'est plié :)
Autre point qui te permettra d'avoir un site moins 'lourd', c'est de faire du lazyloading d'image pour tous ce qui est en dessous de la ligne de flottaison.

@draeli Super merci, c'est précieux ce genre de conseil ! Je vais !! 🤗 @brunus

@danslerush @draeli De mon coté je ne voulais pas faire de remarques parce que je trouve le boulot tellement super !
Mais comme Draeli à déclenché les hostilités : quand tu auras le temps remplis les alt des images pour lesquelles ça manque...ça servira au référencement et aux screen readers.
❤️ ☮️

@brunus @danslerush
bon du coup je me sens obligé de répondre :D
Pour le rendu de la page, attention, j'ai que tu as des trucs du genre "RÉSENTATION" ce qui me fait dire que le header HTTP et/ou éventuellement ton fichier ne sont pas encodé en utf-8 (le meta aide à résoudre d'un point de vu navigateur mais derrière techniquement c'est pas foufou).

@brunus @danslerush
Côté JS "en dur" (pas biiennn :D), j'ai vu "Citation = new Array(42);" alors te prend pas la tête comme en C où tu dois déclarer la longueur des tableaux pour des questions de mémoire à allouer. Autre point, et là c'est toi qui vois comment tu peux te le gérer mais quand tu déclares comme ça, ta variable "Citation" tombe dans le scope global donc pour le navigateur ça revient à ce que tu déclares ta variable comme "window.Citation = …", du coup préfère une closure si tu peux

@brunus @danslerush
et du coup pour déclarer le tableau, tu peux utiliser la syntaxe :
variable = [
'phrase1'
, 'phrase2'
, …
];

@draeli Je prends bonne note (je suis loin d'être une star en JS ;D) et oui c'est le seul que j'ai gardé sur la page principal parce que je veux pouvoir éditer/modifier facilement les citations en même temps que le reste du contenu :) @brunus

@danslerush @brunus
Alors si tu veux te créer ton espace de code sans risquer des collisions de noms (ce qui est le point important à retenir), tu peux te faire ta "zone" de code via une closure :
(function(){
// ton code là

var Citation = [

];

})();
ainsi au chargement de la page, la fonction s'auto-exécute et ce qui est déclaré dedans (attention à bien utiliser 'var' avant le nom de la variable) sera exécuté.

@brunus Il est vrai que j'ai des manquements de ce point de vue, OK je rajoute à la pile ! 😅 @draeli

@danslerush@framapiaf.org comment ça pas un traqueurs, ni même un script externe ... REMBOURSER !!! :blobfoxtableflip:

@KazukyAkayashi Ah ah ah ça aurait été gonflé de ma part de cracher dessus et d'en mettre ! :troll:

@danslerush ha ba moi dans mon template j'ai des google fonts qui trainent (hélas...) mais y'a pas d'analytics, ouf
ranafout des stats...lol
@KazukyAkayashi

@lucasbenard 🤣🤣🤣 (le pire c'est que j'y ai même pas pensé)

@danslerush joli travail et double compétence dev / graphisme sympa. Je découvre que tu es aussi sociétaire @telecoop et alors là je suis fan :-)

@danslerush très joli !
Pour les fonts, tu peux peut-être te débarasser de celle utilisée pour DansLeRuSH en mettant une image à la place, non ? (s'il n'y a que la que tu l'utilises)

@silmathoron Alors dans les faits cette fonte, le .ttf, fait 24 Ko. Pour ForkAwesome par exemple je monte à un total de 1,01 Mo mais pour 5 fichiers ... le navigateur n'en chargeant que certains. Mais oui, je sais que j'ai un petit travail dessus. Et merci !! 🖖

@danslerush ah, 24k c'est nettement moins que ce à quoi je m'attendais... peut-être pour plus tard alors, c'est sans doute pas la priorité pour le moment... peut-être le .webp pour les images si tu veux descendre encore en poids du site ?

@silmathoron Je suis pas chaud chaud avec le format webp, je verrai ... à priori je me suis bien embêté à embarquer tous les formats de fontes, le .woff2 suffit

@danslerush en tout cas c'est cool de voir des gens comme toi réfléchir à l'impact de leur site web 👍

@danslerush les fontes ?! Maintenant tous les navigateurs acceptent le woff2, c’est ultra-léger
(environ 20ko à 30ko)

@Sans_DeC M'engueule pas ! Déjà j'ai mis un HTACCESS grâce à toi !! ☺️ Après, j'ai super peur de pas être lisible sur certains navigateurs. Si je mets .woff et .woff2 ?

@danslerush ça passera partout, c’est ce que j’ai sur mon blog.
Enfin sauf si tu veux être compatible Internet Explorer :troll:

@Sans_DeC Merci beaucoup ! ☺️ Donc, sans trop me tromper, me baser uniquement sur du .woff2 et .woff quand je trouve pas ?

@danslerush en fait, si la police n’existe pas en woff2, Fontsquirell peutte créer le kit. Tu upload le ttf ou otf et il te fait un zip avec le woff2 et le fichier css

@Sans_DeC J’atteins presque les 4 Mo, c'est fou la place gagnée MERCI !

@danslerush j'aime beaucoup !
Et perso, Firefox ne charge que 1,1Mo quand j'arrive, c'est le poids total du site 5Mo ?

@fla Merci beaucoup !! ☺️ Oui c'est le poids total, avec toutes les fontes (que tu ne chargeras pas forcément) et quelques ressources aux formats documents/zip à télécharger sans que cela soit indispensable, donc oui le bilan à la consultation simple est plus faible (mon ancien site était un ogre et je regrette un peu d'avoir fait ça)

@fla PS : Et d'ailleurs, le site au global fait maintenant plutôt 4 Mo grâce au passage de toutes les fontes au format woff2

@danslerush si vraiment tu veux réduire la taille tu peux extraire du fichier de font les caractères que tu n'utilises pas.

@fla Certes, je peux grignoter un peu de ce côté là : pour 21 fichiers j'en suis à un total de 543 Ko dont 201 pour ForkAwesome (woff + woff2). J'utilise la fonte Raleway qui embarque des versions cyrilliques et vietnamiennes en plus du latin, je vais voir 🤓

Inscrivez-vous pour prendre part à la conversation
Framapiaf

Le réseau social de l'avenir : Pas d'annonces, pas de surveillance institutionnelle, conception éthique et décentralisation ! Possédez vos données avec Mastodon !