Κρίσιμη γεννήτρια CSS

Ένα δωρεάν γραφικό στοιχείο προγράμματος περιήγησης για μια προηγμένη κρίσιμη γεννήτρια CSS και βελτιστοποιητή από πάνω .

Βελτιστοποιητής στο πάνω μέρος

Κρίσιμη γεννήτρια CSS και βελτιστοποιητής από πάνω

Εισαγωγή

Η γεννήτρια Critical CSS δίνει τη δυνατότητα επίλυσης της ποινής κατάργησης του Core Web Vitals της Google που δεν χρησιμοποιήθηκε , αποκλειστικά με βάση το ελάχιστο CSS. Σας δίνει τη δυνατότητα να επιτύχετε ένα τέλειο αποτέλεσμα pixel .

Το καλύτερο κρίσιμο αποτέλεσμα CSS επιτυγχάνεται σε ένα πραγματικό πρόγραμμα περιήγησης.

Το γραφικό στοιχείο προγράμματος περιήγησης εκτελείται στη σελίδα στην οποία πρόκειται να εξαχθεί το κρίσιμο CSS και επομένως έχει πλήρη εγγενή πρόσβαση στο αρχικό περιβάλλον CSS.

Μπορείτε να επιλέξετε τα φύλλα στυλ ή τα ενσωματωμένα στοιχεία φύλλου στυλ από τα οποία θα εξαγάγετε κρίσιμο CSS. Αυτό είναι βολικό για τη δημιουργία κρίσιμων CSS που μπορούν να μοιραστούν μεταξύ των σελίδων.

Το γραφικό στοιχείο του προγράμματος περιήγησης έχει επίσης μια δυνατότητα αφαίρεσης σημαντικών CSS από φύλλα στυλ.

Το εργαλείο είναι χωρίς κατασκοπεία. Χωρίς Google Analytics ή παρακολούθηση. Ασφαλές στη χρήση και μπορεί να χρησιμοποιηθεί τοπικά μέσω μιας προσωρινής μνήμης Service Worker.

Το γραφικό στοιχείο προγράμματος περιήγησης παρέχει ένα παράδειγμα πιο προηγμένου κρίσιμου λογισμικού CSS που μπορεί να χρησιμοποιηθεί μέσω ενός προγράμματος περιήγησης Chrome στο Google Cloud. Δείτε για περισσότερες πληροφορίες την προσθήκη επαγγελματικής βελτιστοποίησης .

Εγκαθιστώ

Για να εγκαταστήσετε το γραφικό στοιχείο, σύρετε αυτόν τον σύνδεσμο🗔 Critical-CSS στη γραμμή αγαπημένων ή αντιγράψτε και επικολλήστε τον παρακάτω κώδικα.

javascript:(function(r,a,k,l,f,g,b,m){function n(c,b,d){a.open();b&&(r.onmessage=b);d&&a.addEventListener("securitypolicyviolation",d);a.write(c);a.close()}f="https://x.pagespeed.pro/";g="Critical-CSS widget";var c=a.createElement("script");c.src=f+"x.js";c.onerror=function(){function p(d){if(c=d?d.violatedDirective:0){if("script-src"==c||m)return;m=1;b&&l(b)}if(!q){var h=f+"#"+a.location;a.getElementById("e").innerHTML='<h2 style="color:red;">'+g+(c?' blocked by CSP <font color="blue">'+c+"</font>":" failed to load")+'.</h2><h3>Redirecting <a href="'+h+'">'+h+"</a>...</h3>";b=k(function(){a.location.href=h},3E3)}}var q;n("<h2>Loading "+g+" via Service Worker...</h2><iframe src="+f+'go height=50></iframe><p id="e"></p>',function(a){q=1;b&&l(b);n("<script>"+a.data+"\x3c/script>")},p);b=k(p,2E3)};a.head.appendChild(c)})(window,document,setTimeout,clearTimeout);

Χαρακτηριστικά

1. Προηγμένη γεννήτρια κρίσιμων CSS

   1. Προσαρμοσμένη που αναπτύχθηκε με βάση το PostCSS , έναν από τους καλύτερους αναλυτές CSS.
   2. Υποστηρίζει πολλαπλές θύρες προβολής (επιτραπέζιου υπολογιστή + φορητό υπολογιστή) για κρίσιμο CSS με απόκριση .
   3. Έλεγχος με κουκλοθέατρο όπως το πρόγραμμα περιήγησης, συμπεριλαμβανομένων των συμβάντων κλικ, ποντικιού (ανάρτηση, μετακίνηση κ.λπ.), κύλιση, εκτέλεση προσαρμοσμένου κώδικα javascript και πολλά άλλα.
   4. Ακατέργαστη μη βελτιστοποιημένη καθαρή κρίσιμη έξοδος CSS.

