הגדלת המהירות של אתר וורדפרס – טיפים קלים ליישום

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

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

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

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

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

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

gtmetrix

http://gtmetrix.com/
נותן לך הצעות איך לשפר את האתר שלך.

webpagetest

http://www.webpagetest.org/
נותן דירוג לנתונים המתקבלים מסריקת האתר ונותן הצעות מה צריך לשפר כדי שהאתר יעבוד מהר יותר.

loadimpact

http://loadimpact.com/
זהו כלי חשוב מאוד עבור אתרים בהם מבקרים עשרות אלפי מבקרים מדי יום. חשבון חינם מאפשר לך לבדוק את ההשפעה על האתר שלך עם 50 משתמשים מדומים, כדי לבדוק כמות גדולה יותר של גולשים יש צורך לשדרג לחשבון בתשלום.

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

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

חברת אחסון האתר

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

גורמים חשובים בעת בחירת חברת אחסון האתר שלך, ואת תוכנית האחסון:

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

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

1. PHP 5
2. MySQL
3. .Htaccess מאפשר לך להוסיף שליטה על איך האתר שלך פועל.

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

תוספים

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

CSS בראש העמוד, JavaScript בתחתית

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

דחיסת הקוד

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

2 כלים מעולים לדחיסת הקוד:

דחיסת JavaScript
http://javascriptcompressor.com/

דחיסת CSS
http://www.cssdrive.com/index.php/main/csscompressor/

כל מה שצריך לעשות זה להעתיק את הקוד לעמוד, ללחוץ על כפתור הדחיסה ואז להדביק את הקוד הדחוס חזרה לעמוד.

יצירת קובץ CSS בודד

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

צמצמו את כמות הבקשות מהשרת

הרעיון הכללי הוא הפחתת כמות הבקשות http מהשרת.

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

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

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

דוגמאות:

דוגמא 1
במקום קוד דינמי זה:

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

ניתן לשנות לקוד סטטי זה:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

דוגמא 2
במקום קוד דינמי זה:

<title><?php bloginfo(’name’); ?><?php bloginfo('description'); ?></title>

ניתן לשנות לקוד סטטי זה:

<title>הגדלת המהירות של אתר וורדפרס - טיפים קלים ליישום</title>

דוגמא 3
במקום קוד דינמי זה:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

ניתן לשנות לקוד סטטי זה:

<link rel="stylesheet" href="https://www.felix007.co.il/wp-content/themes/felix-main-blank/css/style.css" type="text/css" media="screen" />

אופטימיזציה של התמונת

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

— חשוב ביותר להעלות תמונות בגודל המתאים לצפייה, תמונות גדולות מדי, מעבר למשקל הגדול שלהם, גם דורשות מהמערכת זמן עיבוד להקטנת הגודל לצפייה.
— חשוב ביותר לעשות אופטימזציה לתמונות ולמצוא את נתיב הזהב של משקל לעומת פשרה קטנה במראה. כל תמונה בינונית יכולה לשקול גם 200 kb על ידי דחיסה שלה ואיבוד איכות יחסית זניח, ניתן להוריד את משקלה ל- 40 kb. הנתון הזה יכול להשפיע בצורה דרמטית על עלייה של אתר. לכן צריך להתייחס אליו בצורה רצינית.

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

שימוש ב-CSS כדי ליצור אפקטים שנעשו קודם עם תמונות

1. החלפת תמונות עם CSS כגון כפתורים במאוס אובר
2. הוספת שיפוע צבע (gradients) עם CSS
3. הוספת צל עם CSS
4. יצירת תיבה עם פינות מעוגלות עם CSS
5. CSS Sprites

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

שימוש ב- w3-total-cache

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

הוראות התקנה ושימוש בפלאגין (אנגלית) w3 total cache

לסיכום

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

בהצלחה