אחת הבעיות שתמיד יהיו באתר שלא הותאם 100% אחוז בשבילכם, היא שיהיו לכם בקשות לקבצי CSS\JS שבכלל לא בשימוש בדף שלכם או בשימוש ממש מועט. דבר זה יכול לגרום למספר בעיות כמו render blocking, מספר בקשות גדול יותר, יותר בתים להעביר. בעיות אלו יהיה חמורות יותר במובייל. במדריך הבא אסביר איך למנוע את זה.
המדריך כמעט כולו, הוא על הסרת CSS שלא בשימוש ולא הסרת JS אבל בגלל שעם אחד הפתרונות שאני מציע פה אפשר על הדרך להסיר גם JS אני מכניס את זה פה.
למה זה קורה
כמו שכתבתי התופעה מאוד נפוצה ותקרה כמעט בכל שימוש של תבנית, page builder או אפילו תוספים שונים. יש שתי סיבות שזה קורה:
- כתיבת קוד לא איכותי מספיק
- כתיבה גנרית כדי לכסות כמה שיותר צרכים
הסיבה הראשונה יכולה לכלול בתוכה דברים כמו הוספת קבצים בכל עמוד בלי אבחנה אם באמת יש בו צורך או טעינה כפולה של דברים. הסיבה השניה משמעותה, הרבה תלויות שמכריחות טעינה של הרבה משאבים בכל עמוד כמו גם אי חלוקה מספקת של משאבים למקורות שונים כך שיהיה אפשר לטעון רק את החלק המדויק שצריך.
איך פותרים את זה
יש כמה שיטות לעבוד על זה ואנסה לסכם את העיקר פה. החלוקה היא בין עבודה ידנית ללא כלים שמסירים CSS שלא בשימוש באופן אוטומטי לבין כלים שעושים זאת אוטומטית אבל צריך בעצמנו לדאוג להריץ כל פעם או כאלה שרצים כשירות על האתר שלנו ודואגים לעדכן מה שצריך.
אבל לפני שמתחילים…
אזהרה
הסרת CSS או JS יכולה להרוס את האתר. לכן חשוב מאוד:
- אל תעבדו על גרסה חיה של האתר.
- כדאי מאוד שמי שעשוה את העבודה מכיר טוב את האתר ועדיף גם את הקוד.
- כשאתם בודקים את התוצאות, אל תעברו רק על הדף מלמעלה אלא בצעו את כל סוגי האינטרקציה בדף, שחקו עם גודלי מסך שונים, תוספי נגישות ועוד ככל העולה על דעתכם.
חשוב להבין לפני שמתחילים
יש שלוש בעיות עיקריות בהסרת CSS שלא בשימוש וחשוב שתזכרו אותם בכל שלב של התהליך ולא משנה באיזו שיטה תבחרו לעבוד.
- דף אחד לא בהכרח מעיד על דף אחר.
- אינטרקציה של המשתמש עלולה להשתמש בעוד CSS שכרגע נראה לא בשימוש.
- עדכון דפים, התקנת תוספים או שינויים אחרים, יאלצו אותכם לחשב מסלול מחדש.
ועוד משהו חשוב: בטלו כל קאש שיש לכם במהלך העבודה. אם אפשרי, עברו ל Developer mode ואם לא, פשוט בטלו את הקאש.
הסרה ידנית באמצעות הדפדפן ותוסף
Chrome Coverage Tool
הכלי הכי נגיש להתחיל איתו הוא הדפדפן שרוב הסיכויים שגם ככה אתם משתמשים בו. גלשו לדף הבית, פתחו את developer tools – לחצו על F12 ואז לחצו על ctrl+shift+p ורשמו coverage. כעת בחרו Start instrument coverage and reload the page כדי להתחיל את הפעולה או בחרו Show Coverage כדי רק לפתוח את החלונית המתאימה. (אפשר גם ללחוץ על תפריט 3 הנקודות ואז more tools ו- coverage).
ברגע שעשיתם Start Instrumenting תראו שמתחילות להופיע לכם שורות של קבצי CSS ו JS. תנו לזה לסיים וכעת שחקו עם הדף. דברים שבמיוחד חשוב לשחק איתם: תפריטים נפתחים, סליידרים, טפסים, אנימציות שונות. נסו לכסות את כל האפשרויות והמצבים המשתנים של הדף כי כל דבר כזה עלול לצרוך CSS שטעינה ראשונית לא נצרך. זהו שלב חשוב שיכול למנוע בעיות שקשה לעלות עליהן אחר כך, אל תדלגו עליו. אחרי שסיימתם לחצו על Stop instrumenting.
כעת פלטרו רק לקבצי CSS ועברו על התוצאות. התחילו עם קבצים שאחוז האי שימוש בהם הוא הגבוה ביותר. אם מדובר במאה אחוז, רשמו לכם בצד. אם מדובר במשהו קרוב ל 100 אחוז, לחצו על הקובץ כדי לראות את הקוד ונסו להבין במה אתם כן משתמשים. לכן חשוב שמי שעושה את העבודה יכיר את האתר טוב ויבין מה השימוש של CSS מסוים.
כדי לוודא מה הוא עושה או יותר נכון מה הנזק באי הטעינה שלו, בחרו לחסום את הקובץ, Network tab, מקש ימני, block request url. כעת שחקו עם הדף ותראו מה ההשפעה.
אם אלו כמה שורות שבגללם אתם טוענים כמה עשרות ק"ב, כדאי לכם מאוד לטעון אותם. מה כן לעשות? יש כמה אפשרויות, או לא להשתמש ביכולת הזאת אם היא לא חובה לכם או להכניס אותה inline או לקובץ style אחר או אם אתם תלכו על שיטה שיוצרת קובץ אחד של כל ה CSS שבשימוש אז זה יהיה פשוט שם אבל את זה נראה מאוחר יותר.
אחרי שעשיתם את הפעולה לדף אחד, עברו על כמה סוגי דפים באתר. הכי טוב כמובן היה לעבור על כל האתר אבל זה לפעמים לא אפשרי. מצד שני לעבור על סוגי דפים זה קל. בגרסה הכי מצומצת הכוונה לעבור על דף הבית ועל פוסט רנדומלי. אם יש לכם custom post types נוספים אז מעבר על כל אחד מהם. כמובן גם פה צריך להכיר את האתר ולעבור על הפדים בחכמה יותר מאשר מעבר על כל סוג אבל זה המינימום.
אחרי שעשיתם את כל זה ויש לכם רשימה של כל קבצי ה CSS שלא בשימוש או כאלה שבשימוש מזערי ויש לכם פתרון להם (כמו שכתבתי למעלה) הגיע הזמן להעיף אותם.
עוד על כלי ה coverage של chrome
Asset Cleanup
זהו תוסף מומלץ מאוד שעושה עבודה מעולה כדי להסיר שימוש בדברים שלא באמת נצרכים. יש עוד תוספים כאלה לשיקולכם. זכרו שהוא עושה את העבודה גם בגרסה החינמית.
ניתן גם לעשות את הדבר בקוד אבל זה באמת לא שווה את המאמץ במיוחד שכאמור התוסף בגרסתו החינמית מספיק לנו.
הכנסו לדף מסוים שעברתם עליו קודם, גללו למקטע של התוסף ומצאו שם את קבצי ה CSS שאינם בשימוש. אם מדובר בקובץ שמצאתם שאינו בשימוש בכל האתר, בחרו לעשות לו unload רוחבי לכל האתר. אם הוא לא בשימוש רק בסוג הדף הספציפי, בחרו לא לטעון אותו רק בדף הספציפי. ובמקרה שהוא אינו נצרך רק בדף זה, בחרו לא לטעון רק בדף הזה.
הסרת JS
אני לא ארחיב על זה יותר מדי רק אומר שבאותה שיטה בדיוק, תוכלו להסיר גם JS שלא בשימוש! חשוב מאוד גם לעשות instrumenting על כל הפעולות באתר כדי שלא נפספס שימוש ב JS שנצרך מאוחר ולא ישר בטעינת העמוד. לאחר מכן ההסרה תתבצע עם Asste Cleanup כמו שהסברתי.
סיכום מהיר
בשיטה הזאת ראינו איך אפשר בלי התערבות של כלי חיצוני לנתח את השימוש של הקצבים, כולל ניתוח מתקדם אחרי אינטרקציה של משתמש וכולל ניתוח של קבצים בשימוש מועט. לאחר מכן ראינו איך אפשר לחסום אותם בעזרת תוסף.
הבעיה בשיטה זו, שהיא לא באמת מסירה באופן מלא CSS שלא בשימוש. כי אם יש קובץ ש 60% ממנו לא בשימוש והוא קובץ גדול, כנראה לא נטפל בו. בטח ובטח אם יש הרבה קבצים כאלה. ולכן המשמעות היא שיש לנו עוד הרבה מה להסיר. חלקם גם יגידו שהעבודה הידנית היא חסרון ובמיוחד אם צריך לעדכן מדי פעם כי עדכנו דפים.
המלצה לגבי Asset Cleanup
אני ממליץ בכל מקרה להתקין ולהשתמש בתוסף גם אם לא מושלם להסרת כל CSS שלא בשימוש כי הוא יעזור לכם באופן כללי להפחית משאבים לא נצרכים ואז כשתוסף הקאש שלכם יעשה איחוד לקבצים התוצאה תהיה קטנה בהרבה.
הסרת CSS אוטומטית באמצעות תוסף
הדרך הכי קלה אולי לעשות את זה (וברור שגם היא מצריכה בדיקה מקיפה שאין בעיות באתר לאחר מכן) היא באמצעות תוסף הקאש שלכם.
רגע יש תוסף קאש שעושה את זה?
התשובה היא כן. יש אפילו יותר מאחד שאני מכיר (אולי יש עוד שאני לא מכיר).
Flying Press
בדיוק בימים אלה יצא תוסף קאש (למעשה הוא הרבה יותר מתוסף קאש בלבד) חדש שפיתח Gijo Varghese בעל האתר WP Speed Matters וגם בכל קבוצת פייסבוק מצויינת בעלת אותו שם. התוסף נראה מבטיח מאוד! והמחיר גם הוא מעולה (סיכוי לא רע שהמחיר יעלה בהמשך). יש המון יכולות לתוסף שלו וגם שיטת המימוש שלו לדברים היא שונה מתוספי קאש רגילים. אחד הדברים המפתיעים שהוא כלל בתוסף זה בדיוק מה שאנחנו צריכים, הסרת CSS שלא בשימוש.
זה באמת עובד?
אני לא יודע כי לא ניסיתי אבל אני בטוח שלפחות בחלק מהמקרים או אפילו ברובם זה אכן עובד כי הוא לא מישהו שעושה חצי עבודה. לכן שווה מאוד לנסות את זה. ובכלל לנסות את התוסף החדש שלו. צריך לזכור שזהו תוסף בן כמה ימים – נכון לכתיבת שורות אלו – אז באגים עדיין יהיו אבל הוא מטפל בהם בצורה מהירה ומקצועית.
Swift Performance
התוסף האהוב עלי שיודע לעשות כמעט הכל. אין לו באמת אופציה ישירה שנקראת "הסרת CSS שלא בשימוש" אבל יש לו כמה אופציות שבעצם גורמות לזה. איך עושים את זה?
- יצירת Critical CSS על פי Unused CSS
- בחרו ב Disable Full CSS
- אם יש בעיות בדפים בחרו ב Separate Styles כך שיווצר קריטיקל לכל עמוד בנפרד
- עוד הגדרה שתוכלו לשחק איתה במקרה של בעיה היא, לא הסרה מוחלטת של ה Full CSS אלא טעינה שלו רק בעת גלילה של המשתמש
- ועוד אופציה היא להחריג קובץ מסוים שאותו כן רוצים להוסיף לקריטיקל
זהו עכשיו יש לכם סוג של הסרת CSS שלא בשימוש דרך Swift. יש עוד הרבה אופציות לתוסף המדהים הזה והוא ללא ספק תוסף הקאש המומלץ ביותר (אולי אלא אם כן אתם על שרת LiteSpeed ואז נסו LSCache). והכי מדהים שרוב האפשרויות נמצאות בגרסה החינמית שלו! אבל בכל מקרה אני מאוד ממליץ על גרסת הפרו.
הסרת CSS באמצעות שירות חיצוני
עוד פתרון שאמור לחסוך מכם עבודה ידנית הוא שירות שיצור לכם CSS ללא החלקים שלא בשימוש. שירות כזה עובר על כל האתר שלכם ויוצר בהתאם את התוצר המתאים.
Unused CSS
זהו אולי השירות המוכר ביותר. הוא לרוב עושה עבודה טובה אבל יצא לי גם לבדוק אותו על אתר די כבד והיו שם קצת בעיות. היתרון בשימוש בו הוא כאמור שאתם לא צריכים לדאוג לעשות עבודה באופן ידני ולהבין מה כל CSS עושה. כמו כן אם אתם מעדכנים את העמודים, הכלי יהיה לשירותכם בכל עת ליצור CSS מעודכן. החסרון בשירות הזה, שהוא בתשלום.
אם אתם מוכנים לשלם ומחפשים את הדרך הקלה והבטוחה לעשות את זה, Unused CSS הוא כנראה מה שאתם מחפשים.
הסרת CSS באמצעות כלים
בסוג פתרון הזה קיימים הכי הרבה אופציות. בסופו של דבר גם פתרונות אחרים שיש משתמשים בקוד כזה או אחר כדי להשיג את המטרה של מציאת CSS לא בשימוש אז למה להשתמש בשירות שמשתמש בקוד אם אפשר להשתמש ישר בקוד?
מצד שני אנחנו בעולם הוורדפרס ואנחנו רוצים פלאגינים או שירות אחר נוח ולא להתקין Node.js ולדעת מה זה npm. לכן אביא פה מספר ספריות קוד פתוח שיש להם גם שירות אונליין כדי לבצע את העבודה ולא תצטרכו להתעסק ישירות עם Node.js.
אבל אם תעבדו עם הכלים בצורה הזאת, זה לא יהיה באמת אפקטיבי כי לא תוכלו לעשות את התהליך באופן אוטומטי, אלא תצטרכו לעבור דף דף, ובכל עדכון להריץ מחדש בצורה ידנית. מצד שני זה כן טוב לפעם אחת או סתם כדי לבדוק את היכולת ולראות אם שווה לכם להשתמש בזה מעבר לפעם אחת. וכמובן היתרון הגדול שזה בחינם.
UnCSS
ספריה שעוברת על כל הקבצים ומזהה איזה CSS בשימוש, כולל CSS שמוזרק על ידי JS. המיגבלות שלה כמו שרשום בדף הגיטאהב של הספריה הן, שרק דפי HTML נתמכים ושלא ניתן לזהות CSS שעולה על ידי JS שלא נקרא בטעינת הדף (page load).
PurifyCSS
עוד ספריה שעושה את העבודה בשבילנו והיא תומכת לא רק בדפי HTML. וגם לה יש אתר אונליין שמדגים את היכולת.
PurgeCss
אחרון חביב כלי שלא מצאתי לו ממשק ווב אבל הוא די מפורסם אז מביא אותו בכל זאת למי שרוצה לבדוק. האמת שהשיטה בה הוא עובד – השוואת סלקטורים לתוכן הדפים – נראית לי קצת בעייתית אבל מודה שלא ניסיתי אותו אז אולי זה כן עובד טוב. בכל מקרה זה מקסימום יתן עוד CSS אבל לא יזיק אז אולי לא נורא.
לעמוד הגיטאהב של PurgeCss.
סיכום על כלים להסרה אוטומטית
שלושת הכלים למעלה פועלים בדרכים קצת שונות להסרה של CSS שלא בשימוש אבל שלושתם פועלים בצורה דומה מבחינת האינטרגציה שלהם עם הפיתוח. אם יש לכם תיקיה מקומית עם האתר שלכם תוכלו תוך כמה דקות להשיג CSS נקי של האתר. למדריך מלא על איך לעשות את זה עם UnCSS כנסו לפה.
כמו כן בכל דף גיטאהב שקישרתי פה, יש הסבר על איך אפשר לעבוד עם הכלים.
סיכום כללי
ראינו פה 4 שיטות כלליות להסרת CSS שלא בשימוש.
- בצורה ידנית לגמרי – הסרת קבצים שלא בשימוש, איחוד קבצים, אינליין וכדומה.
- בעזרת תוסף קאש שעושה את התליך בשבילנו.
- בעזרת שירות צד שלישי שעושה לנו את התהליך אוטומטית אבל עולה כסף.
- בעזרת כלים/קוד שאפשר להשתמש כשירות ווב או בצורה אוטומטית עם נוח לנו עם סביבת פיתוח.
מה הכי מומלץ?
אני בטוח שלכל אחד תהיה תשובה שונה לשאלה אבל אנסה לענות משהו שאני מקווה שיעזור לכם להחליט.
יש לכם תוסף שעובד?
אם יש תוסף שאתם מצליחים להגיע איתו לתוצאות טובות, לכו על זה. לדעתי זו הדרך הכי נוחה.
מפתחים אתר בעצמכם?
אם אתם מפתחים את האתר בעצמכם, גם ככה יש לכם סביבת פיתוח ואתם מרגישים נוח עם קוד, השתמשו באחד מהספריות קוד פתוח שבמאמר.
מסתדרים עם עבודה טכנית?
אם אתם לא מפתחים בעצמכם אבל כן מסתדרים עם עבודה טכנית, לכו על השיטה של Chrome coverage + Asset Cleanup.
מוכנים לשלם?
אין לכם בעיה לשלם כסף כדי לקבל תוצאה טובה? לכו על UnusedCSS.
