טיפול ב- CSS קריטי באתר וורדפרס

CSS משמש לעיצוב המרכיבים השונים באתר וורדפרס. סקריפטים של CSS נטענים מקובץ CSS שהוא חיצוני לקבצי ה- PHP של האתר – גיליון סגנונות CSS. המונח CSS קריטי מתייחס לתהליך של לקיחת הסקריפטים המינימליים של CSS המינימלי הדרושים / הכרחיים כדי להציג את החלק הראשון של דף אתר וורדפרס ואז, לעבד אותו על מנת שיוכל להיטען כמה שיותר מהר. גיליונות סגנונות של CSS הם בעלי עדיפות לטעינה כאשר מבקר בדף האתר. לפני שניתן יהיה לטעון ולהציג את שאר הדף, יש קודם כל להציג את גליון הסגנונות של CSS הכוללים תכנים חשובים כמו טקסט ותמונות, שהם חיוניים בכדי לספק את הסיבה של המשתמש להגיע לאתר. אם לקוח לגליון הסגנונות של CSS זמן רב להיטען, תוכן הדף צריך להמתין לסיום טעינת ה- CSS ולעיתים קורה שמה שבסופו של דבר מוצג למשתמש הקצה, הוא עמוד ריק במשך כמה שניות או יותר. זה אולי לא נראה כמו הרבה, אבל בהתחשב בעובדה שאפילו עיכוב של שנייה בטעינה של אתרים לנייד מוריד את שיעורי ההמרות עד 20% ופחות או יותר ל- 20% עבור כל שנייה נוספת, כדאי מאד לטפל בטעינת CSS קריטי באתר וורדפרס.

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

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