איך להאיץ את עליית האתר – חלק 2

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

בואו לראות איך עושים את זה……

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

אז נפתח את הפיירפוקס ונגלוש לאתר , לחיצה על F12 תפתח לנו את ה FIREBUG , בהנחה שהתקנתם הכל כמו שצריך יהיה לכם לשונית שנקרית yslow תלחצו עלייה ואז תלחצו על run test ככל שהציון יותר נמוך ככה יש לכם יותר מה לתקן, אני אציג בעיות ואיך לפתור אותם.

Make fewer HTTP requests

זאת בעיה מאד נפוצה  והיא לבד אחראית על הגדלת זמן הטעינה באופן משמעותי

מה זה אומר : שאתם מבקשים יותר מידי קבצים חיצוניים (תמונות , JS, CSS) , השאיפה היא שלכל אתר יהיה רק קובץ CSS אחד , לא יותר מ 3 JS (אפשר להסתדר גם עם 1-2) וכמה שפחות תמונות – תלוי בעיצוב

אז בואו נראה איך לצמצם את מספר הבקשות:

נעשה קובץ js חדש (נניח scripts.js) ונעתיק אליו את כל הקבצי JS האחרים שיש לנו באתר על פי הסדר שהם מופיעים , בנוסף נמחק את כל הרווחים על ידי ה js packer (לינק בפוסט הקודם) ככה שגם הקטנו את מספר הבקשות וגם הקטנו את הגודל ב KB

Minify JavaScript and CSS

בקצרה זה אומר להעיף את הרווחים מקבצי ה JS וה CSS שלכם , בפוסט הקודם נתתי לינק גם ל CSS COMPRESSOR וגם ל JS COMPRESSOR , וגם זה בדיוק כותרת אחת לפני

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

Make JavaScript and CSS external

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

Reduce DNS lookups

זה אומר שאתם ניגשים ליותר מידי שרתים שונים כלומר אם יש לכם את הURLים הבאים : domain.com/image1.png ,domain2.com/script.js , domain3.com/file.css אתם ניגשים ל 4 שרתים שונים (בהנחה שהאתר לא יושב על אחד מהדומיינים האלה – אם כן אז אתם ניגשים ל 3 שרתים) כל גישה לדומיין אחר , עוברת ב"מערכת DNSים" בשביל להגיע לשרת , אם תשתמשו בשרת אחד אחרי הבקשה הראשונה ההגדרה שמורה לדפדפן בזיכרון והוא לא יחפש את השרת עוד פעם, בקצרה , תדאגו שכל הקבצים שלכם יהיו במקום אחד.

Reduce the number of DOM elements

העיצוב שלכם משתמש בהרבה יותר מידי תגיות , אם זה המצב , אתם צריכים פשוט לבנות את הדף של ה HTML מחדש , להשתמשים יותר ב DIVים ולהשתמש באופן יותר גורף ב CSS

Put JavaScript at bottom

זאת טעות מאד מאד מאד נפוצה , הדפדפן לא מרדנר את הדף עד שיש לו את כל הקבצים של ה JS טעונים (אם נניח יש לאתר שלכם 15 קבצי JS , הדפדפן לא יציג לגמרי את האתר עד שיש לו את כל הקבצים – ככה הדפדפנים עובדים – חפשו parallel downloads) ברגע שה JS בתחתית הדף הדפדפן מציג ישר את האתר ואז פונה לעשות את ההשלמות של ה JS – כל הנושא הזה לא תקף לגבי ה CSS – תשאירו אותו בראש העמוד.

טוב זה הכל לפוסט הזה , בפוסט הבא בסדרה אני אציג פעולות שצריך לעשות בצד שרת על מנת לגרום לאתר לעלות יותר מהר (שימוש ב GZIP , HEADERS ואיך לעשות את זה)

שאלות  וכאלה אתם מוזמנים לשאול פה..

תהנו.