טכני - הבלוג של אח"י דקר

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

כשאנחנו מדברים על אופטימיזצית זמן טעינה של וורדפרס עולה השאלה הראשונית – למה לנו בכלל?

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

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

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

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

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

רשימה מספר היבטים כאלו:

שרת אחסון – שרת האחסון עליו הבלוג שלכם יושב הוא מרכיב חשוב בזמן הטעינה. האם הוא יושב בארץ או בחו"ל, האם יש עליו מאיצי PHP
תוכנית האחסון – גם התוכנית שלכם חשובה: מהו רוחב הפס שהיא מספקת. האם אתם יושבים על שרת שיתופי או על שרת לבד? כמה אתרים חולקים אתכם את השרת ?
מסד הנתונים – האם השרת משותף או אישי, מהו קצב התגובה של השרת, מתי בפעם אחרונה עשיתם אופטימיזציה לטבלאות ?

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

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

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

025 אופטימיזצית זמן טעינה למה ? נהניתם ? הרשמו לעדכוני RSS !

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

לקחתי את התוסף wp32_related_posts עליו כתבתי בפוסט תגיות בוורדפרס 2.3. חיטוט מהיר בקרביו הראה שהתוסף מכיל פונקציה בשם wp23_get_related_posts המחזירה מערך של הפוסטים הקשורים.

בנוסף השתמשתי בתוסף post_image המאפשר לשייך לכל פוסט תמונה שהיא התמונה הראשונה המופיעה בו, או תמונת ברירת מחדל.

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

הקוד העושה זאת הוא:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$c_posts = $posts; 
$current = $post; 
$c_images = $post_image_attachments; 
$r_posts = wp23_get_related_posts(); 
foreach ($r_posts as $post) { 
$posts = array($post); 
$post_image_attachments = ""; 
echo "<a href="".get_permalink()."">"; 
post_image('http://localhost/www/2.1/wp-content/uploads/rss.png', true); 
echo "</a><a>"; 
} 
$post = $current; 
$posts = $c_posts; 
$post_image_attachments = $c_images; 
</a>

עכשיו בואו נעבור עליו לאט לאט.
התוסף post_image מסתמך על קיומם של מספר משתנים הקשורים לפוסט הנוכחי (עבורו נרצה את התוסף בד"כ), כיוון שאנחנו קצת אונסים את הפעולה שלו נצטרך לאפס את הערכים של משתנים אלו לצרכינו.
המשתנים האמורים הם:

$post – משתנה המכיל את הערכים של הפוסט הנוכחי, משתנה זה יאותחל בתוך הלולאה להיות כל הפעם הפוסט הקשור אליו אנחנו מתייחסים.
$posts – משתנה המכיל את רשימת הפוסטים עבורם התוסף מופעל, כיוון שעבור כל רשימה כזו התוסף מייצר תמונה אחת נאתחל את המשתנה להיות רשימה בת איבר אחד – הפוסט עבורו אנחנו רוצים את התמונה.
$post_image_attachments – רשימת התמונות המקושרות לפוסט, משתנה זה עובר שינוי בתוך התוסף, ועל כן נאתחל אותו לאחר כל שימוש בתוסף.

כשלב ראשון אני שומרת את הערכים הנוכחיים של המשתנים בהם אשתמש על מנת לאחזר אותם לאחר השימוש לערכים המקוריים שלהם.

1
2
3

$c_posts = $posts; 
$current = $post; 
$c_images = $post_image_attachments;

עכשיו אני מפעילה את הפונקציה wp32_get_related_posts על מנת לקבל את רשימת הפוסטים הקשורים עבורה נרצה את התמונות.
את התוצאה שמרתי במשתנה $r_posts.

1	$r_posts = wp32_get_related_posts();

השלב הבא הוא לולאה שעוברת על כל הפוסטים ועבור כל אחד מהם שולפת את התמונה.
את הלולאה נבצע בעזרת foreach כאשר בכל מעבר נשים את ערך הפוסט החדש שקיבלנו בתוך המשתנה $post.

1	foreach ($r_posts as $post)

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

$posts = array($post);
$post_image_attachments = "";[/cc]

כל שנותר לנו הוא לקרוא לפונקציה המוצאת את הצלמית עבור פוסט. הערכים שהפונקציה מקבלת הם במקרה זה תמונת ברירת מחדל שתוצג אם בפוסט אין תמונות וכן הגדרה לייצר צלמית מכל תמונה. הכנסתי את התמונה אל תוך קישור כך שלחיצה אליה תוביל לפוסט האמור.
1
2
3
echo "<a href="&quot;.get_permalink().&quot;">";

post_image('http://localhost/www/2.1/wp-content/uploads/rss.png', true);

echo "</a><a>";</a>

עכשיו נסגור את הלולאה ונחסיר את המשתנים לערכיהם ההתחלתיים
1
2
3
4
}

$post = $current;

$posts = $c_posts;

$post_image_attachments = $c_images;

זה הכל.

025 הצגת פוסטים קשורים כתמונות נהניתם ? הרשמו לעדכוני RSS !

הבלוג של אח"י דקר

חנית כהן כותבת על וורדפרס טכנולוגיה וצרות אחרות

ארכיון התג: טכני

אופטימיזצית זמן טעינה – למה ?

הצגת פוסטים קשורים כתמונות