מאמר זה יציג בפניכם נושא המכונה Minify In ובתוך כך גם נותנים לך הדגמה מעשית מפורטת. המצביעים הבאים יוסקרו במאמר זה,
- מה זה מיניפיקציה?
- מדוע יש צורך במינימום?
- איך ממזערים קוד CSS, JS, HTML?
- מתי כדאי לעשות זאת?
- היתרונות של מינימום?
כפי שהשם מרמז לנו די טוב, מינימום הוא על מזעור גודל הקובץ. בבסיס קוד, יש לנו את החופש לצמצם קבצי HTML, CSS או Javascript. כאן נדון בקשר למינימום קובץ CSS.
כאשר מפתח מקודד, הוא / היא מוודא שהקוד יהיה בתבנית הקריאה הטובה ביותר כדי לפשט כל תהליך של שינויים נוספים. לכן, שמות המשתנים הם בפורמט הניתן להבנה בקלות ותופסים הרבה מאוד תווים. לאחר מכן, הם גם מוסיפים כמות מרווחת ריקה כדי להפוך אותו לקריא מספיק.
אך בתהליך כולו אנו נוטים לשחרר את המיתרים שגודל הקובץ שלנו גדל, מה שמגדיל את זמן טעינת האתר. במיוחד באתרים שיש בהם חלק גדול מהפונקציות והתוספות, בסיס קוד ארוך יותר רק מחמיר את האתר.
לגוגל בכל מקרה יש פורמט מוגבל לדירוג האתרים בדף החיפוש שלה בהתבסס על חוויית המשתמש האופטימלית שהאתרים מספקים. ככל שהאתר שלך נטען טוב יותר, כך האתר שלך מדורג טוב יותר בדף החיפוש.
כשכל כך הרבה על כף המאזניים, אינך מעוניין שהמשתמשים שלך יסבלו בגלל זמן טעינה לא טוב של האתר ויעבור למשנהו הבא. לכן, מינימום של הקוד חשוב ביותר.
משתמש משתמש עבור מסד נתונים
Infact, תוך כדי בניית אתר אנו יודעים מה מורכב מבסיס הקוד המרבי?
הכל על CSS, HTML ו- Javascript. התחרות היום לגרום לאתר שלך להראות מושך מבחינה ויזואלית מדגישה את קובץ ה- CSS רבות ומבלי שנממש את האתר שלנו בקוד כבד.
נכנס, מזערי ..
ממשיך הלאה עם מאמר זה ב- Minify CSS
מה זה מזעור ?
Minification מאפשר לך לפשט את הקוד לגודל קובץ מינימלי שאינו משפיע על הקוד ובכל זאת מקטין את גודל הקובץ. בתהליך זה, אתה יכול להסיר את הריווח והתווים המיותרים שאינם משפיעים על מקוריות האתר שלך. כמה דברים שיש להימנע מהקוד הם:
- תווים לבנים
- תווי שורה חדשים
- חסום תוחמים
- הערות
- קיצור שמות משתנים
גורמים אלה אינם מעורבים בכדי לגרום לאתר שלך לפעול במקום רק להפוך את הקובץ לכבד יותר ולהגדיל את זמן טעינת האתר.
הקריאות של הקוד אינה כוללת לחלוטין את מה שהמכונה מבינה. דפדפן אינטרנט לא זקוק למרווח נוסף בין הדמויות כדי להבין ולהפעיל. לכן, נסה להקטין אותם ולצמצם את קוד ה- CSS וה- HTML.
ניקח דוגמה:
#myContent {font-family: Montserrat} #myContent {font-size: 90%}צמצם את ה- CSS שלי
כמעט הבדל של 48% בקובץ המקורי והממוזער. צומצם ב -178 בתים. לאחר צמצום
#myContent {font-family: Arialfont-size: 90%}שלום עולם!
ממשיך הלאה עם מאמר זה ב- Minify CSS
למה מזעור נָחוּץ?
כדי לשפר את זמן הטעינה של האתר. אף אחד לא אוהב לחכות לאתר שיטען לפי הנוחות. עם כל כך הרבה אפשרויות זמינות, אנשים נוטים לעבור לאפשרות אחרת. לכן, עדיף להקטין את גודל הקובץ.
ממשיך הלאה עם מאמר זה ב- Minify CSS
איך אתה להקטין CSS, JS, קוד HTML?
למינימום, ישנם מספר רב של כלים זמינים ברשת אשר עשויים לעזור לך לצמצם את בסיס הקוד. תוכל גם לבחור לעשות זאת באופן ידני, אך עבור בסיס קוד גדול יותר, מומלץ להשתמש בכל אחד מהכלים הבאים כדי להקטין את קובץ ה- CSS שלך:
CSSminifier.com: כלי פשוט ביותר לשימוש. פשוט העתק את הקוד בצד שמאל, צור את הקובץ הממוזער והורד אותו. לקובץ הממוזער תהיה סיומת .min.
לקובץ ה- CSS הממוזער שלך תהיה הסיומת demo.min.css.
Smallseotools.com: העתק את הקוד שלך או העלה את קובץ הקוד שלך. זה יקטין את הקוד שלך ויאפשר לך להעתיק אותו או להוריד אותו.
אופטימיזציה אוטומטית: זהו תוסף שתוכל להוסיף לכלים הוורדפרסיים שלך. כתוסף, אתה יכול לבחור למזער את קוד ה- CSS שלך שם ושם.
למפתח קל יותר להבין מתי הקובץ ממוזער ומתי לא. לקובץ מזערי תהיה סיומת .min.
ממשיך הלאה עם מאמר זה ב- Minify CSS
מתי כדאי לעשות זאת?
המינימום צריך להיעשות בעיקר כאשר אתה כותב את הקוד ואתה צריך לשלוח אותו בשרת לקבלת תגובה. לאחר הקטנת הקבצים, הגרסאות הממוזערות משמשות להפצתם למשתמשים.
היתרונות של מזעור ?
הקטנת גודל הקובץ: על ידי הסרת הריווח הנוסף, הקטנת שמות המשתנים והסרת הערות, גודל הקובץ כמעט מצטמצם ב-30-60%. טעינה מהירה יותר: עם פחות נתונים לשליחה ברשת, האתר נטען מהר יותר מבעבר. עלות רוחב פס נמוכה יותר: כאשר מסירים נתונים מיותרים, רוחב הפס הדרוש הוא הרבה פחות וכך גם העלות.
דברים שיש לזכור:
עוד לפני שתנסה למזער, ודא שהקוד שלך לא פורץ מגבולות. הזרימה לא אמורה להיות מופרעת והפונקציונליות צריכה להישאר ללא פנים. עליכם לבדוק שגם לאחר האינפורמציה הקוד שלכם פועל באופן דומה.
Infact, כשיטה מומלצת תמיד תוכלו לשמור על תבנית מוכנה. בצע את השינויים בתבנית המובנית אשר יחסוך לך זמן נדיב.
האם זה דומה לדחיסה?
ובכן, בהחלט לא. מינימום שונה מדחיסה. דחיסה גורמת לקובץ ממוזער להפחית יותר אך אינו משפיע על עיצוב קוד ומבנהו.
הקובץ ממוזער ואז דחוס כ- zip ונשלח לרשת כאשר לקוח מבקש לגשת לאתר. לאחר מכן הקובץ אינו דחוס ומשמש.
דוגמאות:
לפני הסימון:
תיק עבודות
- בית
לאחר מינימום:
תיק עבודות
- בית
הקוד בהחלט קשה יותר לקריאה והבנה לאדם, אך סביר באותה מידה כי מכונה יכולה לעבד אותו. למכונה לא ממש אכפת מיופיו של הקוד והמרווח, היא מבינה את המהות ועובדת בהתאם.
התרשמתי מספיק עם טכניקת המיניפיקציה?
ואז נסה בעצמך. הפחית את עול הקובץ שלך ותן לאתר שלך לזרום בחופשיות לכל המשתמשים!
זה מביא אותנו לסוף מאמר זה בנושא Minify In CSS.
אם אתה מעוניין ללמוד עוד על פיתוח אתרים, עיין ב מאת אדוריקה. הדרכת הסמכת פיתוח אתרים תעזור לך ללמוד כיצד ליצור אתרים מרשימים באמצעות HTML5, CSS3, Twitter Bootstrap 3, jQuery ו- Google APIs ולפרוס אותו לשירות אחסון פשוט של אמזון (S3).
אם אתה עדיין מעוניין אם יש לך שאלה כלשהי, תוכל לפרסם אותה בסעיף ההערות בבלוג 'Minify In CSS' ונחזור אליך בהקדם האפשרי.