Quel site pour produire les styles css d'une page ?

[ortolojf]

Bonjour

Google recommande de mettre les styles css des pages en inline, au moins pour les hauts des pages.

J'ai essayé sans succès de mettre au point un programme php qui fasse celà automatiquement.

Y a-t-il des sites permettant de fournir des pages html, le fichier css global, et qui rende tous les styles css de la page html ?

Merci beaucoup.

Pour l'instant, Google Page Insights m'attribue 98/100 pour les smartphones, et 89/100 environ pour les desktop.

J'espère augmenter ces scores si j'intègre entièrement à mes pages, les styles css.

Merci beaucoup pour vos réponses.

Respectueusement.

 

[ABCWEB]

https://csscompressor.com/

 

[ortolojf]

Bonjour ABCWEB

Ce n'est pas un compresseur css dont j'ai besoin, mais d'un site qui prenne en entrée : Le code css global, le code html de la page, et qui rende seulement les codes css nécessaire et suffisant pour afficher toute la page html.

Je n'arrive pas à trouver un tel site sur Google.

Merci beaucoup pour ton aide.

Amicalement.

 

[cthierry]

Compresser un CSS peut servir quand tu le mets inline. Pour le reste, il te faut récupérer le CSS de la ligne de flottaison (selon GG). Bref il te faut le "critical CSS" <= une petite recherche sur GG et c'est bon

 

[spout]

https://unused-css.com/
https://addons.mozilla.org/en-US/firefox/addon/css-usage/
https://chrome.google.com/webstore/detail/snappysnippet/blfngdefapoapkcdibbdkigpeaffgcil
https://davidwalsh.name/uncss
https://github.com/filamentgroup/criticalCSS
[...]

 

[elas]

!! c'est toujours du cas par cas, et mettre en inline ça plombe parfois les sites

Recommendations
If the external CSS resources are small, you can insert those directly into the HTML document, which is called inlining. Inlining small CSS in this way allows the browser to proceed with rendering the page. Keep in mind if the CSS file is large, completely inlining the CSS may cause PageSpeed Insights to warn that the above-the-fold portion of your page is too large via Prioritize Visible Content. In the case of a large CSS file, you will need to identify and inline the CSS necessary for rendering the above-the-fold content and defer loading the remaining styles until after the above-the-fold content.

• Example of inlining a small css file
• Don't inline large data URIs
• Don’t inline CSS attributes
  
  https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
  
  
  
  

 

[rick38]

https://unused-css.com/
https://addons.mozilla.org/en-US/firefox/addon/css-usage/
https://chrome.google.com/webstore/detail/snappysnippet/blfngdefapoapkcdibbdkigpeaffgcil
https://davidwalsh.name/uncss
https://github.com/filamentgroup/criticalCSS
[...]

Et aussi :
https://github.com/addyosmani/critical

Et une page où il suffit de mettre l'url et la copie du css :
https://jonassebastianohlsson.com/criticalpathcssgenerator/

Après honnêtement levez la main les webmasters qui ont déjà fait ça... c'est un peu pinailler car ça ne concerne que le 1er chargement de la page (après c'est en cache normalement), moi je me limite à merger les fichiers css en seul fichier css, minifié, en enlevant un peu le non-utilisé.

D'autant que le revers de la médaille, c'est que l'utilisateur qui scrolle vite en bas avant que le reste (le fichier css) ne finisse de se charger de façon asynchrone (comme conseillé par Google), va voir sa page toute moche pendant un court instant.

 

[spout]

+1 rick38. De plus on est en 2018 et perso le CSS il est compilé/combiné/minifié à partir de SCSS.

 

[cthierry]

Sans oublier HTTP/2 avec ALPN qui permet de ne plus avoir à se poser la question sauf si comme moi vous avez une version Ngynx/Debian de m#rde qui me permet pas de l'activer lol

 

[ortolojf]

Bof, bof...

J'ai essayé criticalcss sur mon ordinateur, il ne détecte pas les classes des codes html produits par Javascript.

Mon site a déjà des styles inline qui ne sont pas parfaits, je vais voir çà à la main.

Pour les nouveautés techniques, j'y vais pas à pas.

Pour Debian, faudrait déjà que je migre vers Stretch.

Je penche pour une réinstall totale, j'attendrai les prochains VPS d'OVH.

Je suis flemmard.

Respectueusement.

 

[spout]

Je suis flemmard.

Quand on vois le temps que tu perds sur des broutilles, il semblerait que tu le sois pas encore assez

 

[ortolojf]

Bonjour Monsieur Spout

Voici le problème ( algorithmique ) :

Soit deux fichiers déjà formatés : HTML et CSS : Une seule balise ou classe ou id par ligne.

On veut produire uniquement les css communs aux deux fichiers, en suivant l'ordre du HTML, tout en mettant les media queries du CSS à la fin, après le reste.

Je met les css media queries ou non du CSS, dans des variables indicées ad hoc.

Le HTML doit donc être lu de manière séquentielle, et premier arrivé premier servi : Je prend la classe ou id pour chaque ligne du HTML, je lis en boucle les css hors media queries des variables indicées, et j'alimente l'array de sortie quand la balise, classe et/ou l'id matche.

Ensuite, même chose pour les css media queries.

Ma question est : Quel est le nom de cet algorithme ?

D'un côté ( boucle externe ), lecture séquentielle, de l'autre ( boucles interne ), lecture séquentielle globale.

J'ai testé sur mon ordinateur le résultat.

Il y a des classes et/ou id qui manquent dans l'array générée.

Pour me permettre d'avoir de références algorithmiques : J'aurais seulement besoin de savoir le nom ( Anglais ou Français ), de l'algorithme.

Merci beaucoup de vos réponses.

Respectueusement.

 

[spout]

Ma question est : Quel est le nom de cet algorithme ?

ItsTotallyUselessToDoThatForNonLazyPeople

 

[ortolojf]

Bonjour spout

Voilà, je l'ai fait partiellement à la mano.

J'ai quand même réussi à pondre du code suffisamment bien ficelé pour produire des classes/id presque complet, et puis j'ai complété patiemment à la main.

C'est sur le site.

J'ai actuellement encore 89/100 desktop, et 98/100 smartphones.

Respectueusement.