אופטימיזציה של דפי אינטרנט באירוע של SharePoint Experts 2014

מאי 25, 2014

תגיות: ,
אין תגובות

מצ”ב מצגת שהעברתי באירוע SharePoint Experts 2014 בנושא ביצועים. חלק זה במצגת נתמקד במספר המלצות לשיפור ביצועים של דפי אינטרנט מבוססי תשתית פרסום של SharePoint.

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

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

שים לב: מאמר זה אינו מתייחס לאופטימזציה של הקוד (מבנה שאילתות CAML, שחרור אובייקטים וכדו’)

לשיפור ביצועים מומלץ לפעול על פי ההנחיות הבאות:

צמצום משקל דפי SharePoint

  • להקפיד להקטין נפח תמונות בהתאמה לגודל שבו הן מוצגות בדף (מומלץ למנף את יכולות ה Image Rendition של SharePoint 2013)
  • לצמצם מספר התמונות בדף באמצעות שימוש בטכניקת CSS Image Sprites
  • לצמצם את מספר קבצי CSS על ידי איחוד כל הקבצים לקובץ בודד (להוציא מן הכלל את קבצי המערכת של SharePoint)
  • לצמצם את מספר קבצי JavaScript על ידי איחוד כל הקבצים לקובץ אחד (כולל פלאגים של JQuery)
  • מיקום קבצי המערך (תמונות, JS ו CSS) בספריות המערכת המתאימות ב SharePoint, ספריות אלו מנחות את הדפדפן לשמור את הקבצים ב Cache של הדפדפן

אופטימיזציה של דפי SharePoint

  • להימנע משימוש בטבלאות של HTML לצורך הגדרת מבנה הדף
  • להקפיד על שימוש בקבצי CSS ו JavaScript חיצוניים (אין להטמיע כלל קוד CSS או Java-Script בדף)
  • לטעינה מהירה יותר של הדף, יש למקם את קבצי ה CSS בראש הדף
  • למניעת עצירה או יצירת תלות בקבצי ה JS בתהליך הטעינה של הדף, יש למקם את קבצי ה JavaScript בתחתית הדף או שימוש בטכניקת טעינה אסינכרונית
  • להקפיד על כיווץ או דחיסת קבצי JS ו CSS (אין להסתמך על כיווץ שנעשה בצד השרת ב Gzip) על ידי הסרת תווים לבנים (רווחים מיותרים, תאבים, שבירת שורות)
  • שימוש מושכל ב View State של .Net ורק במקומות שצריך (שימוש ב Post Back וכדו')
  • מתן שמות קצרים לפקדים של .Net ובדגש על אלו שממוקמים ברשימות או ברכיבים מקוננים

Responsive VS. Adaptive Design

תפיסת הפתרון של עיצוב מגיב (Responsive Design) משנה את האלמנטים על הדף בצד הדפדפן ולא בצד שרת. לכן בעוד שיטת העבודה של Adaptive Design יכולה להסיר רכיבים או מקטעים מהדף על פי קריטריונים, שיטת עיצוב המגיב יכולה להסתיר  או לשנות את העיצוב של רכיבים אלו. משמעות הדבר: בזמן שימוש בעיצוב מגיב, כל תוכן הדף (ללא יוצא מן הכלל) יורד להתקן הקצה. דבר זה עלול להשפיע על זמן הורדת הדף מהשרת וזמן עיבוד של הדף (בדגש על התקנים ניידים כדוגמת טלפונים סלולריים)

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

המצלות לביצוע:

  • גודל התמונות – שליטה באמצעות Image Rendition
  • תוכן הדף – שליטה באמצעות Device channels על תצוגת ה Master Page ו/או Page Layout

הפעלת מנגנוני Cache

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

מנגנוני Cache שניתן להפעיל על דפי SharePoint:

  • זיכרון מטמון ברמת אתר/פריסת דף. כולל אפשרות של זיכרון מטמון חלקי – זהו תשתית ה Cache המהירה ביותר, מהסיבה שהיא כולל כבר את שלב ה Rendering של הדף או הרכיב
  • שימוש ב AppFabric Cache (Distributed Cache) – עובר אובייקים של .Net
  • BLOB Cache – מטפל בעיקר במשאבים כדוגמת: תמנות, קבצי JS ו CSS

Yoel
בהצלחה,
יואל הורביץ
יועץ בכיר בקבוצת היועצים (MCS),  מיקרוסופט ישראל

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *