כיצד ליצור CSS נתיב קריטי בוורדפרס

הבנת וורדפרס CSS

לפני שנצלול פנימה, בואו נבין איך עובד CSS רגיל בוורדפרס.

כל ערכת נושא וורדפרס מורכבת מ-style.css שמכיל את כל הקוד הדרוש לעיצוב האתר שלך. מפתחי ערכות נושא צריכים לתמוך בכל תכונות וורדפרס הכוללות פוסטים בבלוג, הערות, דף מוצרים, דף חברות, טפסים וכו'. תוספים אחרים שתתקינו יכולים גם להוסיף גיליונות סגנונות דומים של css.

זה יכול להפוך קבצי css לנפחים וגדולים בגודל של 200kb או אפילו יותר.

מהו CSS של נתיב קריטי?

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

CSS של נתיב קריטי הוא ה-CSS הנדרש לעיבוד התוכן הנ"ל בכל דף אינטרנט. כפי שהשם מרמז, CSS "קריטי", שעוזר לדפדפן לצייר ולעבד אותו במהירות לפני טעינת קבצי CSS מלאים.

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

מדוע CSS של נתיב קריטי כל כך חשוב?

בטח כבר ראית אזהרה מכלים כמו Google PageSpeed ​​​​Insights או GTmetrix האומרת "בצע אופטימיזציה של משלוח css" או "דחה css שלא נעשה בו שימוש".

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

• משפר את הגרלת התוכן הראשונה (FCP)
• משפר את התשלום המשמעותי הראשון (FMP)
• הסר CSS שלא נעשה בו שימוש (טכנית אל תסיר אותו, אלא תעדוף CSS "שימושי")

הנה שני צילומי מסך של הבלוג שלי עם ובלי CSS קריטי.

כפי שניתן לראות בסעיף "ללא נתיב css קריטי", לקח כמעט 5 שניות להראות למשתמש משהו שימושי במכשיר נייד. על הדפדפן לבצע בקשת HTTP נוספת לקובץ css, להוריד אותו, לנתח אותו כדי להתחיל בעיבוד. אך כאשר משתמשים ב-CSS קריטי, כל ה-CSS הדרוש חייב להיות מוטבע והדפדפן יכול להתחיל לרנדור מיד לאחר טעינת קובץ ה-HTML תוך שנייה או פחות.

כיצד ליצור CSS קריטי בוורדפרס?

ישנן מספר דרכים ליצור CSS קריטי בוורדפרס.

שימוש בתוספי מטמון

WP Rocket הוא תוסף מטמון מובחר שעובד ממש טוב.

אחת הסיבות שאני משתמש ב-WP Rocket בכל אתר היא דור ה-CSS הקריטי עצמו. הם יוצרים CSS קריטי בנפרד עבור דף הבית, עמוד הפוסטים, דף הקטגוריות, דף המוצר וכו' ומטמיעים אותו. הם ישחזרו CSS קריטי אם יהיו שינויים בערכת הנושא או בהגדרה.

הכל ניתן לעשות בלחיצת כפתור.

תוספי מטמון אחרים שיכולים ליצור CSS קריטי

Swift Performance ו-LiteSpeed ​​(מצריך שרת LiteSpeed/OpenLiteSpeed) הם תוספים דומים שיכולים ליצור CSS קריטי. לשני התוספים הללו יש ענן ומטמון מלא מובנים בשרתים שלהם.

שימוש ב- Autoptimize + מחולל CSS קריטי בחינם

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

הנה איך לעשות את זה:

שלב 1. עבור אל https://pegasaas.com/critical-path-css-generator/ והזן את כתובת האתר שלך. העתק את ה-"Critical Path CSS" שנוצר.

שלב 2 בהגדרות האופטימיזציה האוטומטית (הפעל הגדרות מתקדמות), תחת "אפשרויות CSS", סמן "Inline and Defer CSS" והדבק את ה-CSS שהועתק.

יתרונות:

• בחינם

מינוסים:

• אין CSS קריטי נפרד עבור סוגי דפים שונים (לדוגמה: דף בית, עמוד פוסטים, דף קטגוריה, דף מוצר וכו')
• אל תבנה מחדש אוטומטית על שינוי ערכת נושא/הגדרות

מדוע וורדפרס בעצמה לא יכולה לייצר CSS קריטי?

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

יצירת CSS קריטי מתאפשרת על ידי פרויקטים של קוד פתוח כגון Critical (של גוגל), CriticalCSS או פנטהאוז. כל הפרויקטים הללו מבוססים על NodeJS, לא על PHP. אז אתה צריך להתקין את NodeJS בשרת שלך. רוב ספקי האירוח המשותפים/מנוהלים אינם מאפשרים זאת מכמה סיבות.