ตัวสร้าง CSS ที่สำคัญ

วิดเจ็ตเบราว์เซอร์ฟรีสำหรับตัวสร้าง CSS ที่สำคัญขั้นสูงและ เครื่องมือเพิ่มประสิทธิภาพครึ่งหน้าบน เครื่องมือเพื่อให้ได้ผลลัพธ์ที่สมบูรณ์แบบของพิกเซลด้วย CSS ขั้นต่ำที่เป็นไปได้

ผลลัพธ์ CSS ที่สำคัญที่สุดทำได้ในเบราว์เซอร์จริง

วิดเจ็ตของเบราว์เซอร์ถูกเรียกใช้งานบนหน้าซึ่ง CSS ที่สำคัญจะถูกแตกออก ดังนั้นจึงมีสิทธิ์เข้าถึงแบบเนทีฟเต็มรูปแบบไปยังสภาพแวดล้อม CSS ดั้งเดิม

คุณสามารถเลือกสไตล์ชีตหรือองค์ประกอบสไตล์ชีตแบบอินไลน์ที่จะแยก CSS ที่สำคัญ สิ่งนี้มีประโยชน์ในการสร้าง CSS ที่สำคัญที่สามารถแชร์ระหว่างหน้าต่างๆ

วิดเจ็ตเบราว์เซอร์ยังมีคุณสมบัติในการลบ CSS ที่สำคัญออกจากสไตล์ชีต

เครื่องมือนี้ปราศจากการสอดแนม ไม่มี Google Analytics หรือการติดตาม ปลอดภัยในการใช้งานและสามารถใช้ได้ในเครื่องผ่านแคชของ 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.

ติดตั้ง

หากต้องการติดตั้งวิดเจ็ต ลากลิงค์นี้🗔 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);

เครื่องมือเพิ่มประสิทธิภาพครึ่งหน้าบน

ตัวสร้าง CSS ที่สำคัญและเครื่องมือเพิ่มประสิทธิภาพครึ่งหน้าบน

ตัวสร้าง Critical CSS ช่วยให้สามารถแก้ไข Core Web Vitals ของ Google เพื่อลบการลงโทษ CSS ที่ไม่ได้ใช้ บนพื้นฐานของ CSS ขั้นต่ำเท่านั้น

คุณสมบัติ

1. ตัวสร้าง CSS ที่สำคัญขั้นสูง

   1. พัฒนาขึ้นเองโดยใช้ PostCSS ซึ่งเป็นหนึ่งในโปรแกรมแยกวิเคราะห์ CSS ที่ดีที่สุด
   2. รองรับหลายวิวพอร์ต (เดสก์ท็อป + มือถือ) สำหรับ CSS ที่สำคัญที่ตอบสนอง
   3. หุ่นเชิด เช่น การควบคุมเบราว์เซอร์ รวมถึงการคลิก เหตุการณ์ของเมาส์ (โฮเวอร์ ย้าย ฯลฯ) การเลื่อน การดำเนินการโค้ดจาวาสคริปต์แบบกำหนดเอง และอื่นๆ อีกมากมาย
   4. เอาต์พุต CSS ที่สำคัญบริสุทธิ์ดิบที่ไม่ได้ปรับให้เหมาะสม

2. เครื่องมือเพิ่มประสิทธิภาพครึ่งหน้าบน

   1. เปรียบเทียบ CSS ที่สำคัญกับ CSS ดั้งเดิม
   2. ไม้บรรทัดวัดพิกเซลที่ปรับแต่งได้

3. เครื่องมือเพิ่มประสิทธิภาพขั้นสูง

   1. ตัวลบ CSS ที่ไม่ได้ใช้เพื่อลบ CSS ที่สำคัญออกจากสไตล์ชีต
   2. ซอฟต์แวร์บีบอัด CSS แบบมืออาชีพ (ลดขนาด) และเพิ่มประสิทธิภาพ
   3. การซ่อมแซม CSS ที่เสียหาย เครื่องมือสำหรับแก้ไข CSS ที่มีรูปแบบไม่ถูกต้อง
   4. คำนำหน้าอัตโนมัติ เครื่องมือสำหรับใช้คำนำหน้าเบราว์เซอร์กับ CSS
   5. สถิติและการวิเคราะห์ CSS
   6. CSS ตกแต่ง
   7. CSS Lint ขั้นสูง
   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": "รอ 1,000 มิลลิวินาทีเพื่อให้วิวพอร์ตแสดงผล"
    },
    {
      "run": true,
      "notes": "เรียกใช้ตัวสร้าง CSS ที่สำคัญ (การคำนวณ CSS ครึ่งหน้าบน)"
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "เริ่มการทำงานของ MouseEvent ใหม่บนองค์ประกอบ DOM เมนู a.nav"
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "เรียกใช้สคริปต์ ในกรณีนี้ให้ปิดเมนูก่อนดำเนินการต่อด้วยวิวพอร์ตถัดไป"
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

การดำเนินการ UI ของตัวสร้าง Critical CSS

ตัวสร้าง CSS ที่สำคัญให้การควบคุมเบราว์เซอร์แบบ Puppeteer พารามิเตอร์ ui_actions ยอมรับอาร์เรย์ที่มีออบเจ็กต์การดำเนินการ UI ที่กำหนดการเปลี่ยนแปลงสถานะ UI ตามลำดับเวลา

{
  "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 สำหรับการใช้งานส่วนตัว"
}

แสดงตัวอย่างการกำหนดค่า

{
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "ตั้งค่าวิวพอร์ตสำหรับการค้นพบ CSS ครึ่งหน้าบน"
    },
    {
      "wait": 1000,
      "notes": "รอ 1,000 มิลลิวินาทีเพื่อให้วิวพอร์ตแสดงผล"
    },
    {
      "run": true,
      "notes": "เรียกใช้ตัวสร้าง CSS ที่สำคัญ (การคำนวณ CSS ครึ่งหน้าบน)"
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "เริ่มการทำงานของ MouseEvent ใหม่บนองค์ประกอบ DOM เมนู a.nav"
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "เรียกใช้สคริปต์ ในกรณีนี้ให้ปิดเมนูก่อนดำเนินการต่อด้วยวิวพอร์ตถัดไป"
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

ตัวลบ CSS ที่ไม่ได้ใช้

ตัวลบ CSS ที่ไม่ได้ใช้จะใช้ซอฟต์แวร์เดียวกับตัวแยก CSS ที่สำคัญ และยอมรับตัวเลือกการกำหนดค่าเกือบเหมือนกัน รวมถึงการควบคุมเบราว์เซอร์แบบ Puppeteer ผ่านการดำเนินการ UI เครื่องมือนี้ยังช่วยในการแยก 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 ที่ซ้ำกัน