מהיר ועצבני… (וגם מקנברט לפחות ב-10% יותר טוב)

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

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

כשאני התחלתי לבצע פעולות לאופטימיזציית זמן טעינה, זה שיפר לי את הרווחים ב-10% לפחות.

יוסי, הבמה שלך…

נושא די מוכר וחשוב שמעסיק כל אחד ואחד מאיתנו, הוא מהירות טעינת אתרי אינטרנט בדפדפן. כל אחד רוצה ומעוניין לדעת, כמה מהר האתר שלו ניטען. בפוסט אני אדבר על איך אפשר להעיץ את טעינת אתרי אינטרנט באופן כללי ובמערכת וורדפרס בפרט. אני אתיחס לנושא בדגש על מערכת וורדפרס אך זה אכן תקף לכל מערכת ואתר אינטרנט ולאוו דווקא לוורדפרס. לפני כתיבת מילים אלו, חשבתי האם כדאי לדבר על תוספים כמו W3C total Cache או על Minify ותוספים שונים שמאפשרים אופטימיזציה, אבל החלטתי לשתף אותכם במשהו יותר מעניין שאני בטוח שלא כולם ידעו או חשבו על זה בעבר (או אולי כן, מי יודע). בכל מקרה, מקווה שההסבר יהיה ברור לכולם ואני אנסה להסביר הכל במילים הכי פשוטות שאפשר.

אז ככה, מתחילים:

כולנו משתמשים בדפדפנים כדי לגלוש באינטרנט, חלקם בכרום, חלקם בפיירפוקס וחלקם עדיין משתמשים באקספלורר. רוב הדפדפנים היום מבצעים בין 2 ל-6 חיבורים בו זמנית לשרת. כדי להמחיש את הנושא אני אסביר. כאשר אתה טוען עמוד או נכנס לאתר כלשהו, מאחורי הקלעים מתבצעה חיבור בין דפדפן לשרת או יותר נכון נשלחות בקשות http לשרת בו נמצאים קבצים של האתר אליו אתה מנסה לגשת. הדפדפן מתחיל להוריד קבצי תמונות, קבצי Css, קבצי JS לדפדפן שבאמצעותו אתה גולש. העיניין הוא, שדפדפן מבצעה בו זמנית רק מספר חיבורים. למשל אם ניקח לדוגמה דפדפן שמבצעה רק 2 חיבורים במקביל (אינטרנט אקספלורר 7 למשל), ובעמוד שנכנסתה יש יותר מ-4 תמונות, הוא קודם יתחיל להוריד את שניים ואז תיגש לשאר, או כאשר היא תסיים להוריד את התמונה הראשונה היא תיגש לתמונה הבאה וכך החיבור המקסימלי ישאר תמיד 2. כרום למשל (תלוי בגרסה כמובן) יכול לבצעה עד 6 חיבורים במקביל, וכפיירפוקס יכולה 8. בתמונות הבאות אפשר לראות את ההבדל בין כמות החיבורים וההשפעה שלהם על מהירות הטעינה.

עד 2 חיבורים

עד 4 חיבורים

עד 8 חיבורים

כמו שראינו בתמונות למעלה, ככל שכמות החיבורים גדלה, כך גם טעינה של העמוד שאליו אנחנו רוצים להגיע תהיה מהירה יותר, מכיוון שהדפדפן מוריד יותר קבצים במקביל. השיטה או הטריק, תקראו לזה איך שאתם חושבים לנכון, מומלצת מאוד כי אם דפדפן צריך לעשות 30 חיבורים ולהמתין להוריד את אותם קבצים ממקור 1 בלבד, היא תעשה זאת מ-3 מקורות במקביל וכך נוכל לקצר את זמני הטעינה. השאלה היא, איך אנחנו גורמים לדפדפנים להכפיל את המהירות. למשל במקום 2 חיבורים במקביל יהפוך להיות 4, או במקום 4 יהפוך 8. יש לזה כמה פתרונות ואחת מהן, לאחסן את כל התמונות באתרים אחרים, בשרתים אחרים למשל כמו Flicker, Picassa, Facebook. אנחנו יכולים פשוט לקשר אליהם ולהציג את התמונות שנמצאות בשרתים אחרים בתוך האתר שלנו. מה שיקרה בפועל, שהתמונות יטענו במקביל כי דפדפן ידע לזהות שמדובר באתר אחר ויבצעה עוד חיבורים נוספים וכך נוכל להגביר את המהירות ההורדה והטעינה של העמוד.

פתרון הפשוט יותר, זה Subdomains. אם נבחר להשתמש ב-סאבדומיין לתמונות, הדפדפן יתיחס אליו כאתר חדש ושוב יבצע חיבורים נוספים במקביל. למשל, אם כל התמונות באתר הזה נשמור ב- img1.pjs.co.il, כך נוכל להכפיל את זמן טעינה של האתר או לפחות לקצר את זמן ההמתנה להורדת תמונות בעמוד. הנושא כמובן תקף לאתרים שיש להם תמונות רבות בעמוד והכוונה לא רק תמונות שהוספתם בעצמכם בתוכן האתר, אלא גם תמונות של התבנית שבה אתם משתמשים (תמונות גרפיות).

אז איך עושים את זה בפועל? ניקח דוגמה את ממשק ניהול חשבון בשרת – Cpanel.

ניגשים ל-Subdomains:

רושמים בתיבה של – Subdomain את השם הרצוי, ובוחרים תיקיה חדשה לתמונות שלנו.

