Product Design, Manufacturing & Innovation Resources
بيت » الأدوات عبر الإنترنت » مولد CSS للمسار الحرج

مولد CSS للمسار الحرج

سيقوم هذا بتحليل أي عنوان URL مُعطى ودمج CSS اللازم لعرض عنصر HTML "أعلى المجلد"، أي عنصر HTML ".CSS حرج” or “مسار CSS الحرج8220;.

أداة رائعة، تقوم بـ وظيفة ليس من السهل الاستغناء عن ذلك. كما أنه يُعيد نسخة CSS مُصغّرة مُسبقًا بشكل مباشر.

You يجب then incorporate this code into the head of your page(s), either manually, or with a dedicated plugin, or any cache or optimizer plugin.

سيسمح هذا بعرض الجزء العلوي من المنطقة المرئية في البداية بشكل أسرع، دون تحميل ملفات CSS الخارجية.

  • هل سيؤدي هذا إلى تحسين مقاييس جوجل الخاصة بك؟ على الأرجح
  • هل سيُحسّن ذلك تجربة زوارك الذين يزورونك لمرة واحدة؟ على الأرجح
  • هل سيؤدي ذلك إلى تحسين تجربة زوارك المتكررين؟ لا (لأنه سيزيد من حجم كل صفحة تتم إضافة هذا الـ CSS إليها، بدلاً من إضافته فقط إلى ملف خارجي يتم تحميله مرة واحدة فقط).

نصيحة رقم 1: قم بمسح أي ذاكرة تخزين مؤقتة للخادم أو المكونات الإضافية مباشرة بعد ذلك.

النصيحة رقم ٢: إذا كنت ستسلك مسار التحسين هذا، فمن أجل الحصول على CSS الأنسب، يجدر بك القيام بهذه الحيلة مرة واحدة لكل مجموعة صفحات مختلفة بشكل ملحوظ لديك في موقعك، حيث من المحتمل أن تستخدم كل واحدة منها CSS مختلفًا تمامًا (على سبيل المثال: صفحات المنتدى، والمنشورات العادية، وأنواع المنشورات المخصصة).

نصيحة رقم 3: بما أن هذا الكود CSS هو كود ثابت تمامًا -بقصد-، فيجب تحديثه في كل مرة تقوم فيها بإجراء تغيير كبير على CSS الخاص بالصفحة.

التخصصات: أداء المواقع الإلكترونية، تطوير المواقع الإلكترونية، تحسين محركات البحث، تطوير مواقع ووردبريس.
بديل مجاني لمجلة بنتهاوس، وهو WP Rocket.
مقارنة مولد CSS للمسار الحرج مع Penthouse وWP Rocket
مولد CSS للمسار الحرجPenthouseWP Rocket
Form and use: This is an online generator from Core Web Vitals. You enter a URL, set mobile and desktop viewport sizes, and receive critical CSS to paste into a style tag in the head just below the title. It also gives three methods to defer the original stylesheets.Form and use: Penthouse is a Node library described as the original critical path CSS generator. You call it with a URL and a CSS string or file and it returns the critical CSS. Options include viewport width and height (defaults 1300 by 900), forceInclude, forceExclude and a timeout.Form and use: This is a paid WordPress caching plugin. Remove Unused CSS is switched on under File Optimization, Optimize CSS delivery, and the plugin inserts the generated CSS itself.
How the CSS is produced: The tool loads the page in a Chrome-based browser on a custom Node platform, checks several viewports, finds the stylesheet parts that render the visible area, then cleans and minifies them.How the CSS is produced: It drives headless Chromium through Puppeteer, and several jobs can share one browser instance.How the CSS is produced: WP Rocket sends the page URL to an external API that visits the page and builds the used CSS. The result is stored as a gzipped file and inserted in a style element with the id wpr-usedcss after the title tag. It is regenerated every 30 days.
Automation and upkeep: The output is pasted by hand. The tool is in beta, and the page suggests trying again after 5 minutes if it fails.Automation and upkeep: You script it yourself, for example in a build step, and write the result to a file.Automation and upkeep: Generation starts when a non-cached page is visited. Failed attempts are retried up to 5 times with increasing waits.
Requirements: Node.js with npm or yarn and headless Chrome through Puppeteer. On Linux some system libraries such as libnss3 may need installing.Requirements: A publicly accessible site, working WP-Cron and a server or firewall that allows the plugin bot user agents. It does not work behind htaccess authentication, and Cloudflare Bot Fight Mode must be disabled.
الترخيص والتكلفة: The page calls it a free online tool and lists no usage caps.الترخيص والتكلفة: The code is under the MIT licence.الترخيص والتكلفة: Paid plans are annual and scale with the number of sites (1, 3 or 50). The 14-day trial is charged automatically at its end unless cancelled.

المواضيع المغطاة: المسار الحرج، مولد CSS، تحليل عنوان URL، CSS المصغر، الجزء العلوي من الصفحة، عرض HTML، التحسين، مقاييس الأداء، تجربة المستخدم، ذاكرة التخزين المؤقت للخادم، تكامل المكونات الإضافية، الكود الثابت، أداء الويب، عرض الصفحة، CSS الخارجي، تحسين الموقع، التصميم المتجاوب ISO/IEC 25010، ISO/IEC 9126، ISO 9241، ISO/IEC 27001، وISO 8601.

أكثر الشبكة والويب tools

اقترح أفضل أداة عبر الإنترنت:

هل تعرف موقعًا إلكترونيًا أفضل أو مكملاً أو بديلاً للموقع المذكور أعلاه؟

> اقترح ذلك هنا <

أحدث الإضافات

أهم المنشورات والمقالات

أفضل الأدوات الأصلية

السنة العاشرة عيد

الصور والتنزيلات بالحجم الكامل متاحة فقط، ومجانية تمامًا، للأعضاء المسجلين.