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

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par ortolojf, 25 Avril 2018.

  1. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 560
    J'aime reçus:
    31
    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.
     
    #1 ortolojf, 25 Avril 2018
  2. ABCWEB
    ABCWEB WRInaute passionné
    Inscrit:
    22 Octobre 2015
    Messages:
    1 289
    J'aime reçus:
    169
    #2 ABCWEB, 25 Avril 2018
  3. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 560
    J'aime reçus:
    31
    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.
     
    #3 ortolojf, 25 Avril 2018
  4. cthierry
    cthierry WRInaute passionné
    Inscrit:
    15 Janvier 2005
    Messages:
    2 353
    J'aime reçus:
    87
    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 :)
     
    #4 cthierry, 25 Avril 2018
  5. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 157
    J'aime reçus:
    334
    #5 spout, 25 Avril 2018
  6. elas
    elas WRInaute impliqué
    Inscrit:
    26 Février 2008
    Messages:
    752
    J'aime reçus:
    30
    !! 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.
     
    #6 elas, 25 Avril 2018
  7. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 979
    J'aime reçus:
    327
    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.
     
    #7 rick38, 25 Avril 2018
  8. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 157
    J'aime reçus:
    334
    +1 rick38. De plus on est en 2018 et perso le CSS il est compilé/combiné/minifié à partir de SCSS.
     
    #8 spout, 25 Avril 2018
  9. cthierry
    cthierry WRInaute passionné
    Inscrit:
    15 Janvier 2005
    Messages:
    2 353
    J'aime reçus:
    87
    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
     
    #9 cthierry, 25 Avril 2018
    spout apprécie ceci.
  10. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 560
    J'aime reçus:
    31
    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.
     
    #10 ortolojf, 25 Avril 2018
  11. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 157
    J'aime reçus:
    334
    Quand on vois le temps que tu perds sur des broutilles, il semblerait que tu le sois pas encore assez :D
     
    #11 spout, 25 Avril 2018
    Furtif apprécie ceci.
  12. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 560
    J'aime reçus:
    31
    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.
     
    #12 ortolojf, 26 Avril 2018
  13. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 157
    J'aime reçus:
    334
    ItsTotallyUselessToDoThatForNonLazyPeople
     
    #13 spout, 26 Avril 2018
  14. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 560
    J'aime reçus:
    31
    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.
     
    #14 ortolojf, 30 Avril 2018
(Vous devez vous identifier ou vous inscrire pour poster ici.)
Chargement...
Similar Threads - produire styles css Forum Date
Reproduire le système de ping de WP Développement d'un site Web ou d'une appli mobile 19 Juillet 2010
Reproduire des affiches Droit du web (juridique, fiscalité...) 10 Juin 2009
Est-ce légal de reproduire une base de données officielle ? Le café de WebRankInfo 15 Juin 2005
feuilles de styles non obtenues par Googlebot Crawl et indexation Google, sitemaps 28 Septembre 2018
stylesheet dans le head ou asynchrone ? Développement d'un site Web ou d'une appli mobile 17 Septembre 2015
Comment supprimer des styles CSS et du JavaScript sur son site ? Développement d'un site Web ou d'une appli mobile 27 Novembre 2013
Plusieurs styles de tableau ? Développement d'un site Web ou d'une appli mobile 28 Juin 2012
Feuilles de styles CSS : pourquoi vos mailings arrivent en vrac Développement d'un site Web ou d'une appli mobile 29 Septembre 2011
Deux feuilles de Styles Développement d'un site Web ou d'une appli mobile 30 Janvier 2010
Deux champ FORM styles différents sur une page Développement d'un site Web ou d'une appli mobile 31 Juillet 2009
feuilles de styles Débuter en référencement 29 Juillet 2009
Styles du forum phpbb3_milky_way Développement d'un site Web ou d'une appli mobile 8 Novembre 2008
Annuaire des seniors (conseil styles et couleurs) Demandes d'avis et de conseils sur vos sites 15 Juin 2008
Styles CSS pour tous les navigateurs Développement d'un site Web ou d'une appli mobile 13 Janvier 2008
[CSS] Formatage de liens de différents styles Développement d'un site Web ou d'une appli mobile 30 Novembre 2007
Styles dans les listing <option> Développement d'un site Web ou d'une appli mobile 3 Juillet 2006
Styles CSS et importance des h1 Référencement Google 3 Juillet 2006
Goggle crawle les feuilles de styles CSS Référencement Google 23 Juin 2006
2 styles CSS sur une boucle en php Développement d'un site Web ou d'une appli mobile 19 Juin 2006
styleswitcher c'est lent ? Développement d'un site Web ou d'une appli mobile 16 Mai 2006