כעת מה שנישאר לנו, להחליט מה אנחנו עושים בשלב הראשון. אני בעד לעביר את קבצי – Css + תמונות התבנית ל- Subdomain. ניגשים ל- FileManager (מנהל הקבצים) בשרת וניגשים לתיקיית התבנית שבה אנחנו משתמשים בוורדפרס. השרשור לתיקיית התבנית נראת כך: wp-content/themes/THEME_NAME

מעתיקים את קבצי Css וקבצי התמונות של התבנית לתיקיה של Subdomain.

הבעיה: וורדפרס לא יודע שעתקתה את הקבצים לתיקיה אחרת בשרת. עליך להגדיר זאת ידנית בתוך התבנית. ניגשים שוב לתיקיית התבנית ומורידים את הקובץ header.php למחשב ומתחילים לערוך (למי שמאופשר עריכת קבצים בתוך השרת, אין צורך להוריד את הקובץ למחשב). בקובץ הנ"ל עלינו לחפש שרשורים הנמצאים בין התגיות head לקבצי Css. לרוב המוחלט וברוב התבניות הבסיסיות של וורדפרס, אנחנו נמצא שרשור דינמי לקבצי Css. אפשר לזהות אותם באמצעות שם- Style.css או פקודה – stylesheet_url ולגשת אליהם בשרת. דוגמה לשרשור דינמי לקובץ Css בתבנית.

הסבר:

זהו שרשור לקובץ Css של התבנית. יכול להיות שתבנית תכלול יותר מקובץ אחד של Css או יכלול שרשור שונה לקובץ בתוך תיקיית התבנית. אך העיקר, להבין את השיטה והשאר כבר עיניין טכני לחלוטין. אז מה עושים עם הקוד הזה? מחליפים לשרשור סטטי. במקום הקוד שרשור לקובץ Css רושמים כתובת סטטית למשל: http://img1.pjs.co.il/ אז התוצאה אמורה להיראות כך:


link rel="stylesheet" href="http://img1.pjs.co.il/style.css" type="text/css" media="screen" charset="utf-8" /> >


שים לב, עברת קבצי Css לסאבדומיין או לתיקיה כלשהי ממקומו המקורי יכול לגרום לאי הצגת תמונות גרפיות של התבנית מכיוון ששרשור לתמונות משתנה עם הזזת קובץ Css. כדי לבדוק אילו תמונות לא מצליחות להטען, עליך להשתמש בכלי – Pingdom Tool שאפשר לגשת אליו בקישור הבא: http://tools.pingdom.com/fpt/

הכלי של פינגדון מיועד לבדיקת מהירות טעינת אתרי אינטרנט ע"י צפיה בכל השרשורים והורדת הקבצים שמתבצעה מאחורי הקלעים בדפדפן בזמן טעינת האתר. במידה ודפדפן לא מצליח לקבל את הקובץ הרצוי, הכלי של Pingdom יסמן אותו בתור לינק אדום. לפי זה, נוכל לדעת אילו קבצים לא ניטענים בדפדפן ולעביר את התמונות אלו בתיקיה המתאימה בתוך Subdomain ולשנות את שרשורים בתוך קובץ Css. את אותה השיטה אפשר לאמץ גם לקבצי ג'אווהסקריפט (js). לפתוח סאבדומיין נוסף בשם js והשרשור לקבצי javascript יהפכו להיות – js.pjs.co.il/…., וכך נוצר "עוד אתר" שדפדפן יכול להוריד ממנו את קבצי ג'אווהסקריפט. אם זה גם לא מספיק, אפשר לעביר את כל התיקיה של ה-uploads בוורדפרס ל-Subdomain.

איך מגדירים קובץ להעלאת קבצים שונה מברירת מחדל בוורדפרס?

אם קראת עד לפה, והצלחתה ליישם את כל מה שכתבתי לפני, אז הנושא עם וורדפרדס הולכת להיות קלה הרבה יותר. קודם כל, עליך לפתוח שוב – Subdomain לקבצים המועלים בוורדפרס. גש לפנל ניהול של המערכת (wp-admin) וגש לתפריט ההגדרות. לחץ על קישור "מדיה". בעמוד הגדרות מדיה, כל מה שמעניין אותנו זה – העלאת קבצים. בשדה הראשון עליך לרשום את שמו של התיקיה שבו הועלו הקבצים. למשל, אם פתחת Subdomain תחת התיקיה – up1 אז זה הוא השמו של התיקיה. בשדה השני, איפה שכתוב "נתיב מלא לקבצים (לא חובה)" תרשום את הכתובת של סאבדומיין לדוגמה: up1.pjs.co.il ושמור שינוים. מעכשיו כל קובץ שתעלה למערכת, ישמר בתיקיה נפרדת ולא בתיקיה של ברירת מחדל בוורדפרס והשרשור לקבצים אלו יהיו דרך סאבדומיין. ושוב, יצרנו כמה מקורות עבור הדפדפן להורדת הקבצים במקביל.

mako.co.il

Walla.co.il

mako.co.il

בנוסף להכל, ניתן לעשות הרבה כדי לצמצם זמני טעינה של אתרי אינטרנט, משימוש ב-Gzip או Zlib, שמירת קבצים באמצעות Caching, ועד לשימוש ב-CDN או שרתים וירטואליים וכו'.
הקמת אתרי אינטרנט או בניית אתרים זה לא רק התקנת וורדפרס או דרופל לשרת וחשוב מאוד להבין ולזכור זאת, כי יש הרבה עבודה מאחורי הקלעים.

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

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

שיהיה לכולם חג שמח!!!

הכי שמח!!!

הפוסט הזה נכתב בתאריך יום חמישי, 20 באוקטובר, 2011 בשעה 10:45 תחת הקטגוריות טיפים וטריקים.