כיצד לייעל את מסירת CSS – 7 שלבים פשוטים

תמונת וקטור אופטימיזציה של CSS - -חלפו הימים שבהם מומחי עיצוב ובלוגרים מובילים בתעשייה המליצו לבנות דפי אינטרנט לא יותר מ 30 קילובייט…


אז, כובע זה היה צפוי לטפל ב- HTML, JavaScript, תמונות, CSS ו- Flash. בואו נהיה כנים, לא צריך הרבה כדי לחרוג לחלוטין מ- 30 קילוגרמים.

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

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

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

להלן 5 דברים פשוטים שתוכלו לעשות כדי לייעל את ה- CSS שלכם ברגע זה.

כיצד לבצע אופטימיזציה מלאה של מסירת CSS

1. השתמש בקצרים

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

רכוש גופן css

יש המון אלמנטים שבהם אתה יכול להשתמש בקצרים, אך הנפוצים ביותר כוללים:

  • שולים
  • ריפוד
  • גופן
  • מתווה
  • גבול
  • רקע כללי
  • סגנון רשימה

ערכי תצורת שורטורדאתה יכול גם לשלב ערכים באמצעות שימוש בקצרים. על ידי ציון ערכים שונים, הדפדפן ישתמש למעשה באופן שצוין כדי לפרש את הכללים.

שימוש בכל צוואה קצרה הפוך את הקוד הכללי שלך לתמציתי יותר. אתה שומר תווים וגם שורות.

אם אתה משתמש בקצרים בכל אזור אפשרי, הדבר יכול להפחית באופן דרמטי את גודל הקובץ הכולל.

2. היפטר מהאקים

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

זה עוזר לדפדפנים העומדים בתקן יותר. עם זאת, משקל העמוד הנוסף יוריד רק על ידי הדפדפנים הדורשים זאת.

אם עליכם להשתמש בפריצה, חובה שהקוד בו אתם משתמשים ספציפי לגירסת Internet Explorer בה אתם ממוקדים.

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

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

3. היו חכמים לגבי השימוש במרווח

לקוד ה- CSS שלך, המרחב הלבן הוא הכרחי לקריאות.

מרחב הלבן כולל אלמנטים, כגון כרטיסיות, רווחים וניתוקי קו נוספים. כל שטח מרווח שאתה יכול לחסל דומה לחיסול של דמות.

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

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

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

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

זוהי דרך נוספת להתפשר כך שיש לך קבצים קטנים יותר וגם עיצוב קריא.

4. גזם איפוס ומסגרות

כאשר אתה משתמש במסגרת CSS, חובה שתבדוק את התיעוד.

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

הסירו כללי CSS שלא השתמשו

אתה עשוי לגלות שאתה יכול להשיג פרטים מצגת בצורה תמציתית ואלגנטית יותר …

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

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

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

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

5. הגהה בעתיד על ה- CSS שלך

תחביר Css

אפשרות שימושית נוספת לביצוע אופטימיזציה של CSS: הפרד את רוב הכללים שלך מההצהרות הספציפיות לפריסה שלך.

הקצה את הפריסה לקובץ האישי שלה אם זה אפשרי. אם לא, לפחות לתת לו קטע משלה יכול להועיל.

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

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

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

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

6. שמור תמיד על תיעוד מעודכן לגבי עבודתך

בין אם אתם עובדים על אתר כקבוצה או לבד, חובה לעקוב אחר כל מה שעשיתם.

לדוגמה, לבד, אתה עלול לשכוח משהו שעשית. כצוות, מישהו עשוי לעשות משהו, ואולי אינך מודע עד שתבצע שינויים שיכולים לגרום לבעיות עם אלמנטים שונים של הקוד..

הוספת תגובה css - -כפילויות של קוד הוא תחום עצום של דאגה הן לצוותים והן למעצבים בודדים, במיוחד כאשר משתמשים בוני אתרים פופולריים. Wix, Squarespace ותוכנות אחרות לבניית אתרים הן ידוע בשכפול קוד, או שהוא חסר לחלוטין במאגר המידע שלהם.

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

אחת הדרכים המהירות ביותר לנפח קוד היא על ידי ביצוע אותה עבודה פעמיים. קידוד מורכב, ולכן חובה לשמור על תיעוד מדויק של כל מה שעשית.

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

7. דחוס את הקבצים שלך (מיטוב CSS 101)

css דחיסה ואופטימיזציה

דחיסה: יש בזה קצת יותר מזה …

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

בהשוואה לעותקי העבודה, אלה יהיו חלק מהגודל. ישנם יישומים שונים שתוכלו לנצל אותם כדי להקל על תהליך הדחיסה.

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

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

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

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

תורך

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

עם זאת, העקרונות הנדונים כאן עוזרים הן לחווית הפיתוח והן לחווית המשתמש.

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map