אם אתר וורדפרס שלך משתמש בערכת וורדפרס בתשלום או נושא פופולרי מהמאגר הרשמי של ערכות נושא וורדפרס, סביר להניח שהערכת נושא תפתח עבור מגוון מקרי שימוש. וייתכן שאתה משתמש רק בקבוצה קטנה מכל התכונות הזמינות בערכת הנושא.
במקרה כזה, האתר שלך טוען הרבה מאוד CSS לא בשימוש שאינו נדרש לסגנון דפי האתר שלך. לדוגמה, ערכת הנושא של וורדפרס שבה אתה משתמש עשויה לכלול סגנונות עבור דפי WooCommerce, אך אם אתה מפעיל רק בלוג באתר וורדפרס שלך, אינך משתמש ב-CSS הכלול עבור דפי WooCommerce באתר שלך ובכך משרת ללא שימוש CSS למשתמשים.
אם בדקתם את האתר שלכם בכלי Google Pagespeed, כנראה שאתם כבר מודעים לכך שבאתר שלכם יש בעיות CSS שאינן בשימוש. במדריך זה, נראה לך כיצד לבדוק תחילה CSS שאיננו בשימוש, ולאחר מכן השתמש בכלי חינמי להסרת CSS שאינו בשימוש מאתר הוורדפרס שלך.
כיצד לבדוק CSS לא בשימוש
ל-Google Chrome DevTools (זה שאתה רואה כשאתה לוחץ על האפשרות "בדוק" בתפריט ההקשר) יש תכונת כיסוי בכרטיסייה מקורות. אתה יכול להשתמש באפשרות הכיסוי כדי למצוא CSS ו-JS שאינם בשימוש שהאתר שלך טוען.
- פתח את האתר שלך ב-Chrome בשולחן העבודה.
- לחץ לחיצה ימנית על שטח לבן ריק באתר שלך ובחר לִבדוֹק מתפריט ההקשר.
- הקלק על ה מקורות לשונית, הקש Ctrl + Shift + P כדי לפתוח חלון פקודה, ואז הקלד כיסוי ובחר התחל כיסוי מכשירים וטען מחדש את הדף מפקודות זמינות.
- תחת הכרטיסייה כיסוי, לחץ על מסנן כתובות אתרים והזן את דומיין השורש של האתר שלך כאן כדי להציג רק קובצי CSS/JS פנימיים.
└ בדוק את בתים לא בשימוש כדי לראות את אחוז הנתונים הנטענים בקובץ CSS/JS מהערכת הנושא שלך.
- לחץ על קובץ CSS כדי להציג את ה-CSS שאינו בשימוש (מסומן בפסים אדומים) שנטען על ידי האתר שלך. ה-CSS שנמצא בשימוש בעמוד הנוכחי יוצג עם פסים ירוקים.
לאחר שניתחת את כל ה-CSS שלא נעשה בו שימוש שנטען באתר האינטרנט שלך, הגיע הזמן להסיר אותו. ישנם מספר כלים חינמיים הזמינים להסרת CSS שאינה בשימוש מדפי אינטרנט. להלן אחד הכלים הפופולריים שבדקתי והשתמשתי בפרויקטים שלי.
השתמש ב-PurifyCSS באינטרנט כדי להסיר CSS שלא נעשה בו שימוש
בדרך כלל, אתה יכול למצוא תוסף כמעט לכל דבר בוורדפרס. אבל להסרת CSS שאינה בשימוש, למרבה הצער, אין תוסף אחד זמין. אז נשתמש בכלים ידניים שאינם ספציפיים לוורדפרס כדי להסיר CSS שלא נעשה בו שימוש מהאתר שלך.
PurifyCSS הוא הכי הרבה כלי ידידותי שאינו מפתח אתה יכול למצוא כדי להתמודד עם CSS לא בשימוש. לכלי יש ממשק משתמש פשוט המאפשר למשתמשים לספק את כתובת האתר או את קוד ה-HTML וה-CSS. עבור וורדפרס, אנו נשתמש באפשרות URL ונספק קישורים לכל מיני דפים באתר שלך כדי לאפשר לכלי לתפוס CSS מכולם ולבצע אופטימיזציה ל-CSS שלא נעשה בו שימוש.
להלן רשימה מהירה של דפים שכדאי להכניס לכלי:
- כתובת האתר של דף הבית
- מספר כתובות אתרים של דפי פוסטים מכל קטגוריה באתר שלך
└ זה כדי להבטיח ש-CSS כלול עבור כל רכיבי הפוסט.
- יצירת קשר, אודות, פרטיות וכל מיני דפים שונים שיכולים להיות לך באתר שלך.
- דף ארכיון, דף חיפוש, דפי מחבר
- דפי סוג פוסט מותאמים אישית
טיפ חם: צור פוסט/דף 'תכונות' עם כל רכיבי הנושא שבהם אתה משתמש או עשוי להשתמש בהם בעתיד, כגון טבלה, גלריית תמונות, קוד, רשימות מראש, מסודרות, רשימות לא מסודרות, טפסים, כרטיסיות, אקורדיונים, בלוקים של גוטנברג שבהם אתה משתמש בדרך כלל , וכו.
השתמש בכתובת ה-URL של פוסט 'תכונות' בכלי PurifyCSS Online כדי להבטיח ש-CSS עבור הרכיבים הנפוצים נכלל.
לחץ על נקה את ה-CSS לאחר שהוספת את כל סוגי כתובות האתרים הרלוונטיים מהאתר שלך לכלי PurifyCSS Online.
העתק את ה-CSS החדש שנוצר על ידי הכלי והשתמש בו באתר שלך. תהיה בטוח ש גיבוי של style.css המקורי וקובצי CSS אחרים בערכת הנושא שלך לפני החלפת ה-CSS החדש שנוצר על ידי PurifyCSS.
עֵצָה: אתה יכול להשתמש בעורך הנושא המובנה של WordPress כדי לערוך את קובצי ה-CSS של ערכת הנושא שלך, או שאתה יכול להשתמש בתוכנת FTP/SFTP כדי להתחבר לשרת ולערוך קבצים בנוחות באמצעות עורך פנקס רשימות.