2. Βελτιστοποιητής στο πάνω μέρος

   1. Συγκρίνετε το κρίσιμο CSS με το αρχικό CSS.
   2. Προσαρμόσιμοι χάρακες μέτρησης pixel.

3. Προηγμένα εργαλεία βελτιστοποίησης

   1. Μη χρησιμοποιημένο εργαλείο αφαίρεσης CSS για την αφαίρεση κρίσιμων CSS από φύλλα στυλ.
   2. Επαγγελματικό λογισμικό συμπίεσης (minify) και βελτιστοποίησης CSS.
   3. Επισκευή κατεστραμμένου CSS. Ένα εργαλείο για τη διόρθωση κακής μορφής CSS.
   4. Αυτόματο πρόθεμα. Ένα εργαλείο για την εφαρμογή προθεμάτων προγράμματος περιήγησης σε CSS.
   5. Στατιστικά και αναλυτικά στοιχεία CSS.
   6. Ομορφαίνει το CSS.
   7. Προηγμένο CSS lint.
   8. Διπλότυπο αφαίρεσης CSS.
   9. Προηγμένο πρόγραμμα επεξεργασίας CSS συνδεδεμένο με CSS lint με συμβουλές βελτιστοποίησης.

Τρόπος χρήσης

Βήμα 1: ξεκινήστε το γραφικό στοιχείο του προγράμματος περιήγησης σε μια σελίδα

Μεταβείτε στη σελίδα για την οποία θέλετε να εξαγάγετε κρίσιμο CSS και ξεκινήστε το γραφικό στοιχείο του προγράμματος περιήγησης. Κάντε κλικ εδώ για οδηγίες εγκατάστασης.

Βήμα 2: δημιουργία κρίσιμου CSS

Η κρίσιμη γεννήτρια CSS είναι προσβάσιμη μέσω της καρτέλας Εργαλεία στην κεφαλίδα.

Διαμορφώστε το JSON χρησιμοποιώντας τις επιλογές στην τεκμηρίωση .

Βήμα 3: βελτιστοποιήστε το αποτέλεσμα

Η έξοδος της κρίσιμης γεννήτριας CSS είναι ακατέργαστη και απαιτεί περαιτέρω βελτιστοποίηση, όπως συμπίεση.

Το κουμπί Optimize στο μενού επεξεργασίας επιτρέπει την εφαρμογή προηγμένης βελτιστοποίησης και συμπίεσης κώδικα.

Τεκμηρίωση

Κρίσιμη γεννήτρια CSS

Η κρίσιμη γεννήτρια CSS δέχεται τις ακόλουθες επιλογές.

Εμφάνιση παραδείγματος παραμέτρων

