מקודד לשוא|וידויים של מוח מקוון

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

בהתאם לממצאים של סונדרס וצוותו גובשו הכללים הבאים:

1. צמצום כמות קריאות HTTP ,זאת על ידי שימוש בטכניקות כמו CSS SPRITES ואיחוד קבצי CSS ו JS .

2. הפצת תוכן סטאטי על ידי שימוש ב CDN,המעבר להפצת תוכן סטטי בעזרת CDN קל יותר ומשפיע יותר משינוי ארכיטקטוני לפיצול המידע הדינאמי (את הטכניקה לפיצול מידע דינמי סקרתי בפוסטים קודמים)

3. שימוש נכון בתאריך תפוגה (expiration header) לכל משאב (לא רק לתמונות), במחקר שערכו גילו כי באתרים שונים הרבה משאבים קבועים (עד כ 70%) יכולים להיות עם תאריך תפוגה ארוך יותר. מעבר לתאריכי תפוגה ארוכים מחייב התייחסות ארכיטקטונית לעדכון גרסת משאב מסוים. לדוגמה – תיקון בקוד האתר דורש שינוי קוד ג'אוה סקריפט, מכיוון שאנו השתמשנו בתאריכי תפוגה ארוכים התיקון אף פעם (או עוד הרבה מאוד זמן) יגיע ללקוחות ותיקים הפתרון הוא חתימת גרסאות בשם הקובץ או כתובתו (URL)

4. שימוש ב GZIP (נכתב כחלק מפרוטוקול HTTP) נתמך ברוב הדפדפנים וחוסך כ 70% מהתעבורה אם משתמשים בו על כל המשאבים הטקסטואליים. בחלק גדול מהמקרים GZIP מופעל רק על קבצי HTML ומזניח שלא לצורך משאבי טקסט אחרים כגון CSS ו JS.

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

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

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

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

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

10. שימוש בכלי ניקוי קוד (minification)  להורדת הערות רווחים וקיצור קוד.

11. הימנעות מ REDIRECT אם בקריאות שרת כגון 301 ו 302 או שימוש בקוד HTML META או על ידי ג'אוה סקירפט ככל מקרה תהיה טעינה כפולה הראשונה של הדף המפנה ורק לאחר מכן כתובת היעד.

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

13. הגדרות ETAGS , תגיות יישות (ETags) הן מנגנון אשר שרתי אינטרנט ודפדפנים משתמשים כדי לקבוע אם רכיב בזיכרון המטמון של הדפדפן תואם אחד בשרת המקור (ישות יכולה להיות תמונות, סקריפטים, CSS, וכו ') .התגיות נוספו לספק מנגנון אימות גמיש יותר מאשר תאריך התפוגה.

14. הכנסת AJAX לזיכרון המטמון, בהרבה מקרים הקריאות הינם פרסונליות והאינסטינקט הראשוני הוא לא לשמור את המידע במטמון. אך למרות שהמידע אישי לא תמיד הוא משתנה לעתים קרובות. מומלץ להשתמש באותה טכניקה שמתוארת בסעיף 3.

תקן HTML5 הוא הגרסה הבאה של HTML והוא הסטנדרט הבא המומלץ ל HTML4.1 ו XHTML1.0, התקן החדש מבטא שינוי גישה וצורת מחשבה.

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

כיום תקן HTML5 מציג שינוי גישה ומנסה לתת מענה סטנדרטי לשלל מנועי התצוגה (פלאש, סילברליט , וג'אווה אפקטס) בין התכונות החדשות של HTML5 בולטים :

וידאו ואודיו

היכולת להציג וידאו ללא תלות בהתקן נוסף הנו ללא ספק הנושא הנושא הכי מדובר בתקן החדש ובעיקר חוסר התקינה לגבי המפענחים (CODECS) לנגן. ממומש על ידי התגים <video><audio>

ממשק תכנותי לגרפיקה דו ממדית

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

תגים סמנטיים

תגים חדשים שיחליפו את ה <div> הכללי כגון <nav>לתפריטי ניווט או <footer> ו <header> לראש ותחתית העמוד. אין לי ספק כי תגים אלה נועדו לניתוח יעיל יותר של תוכן הדף ומקודמים עלי ידי חברות עם אינטרס במנועי חיפוש , אם גם בגלל העובדה שהם יוצאי דופן במהותם ועדיין פונים לHTML כעמודי תוכן ולא כאפליקציות.

שמירת נתונים מקומית

שמירת נתונים מקומית על המחשב בצורה מוגברת (מעבר ליכולות ה Cookies) , דבר המאפשר ליצור אפליקציות שיכולות לעבוד גם במצב מנותק מהרשת. ניתן לראות מימושים דומים היום ב google gears  ו flash.

תקשורת בין מסמכים

היכולת לתקשר בין מסמכים בצורה תכנותית כבר קיים היום, עדיין לא ראיתי יותר מדי תוכן על התקן הזה אך אני משער שמדובר בתקשורת PUB/SUB שניתן לראות ב flash ו silverlight.