אופטימיזציית CSS – כיווץ קבצי CSS
נכתב ע"י יוחאי ירמיהו8 שאלות
תיאור קצר לשיעור: בשיעור הזה נלמד איך לבצע אופטימיזציה לקבצי CSS באמצעות התוסף של WP-Rocket ונבין איך אנחנו יכולים לכווץ קבצי CSS ומה הפעולה הזאת עושה בעמוד בפועל.
אורך השיעור: 6:24 דקות
קורסים המכילים את השיעור וידאו:
איך לבנות אתר בחינם בשעה וחצי?
תוכן השיעור:
אתר לבדיקת קבצי CSS ו-Javascript: (האתר הפסיק לעבוד)
אתר אלטרנטיבה לבדיקת טעינת קבצים:
תוסף אלטרנטיבה ל-Chrome לבדיקת קבצי CSS ו-Javascript (אם האתר הראשון לא פועל):
https://chrome.google.com/webstore/detail/blue-button-the-webpage-x/ahbcoeleapdfhmlnjglbiaddohfncace
אלטרנטיבה נוספת לצפייה בקבצים עם gtmetrix:
יש להיכנס לאתר הבא וליצור חשבון ובצע חיפוש על האתר והקבצים שנטענים בו.
לאחר ביצוע חיפוש באתר יש את האפשרות לבחור ב-Waterfall ולסמן את האפשרות של קבצי CSS או קבצי JS.
הקבצים שטענים בהתחלה (שלושת הקבצים הראשונים) הם הקבצים שנטענים עם תחילת העמוד, והקבצים שנטענים מתחת נטענים לאחר כמות זמן יותר גדולה ובדרך כלל אלו קבצים שנטענים באמצעות Lazyload.
הצטרפו לקהילות המובילות של בוני האתרים בישראל
זה הזמן להצטרף לקהילה שלנו ולקבל סיוע ותמיכה בקבוצות המובילות בארץ לבוני אתרים בוורדפרס (-:
מתחילים בקטן - קורסים לבוני אתרים בפחות מ-99 ₪
-
קורס: וורדפרס Tool Kit
69.00 ₪ -
20 אלף בחודש מבניית אתרים
69.00 ₪ -
נגישות אתרים באופן מעשי
199.00 ₪ -
התנהלות עם לקוחות
99.00 ₪ -
משיחת מכירה לכסף בחשבון
99.00 ₪ -
בניית אתרים + כתיבת קוד עם AI (בינה מלאכותית)
199.00 ₪ -
זכויות יוצרים בדיגיטל
69.00 ₪ -
יסודות העיצוב לבוני אתרים
69.00 ₪ -
קורס קלאודוויז + קורס קלאודפלייר + פתיחת מייל עסקי בחינם
29.00 ₪ -
אפיון ראשוני ומחקר מילות מפתח
29.00 ₪ -
גיבוי, שחזור, ותחזוקה לאתר
29.00 ₪ -
התקנת וורדפרס על המחשב
29.00 ₪
עוד לא צפיתם בהדרכה? זה בחינם!
יש לי הצעה מעניינת יצרתי הדרכה מלאה של למעלה משעתיים שתלמד אותך איך לבנות אתר מ-0 בחינם כולל רכישת אחסון ודומיין. נשמע מעניין? אשמח לשלוח לך אותה למייל.
קורסים מקיפים ומומלצים ללימוד בניית אתרים
לבנות אתר ב-10 ימים
קורס מזורז שילמד אותך לבנות אתרים ב-10 ימים. נקודת כניסה מעולה לתחום של בניית אתרים במחיר משתלם.
- קורס לבנות אתר ב-10 ימים 52 שיעורים שילמדו אותך הכל על בניית אתרים
- בונוס 1: לבנות אתר מתבנית מוכנה לאנשים עסוקים שלא רוצים להשקיע 10 ימים
- בונוס 2: גיבוי, שחזור, ותחזוקה לאתר איך לבצע גיבויים ולתחזק אתר ללא תקלות
- בונוס 3: אלמנטור קונטיינר (Container) איך ליצור תוכן באמצעות אלמנטור קונטיינר
- בונוס 4: קורס אחסון אתרים ב-Cloudways אחסון אתרים על גבי חברות השרתים המובילות בעולם
- בונוס 5: קורס קלאודפלייר + מייל עסקי בחינם איך להשתמש בקלאודפלייר + יצירת מייל עסקי בחינם
- בונוס 6: לעבור אחסון ולהישאר בחיים איך להעביר אתר מאחסון אחד לאחר ללא תקלות
- תמיכה לשנה לשאלות בעמודי השיעורים
- גישה לקבוצת הפייסבוק של הקורס
- גישה לכל החיים
- תעודה הכשרה בסיום הקורס (קובץ PDF)
- גישה לעדכונים ושיעורים חדשים
- 100% החזר כספי ל-14 ימים
רכשו את הקורס 597 סטודנטים לפניך (-:
מסלול וורדפרס Expert
למעלה מ-10 קורסים מלאים ומעל 600 שיעורים שילמדו אותך הכל על בניית אתרים ברמה הגבוהה ביותר בארץ.
- קורס וורדפרס Beginner קורס בניית אתרים למתחילים – (2,250 ₪)
- קורס וורדפרס Tool Kit הצעת מחיר + אפיון + צ’ק ליסט + התנהלות עם לקוחות
- קורס בניית אתר ב-10 ימים איך לבנות אתר במהירות שיא
- קורס וורדפרס Next Level מחיר הקורס 2,500 ₪
- קורס וורדפרס SEO התאמת אתרים לגוגל – (750 ₪)
- קורס: אלמנטור Ninja הקורס שיהפוך אותך לנינג’ה באלמנטור – (999 ₪)
- קורס: אלמנטור PRO + אנימציות יצירת אתרים מורכבים ואנימציה – (550 ₪)
- קורס וורדפרס Rocket שיפור מהירות לאתר – (999 ₪)
- קורס וורדפרס Security חיזוק אבטחה לאתר – (750 ₪)
- קורס וורדפרס Global בניית אתרים דו לשוניים בכל השפות – (750 ₪)
- בונוס 1: גיבוי, שחזור, ותחזוקה לאתר תחזוקת אתרים ומניעת בעיות ותקלות
- בונוס 2: אנליטיקה ומעקב לאתר גוגל אנליטיקס, סרץ קונסול ויאנדקס מטריקה
- בונוס 3: איך לקבל יותר פניות מהאתר הוספת כפתורי יצירת קשר + שיפור המרות
- בונוס 4: קלאודפלייר + מייל עסקי בחינם שימוש בקלאודפלייר ויצירת מייל עסקי בחינם
- בונוס 5: התקנת אתר על המחשב איך להשתמש במחשב ולחסוך עלויות אחסון
- בונוס 6: קורס Cloudways אחסון אתרים בחברות השרתים המובילות בעולם
- בונוס 7: לעבור אחסון ולהישאר בחיים איך להעביר אתר מאחסון אחד לאחר ללא תקלות
- בונוס 8: אופטימיזציה לתמונות איך להעלות תמונות שיעזרו לאתר להתקדם בגוגל
- בונוס 9: יסודות העיצוב לבוני אתרים כל מה שצריך לדעת כדי לעצב את האתר המושלם
- בונוס 10: זכויות יוצרים בדיגיטל איך להימנע מתביעה משפטית כאשר בונים אתר
- בונוס 11: 20 אלף בחודש מבניית אתרים איך למצוא לקוחות ולייצר הכנסה מבניית אתרים
- בונוס 12: משיחת מכירה לכסף בחשבון איך לשפר את התהליך מכירה ולסגור יותר עסקאות
- בונוס 13: התנהלות עם לקוחות + ניהול פרויקטים איך מתנהל פרויקט בניית אתרים כולל תחזוקה לאתר
- 705 שיעורים למתחילים + למתקדמים
- תמיכה לשנה לשאלות בעמודי השיעורים
- גישה לקבוצת הפייסבוק של הקורס
- גישה לכל החיים
- תעודה הכשרה בסיום הקורס (קובץ PDF)
- גישה לעדכונים ושיעורים חדשים
- 100% החזר כספי ל-14 ימים
רכשו את הקורס 494 סטודנטים לפניך (-:
אם אהבתם את השיעור ואתם רוצים לשתף אותו ניתן לעשות זאת על ידי לחיצה על כפתורי השיתוף מתחת:
עוסק בתחום של פיתוח אתרים ועיצוב גרפי למעלה מ-15 שנה. נינג’ה מומחה לוורדפרס, מפתח תוספים ותבניות בהתאמה אישית והמרצה שלכם בקורס הדיגיטלי המקיף והמוביל בישראל ללימוד בניית אתרים בוורדפרס בצורה נכונה.
שאלות ותשובות לשיעור
8 שאלות
באסה, היכולת לשאול שאלות בשיעור פתוחה רק למשתמשים שרכשו את הקורס
האופטמיזציה לקוד [CSS וכדומה] נחשבת כחלק מהקאש?
אתה דיברתי מקודם הרבה על מטמון סטטי.
האופטימיזציה לקוד נכללת בזה וזה הדרך של התוסף ליצור מטמון אפקטיבי?
במילים אחרות – האם האופטימיזציה זה ברמת שרת אחסון, ברמת המטמון, או שזה משהו שלישי אחר באמצע?
האופטימיזציה לקבצי CSS זה ברמת המטמון של התוסף. התוסף יוצר קובץ נפרד שמכיל רק את הקוד המצומצם שצריך כדי שהאתר יפעל כמו שצריך.
האם יתכן שבאופן זמני האתר לבדיקת CSS שצירפת לו קישור בתיאור השיעור – לא עובד?
(בדקתי בכרום ובפיירפוקס, ובדקתי לאחמ”כ במחשב נוסף)
האם לבינתיים יש אתר אחר שאפשר לבצע את אותם בדיקות באותו קונספט שהודגם בסרטון?
Application error
An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command
heroku logs –tail
היי יעקב, נראה כאילו זה יתכן. תנסה לבדוק את זה בימים הקרובים ואם תראה שזה עדיין לא עובד תודיע לי ואני אנסה למצוא לזה תחליף ואולי אעשה סרטון נוסף.
יש אתרים אחרים אבל ברמת הקלות של קבלת הקוד והקבצים של הפונטים לא מצאתי משהו שמשתווה לאתר הזה.
גם אצלי אף אחד מהאתרים שנתת לא עובד…
היי, האתר שהיה קיים בעבר הפסיק לעבוד.
אבל ממה שאני רואה התוסף לכרום כן עובד, צריך פשוט לדעת איך לעבוד איתו.
https://chrome.google.com/webstore/detail/blue-button-the-webpage-x/ahbcoeleapdfhmlnjglbiaddohfncace
בתוך התוסף הזה, איך יודעים מה CSS, מה JS וכו
שימי לב שיש לך תפריט צדדי. האופציה של Scripts זה קבצי JS והאופציה של StyleSheets אלו קבצי CSS.
גם באופן כללי קבצי JS יהיו עם סיומת קובץ של .JS והקבצים של CSS יהיו עם סיומת של .CSS אז אפשר לזהות את זה גם לפי שם הקובץ.