מזער CSS

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

מהו מזער CSS?

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

מה עושה מזער CSS?

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

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

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

למה כדאי לך לכווץ את קבצי ה-CSS שלך?

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

זכור, 40% מהאנשים אפילו לא מחכים 3 שניות לטעינת דף הבית שלך, וגוגל ממליצה לטעון אתרים תוך 2-3 שניות לכל היותר.

לדחיסה עם הכלי ממזער CSS יש יתרונות רבים;

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

כיצד פועל מזער CSS?

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

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

אתה יכול לנתח את ביצועי מהירות הדף שלך באמצעות GTmetrix, Google PageSpeed ​​​​Insights ו-YSlow, כלי לבדיקת ביצועים בקוד פתוח.

עכשיו בואו נראה איך עושים את תהליך ההפחתה;

1. מזער CSS ידני

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

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

JSCompress , JSCompress הוא מדחס JavaScript מקוון המאפשר לך לדחוס ולהקטין את קבצי ה-JS שלך עד 80% מהגודל המקורי שלהם. העתק והדבק את הקוד שלך או העלה ושלב מספר קבצים לשימוש. לאחר מכן לחץ על "דחס JavaScript - דחוס JavaScript".

2. מזער CSS עם תוספים של PHP

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

  • לְמַזֵג,
  • להקטין,
  • לְרַעֲנֵן,
  • תוספים של וורדפרס.

תוסף זה עושה יותר מאשר מצמצם את הקוד שלך. הוא משלב את קובצי ה-CSS וה-JavaScript שלך ולאחר מכן מצמצם את הקבצים שנוצרו באמצעות Minify (עבור CSS) ו-Google Closure (עבור JavaScript). הקטנה מתבצעת באמצעות WP-Cron כך שזה לא ישפיע על מהירות האתר שלך. כאשר התוכן של קבצי ה-CSS או JS שלך משתנה, הם מעובדים מחדש כך שלא תצטרך לרוקן את המטמון שלך.

ל- JCH Optimize יש כמה תכונות די טובות עבור תוסף חינמי: הוא משלב ומצמצם CSS ו-JavaScript, מקטין HTML, מספק דחיסת GZip לשילוב קבצים ועיבוד ספרייט לתמונות רקע.

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

Fast Velocity Minify עם למעלה מ-20,000 התקנות פעילות ודירוג של חמישה כוכבים, Fast Velocity Minify היא אחת האפשרויות הפופולריות ביותר הזמינות עבור כיווץ קבצים. כדי להשתמש בו, אתה רק צריך להתקין ולהפעיל.

עבור אל הגדרות > מהירות מזערית. כאן תמצאו מספר אפשרויות להגדרת התוסף, כולל אי ​​הכללות מתקדמות של JavaScript ו-CSS למפתחים, אפשרויות CDN ומידע שרת. הגדרות ברירת המחדל עובדות מצוין עבור רוב האתרים.

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

3. מזער CSS עם תוספים של וורדפרס

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

  • WP Rocket,
  • W3 Total Cache,
  • WP SuperCache,
  • המטמון המהיר ביותר של WP.

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