מחולל CSS קריטי

ווידג'ט חינמי של דפדפן עבור מחולל CSS קריטי מתקדם ומייעל לחלק העליון והקבוע . כלי להשגת תוצאה מושלמת של פיקסלים עם מינימום CSS אפשרי.

תוצאת CSS קריטית הטובה ביותר מושגת בדפדפן אמיתי.

יישומון הדפדפן מבוצע בעמוד בו יש לחלץ CSS קריטי ולכן יש לו גישה מקורית מלאה לסביבת ה-CSS המקורית.

אתה יכול לבחור את גיליונות הסגנונות או רכיבי גיליון הסגנונות המוטבעים מהם לחלץ CSS קריטי. זה שימושי ליצירת CSS קריטי שניתן לשתף בין דפים.

לווידג'ט הדפדפן יש גם תכונה להסרת CSS קריטי מגיליונות סגנונות.

הכלי נטול ריגול. אין גוגל אנליטיקס או מעקב. בטוח לשימוש וניתן להשתמש בו באופן מקומי דרך מטמון Service Worker.

The browser-widget provides an example of more advanced critical CSS software that can be used through a Chrome browser in Google Cloud. See for more information our professional optimization plugin.

להתקין

כדי להתקין את הווידג'ט, גרור את הקישור הזה🗔 קריטי-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="קריטי-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);

אופטימיזציה של מעל הקפל

מחולל CSS קריטי ומייעל מעל הקפל

מחולל ה-CSS הקריטי מאפשר לפתור את חיוני הליבה באינטרנט של גוגל להסיר עונש לא בשימוש-CSS אך ורק על בסיס מינימום CSS.

תכונות

1. מחולל CSS קריטי מתקדם

   1. פותח בהתאמה אישית על בסיס PostCSS , אחד ממנתחי ה-CSS הטובים ביותר.
   2. תומך ביציאות צפייה מרובות (שולחן עבודה + נייד) עבור CSS קריטי תגובה .
   3. שחק בובות כמו שליטה בדפדפן כולל לחיצה, אירועי עכבר (רחף, הזזה וכו'), גלילה, ביצוע קוד javascript מותאם אישית ועוד הרבה יותר.
   4. פלט CSS קריטי טהור ללא אופטימיזציה.

2. אופטימיזציה של מעל הקפל

   1. השווה CSS קריטי ל-CSS המקורי.
   2. סרגלי מדידת פיקסלים הניתנים להתאמה אישית.

3. כלי אופטימיזציה מתקדמים

   1. מסיר CSS לא בשימוש להסרת CSS קריטי מגיליונות סגנונות.
   2. תוכנת דחיסת CSS (Minify) ואופטימיזציה מקצועית.
   3. תיקון CSS שבור. כלי לתיקון CSS פגום.
   4. Autoprefixer. כלי להחלת קידומות דפדפן ל-CSS.
   5. סטטיסטיקה וניתוח של CSS.
   6. CSS לייפות.
   7. מוך CSS מתקדם.
   8. מסיר CSS כפול.
   9. עורך CSS מתקדם מחובר ל-CSS lint עם עצות אופטימיזציה.

איך להישתמש

שלב 1: הפעל את ווידג'ט הדפדפן בדף

Navigate to the page for which you want to extract critical CSS and start the browser widget. Click here for installation instructions.

שלב 2: יצירת CSS קריטי

ניתן לגשת אל מחולל ה-CSS הקריטי דרך הכרטיסייה כלים בכותרת.

Configure the JSON using the options in the the documentation.

שלב 3: מטב את התוצאה

הפלט של מחולל ה-CSS הקריטי הוא גולמי ודורש אופטימיזציה נוספת כגון דחיסה.

כפתור האופטימיזציה בתפריט העורך מאפשר להחיל אופטימיזציה ודחיסה של קוד מתקדמים.

תיעוד

מחולל 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 אלפיות השנייה כדי לאפשר לתצוגה לעיבוד."
    },
    {
      "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 הקריטי מספק שליטה בדפדפן דמוי 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 אלפיות השנייה כדי לאפשר לתצוגה לעיבוד."
    },
    {
      "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 חיצוניות על ידי יצירת גיליון סגנונות חדש. לאחר מכן תוכל לייבא כתובות אתרים או להעלות את גיליונות הסגנונות ולהשתמש באינדקס מגיליון הסגנונות החדש במסיר ה-CSS הכפול.

יבא או העלה גיליונות סגנונות

לאחר ההגדרה, לחץ על הלחצן כדי להפעיל את מסיר ה-CSS הכפול. הערת CSS תציג נתונים סטטיסטיים בסיסיים של ה-CSS המופחת שנוצר.

תוצאה של מסיר CSS כפול