{
  "atRulesToKeep": [],
  "atRulesToRemove": [],
  "selectorsToKeep": [
    "*",
    "*:before",
    "*:after",
    "html",
    "body"
  ],
  "selectorsToRemove": [
    "/\#C/",
    "/\.chattxt/"
  ],
  "propertiesToKeep": [],
  "propertiesToRemove": [
    "/(.*)transition(.*)/i",
    "cursor",
    "pointer-events",
    "/(-webkit-)?tap-highlight-color/i",
    "/(.*)user-select/i"
  ],
  "pseudoSelectorsToKeep": [
    "::before",
    "::after",
    "::first-letter",
    "::first-line",
    ":before",
    ":after",
    ":first-letter",
    ":first-line",
    ":visited",
    "/:nth-child.*/"
  ],
  "pseudoSelectorsToRemove": [],
  "maxElementsToCheckPerSelector": false,
  "maxEmbeddedBase64Length": 1000,
  "strictParser": false,
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "Ρυθμίστε τη θύρα προβολής για ανακάλυψη CSS στο πάνω μέρος."
    },
    {
      "wait": 1000,
      "notes": "Περιμένετε 1000 ms για να ενεργοποιηθεί η απόδοση της θύρας προβολής."
    },
    {
      "run": true,
      "notes": "Εκτελέστε κρίσιμη γεννήτρια CSS (υπολογισμός CSS στο πάνω μέρος)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Ενεργοποίηση νέου MouseEvent σε στοιχείο DOM a.nav-menu."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Εκτελέστε ένα σενάριο, σε αυτήν την περίπτωση κλείστε το μενού πριν συνεχίσετε με την επόμενη θύρα προβολής."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Ενέργειες διεπαφής χρήστη της γεννήτριας Critical CSS

Η κρίσιμη γεννήτρια CSS παρέχει έλεγχο προγράμματος περιήγησης τύπου Puppeteer. Η παράμετρος ui_actions δέχεται έναν πίνακα με αντικείμενα ενεργειών διεπαφής χρήστη που ορίζουν αλλαγές κατάστασης διεπαφής χρήστη με χρονολογική σειρά.

{
  "run": true
}

{
  "wait": 1000
}

{
  "viewport": "1300x900"
}

{
  "scroll": 400
}

{
  "event": "click",
  "selector": "a.link"
}

{
  "mouseevent": "mouseover",
  "selector": "a.link",
  "mouseEventInit": {
    "bubbles": true,
    "cancelable": true
  }
}

{
  "script": "Popups.close();"
}

{
  "fn": "action_to_perform",
  "promise": true
}

{
  "script": "add_to_cart();",
  "notes": "περιγραφή της ενέργειας διεπαφής χρήστη για προσωπική χρήση"
}

Εμφάνιση παραδείγματος παραμέτρων

{
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "Ρυθμίστε τη θύρα προβολής για ανακάλυψη CSS στο πάνω μέρος."
    },
    {
      "wait": 1000,
      "notes": "Περιμένετε 1000 ms για να ενεργοποιηθεί η απόδοση της θύρας προβολής."
    },
    {
      "run": true,
      "notes": "Εκτελέστε κρίσιμη γεννήτρια CSS (υπολογισμός CSS στο πάνω μέρος)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Ενεργοποίηση νέου MouseEvent σε στοιχείο DOM a.nav-menu."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Εκτελέστε ένα σενάριο, σε αυτήν την περίπτωση κλείστε το μενού πριν συνεχίσετε με την επόμενη θύρα προβολής."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Μη χρησιμοποιημένο εργαλείο αφαίρεσης CSS

Το μη χρησιμοποιημένο πρόγραμμα αφαίρεσης CSS χρησιμοποιεί το ίδιο λογισμικό με το κρίσιμο πρόγραμμα εξαγωγής CSS και δέχεται σχεδόν τις ίδιες επιλογές διαμόρφωσης, συμπεριλαμβανομένου του ελέγχου του προγράμματος περιήγησης τύπου Puppeteer μέσω ενεργειών διεπαφής χρήστη. Το εργαλείο επιτρέπει επίσης την εξαγωγή αχρησιμοποίητου CSS.

Εμφάνιση παραδείγματος παραμέτρων

{
  "atRulesToKeep": [
    "charset",
    "keyframes",
    "import",
    "namespace",
    "page"
  ],
  "atRulesToRemove": [],
  "selectorsToKeep": [
    "*",
    "*:before",
    "*:after",
    "html",
    "body"
  ],
  "selectorsToRemove": [],
  "propertiesToKeep": [],
  "propertiesToRemove": [],
  "pseudoSelectorsToKeep": [
    "/:.*/"
  ],
  "pseudoSelectorsToRemove": [],
  "maxElementsToCheckPerSelector": false,
  "strictParser": false,
  "ui_actions": [
    {
      run: true
    }
  ]
}

Διπλότυπο αφαίρεσης CSS

Το πρόγραμμα αφαίρεσης διπλότυπου CSS καθιστά δυνατή τη σύγκριση δύο φύλλων στυλ και την αφαίρεση ή την εξαγωγή του διπλότυπου CSS.

Εμφάνιση παραδείγματος παραμέτρων

{
  "atRulesToKeep": [],
  "atRulesToRemove": [],
  "selectorsToKeep": [],
  "selectorsToRemove": [],
  "propertiesToKeep": [],
  "propertiesToRemove": [],
  "strictParser": false
}

Το δεύτερο πεδίο εισαγωγής δέχεται τον αριθμό ευρετηρίου του φύλλου στυλ. Μπορείτε να βρείτε το ευρετήριο ενός φύλλου στυλ στην επισκόπηση του φύλλου στυλ στην καρτέλα ρυθμίσεων.

Επισκόπηση ευρετηρίου φύλλου στυλ

Μπορείτε να ανεβάσετε ένα φύλλο στυλ ή να συγκρίνετε φύλλα στυλ από εξωτερικές διευθύνσεις URL δημιουργώντας ένα νέο φύλλο στυλ. Στη συνέχεια, μπορείτε να εισαγάγετε διευθύνσεις URL ή να ανεβάσετε τα φύλλα στυλ και να χρησιμοποιήσετε το ευρετήριο από το νέο φύλλο στυλ στο διπλότυπο πρόγραμμα αφαίρεσης CSS.

Εισαγωγή ή μεταφόρτωση φύλλων στυλ

Αφού ρυθμίσετε τις παραμέτρους, πατήστε το κουμπί για να ξεκινήσει η διπλότυπη αφαίρεση CSS. Ένα σχόλιο CSS θα εμφανίσει βασικά στατιστικά στοιχεία του μειωμένου CSS που προκύπτει.

Αποτέλεσμα διπλότυπης αφαίρεσης CSS