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

לפני הכל – האם באמת מהירות משפיעה על קידום אתרים?

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

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

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

מחקר הראה שאם אמאזון תאט את האתר שלה בשנייה אחת זה יפגע לה ב-1.6 מילארד (!) דולר בשנה. שנייה. אחת.

אמנם אנחנו לא אמאזון, אבל ברור שאתר איטי זו חוויה לא טובה.

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

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

תרשו לי לפרוק קצת

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

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

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

רקע לפוסט הזה

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

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

שלוש הערות לפני שנתחיל.

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

הערה שנייה – מדובר רק על אתרי וורדפרס.

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

שניה לפני שמתחילים, זכרו שתמיד מומלץ לגבות הכל חיצונית לפני שנוגעים, כלי מומלץ לגיבוי הוא UpdraftPlus  

CDN

האם זה חובה? לא.

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

לפי הבדיקה שלנו, זה לא חובה באתרים בישראל, בטח אם השרת חזק. לאתרים בחו”ל או אתרים גלובליים – זה חובה.

המובילים בתחום (והיקרים יחסית) הם קלאוד פלייר. גם אמאזון עם Cloud Front טובים מאד ויש עוד כמובן.

PHP שדרוג גרסה

האם זה חובה? לא.

אחרי מליון שנה שהיתה גרסה 5.6 (משנת 2004) ואחרי שהקהילה החליטה לוותר על גרסה 6, יצאה גרסה 7 והיא משפרת את המהירות. שדרוג הגרסה דרך ה-cPanel תחת PHP Version עושה עבודה טובה מאוד לחוויה של הגולש וכל העניין שזה ממש לוקח קליק אחד, אין פה שום התקנה מסובכת.

כיווץ תמונות

חובה חד משמעית.

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

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

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

אז ניסינו את kraken.io – עליו אנחנו לא ממליצים כיוון שהוא מכווץ יותר מדי וממש מעוות תמונות ראשיות.

כלים נוספים (עד 500 תמונות חינם) הם TinyPNG המומלץ וגם Imagify של WP Rocket. מה שכן, אם אתם סוכנות זה יהפוך לעסק יקר. אני קיבלתי חשבונות של מאות דולרים מ-TinyPNG רק על כיווץ תמונות.

אם אתם בעלי אתר קטן ואתם קוראים את הפוסט הזה, TinyPNG עושה אחלה עבודה: עד 500 תמונות חינם. גם ל-Smush יש גרסה עד 500 תמונות.

אם אתם סוכנות – אני ממליץ על WP Smush Pro מבית WPMudev, לכיווץ הרבה אתרים והרבה תמונות. רק לזכור להגדיר בנוסף שיעשה Super Smush וגם Resize Images ואתם מסודרים.

קאש

חובה בכל אתר. זה גם באמת משפר את החוויה.

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

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

אנחנו ניסינו גם את Humminbird של Mudev אבל הוא עשה בעיות ופחות אהבנו אות יתכן וזה באשמת ה- Setup שלנו.

באופן אישי, אנחנו הכי אוהבים ומרוצים מ-WP Rocket שעושה את העבודה בלחיצת כפתור אחת ועושה אותה טוב.

שימו לב, כדאי להכיר את כלל ההגדרות שיש בפלאג.

Lazy Loading

האם חובה? כן.

מה זה אומר? כשאתה נמצא באתר ארוך כמו ynet, אתה לא צריך שכל העמוד יטען אם בכל מקרה אתה עומד או לעבור עמוד ו/או לגלול למטה. “טעינה עצלה” אומרת שהדף נטען במקום שאתה נמצא.

לא צריך פלאגין מיוחד בשביל זה, אבל צריך להגדיר אותו דרך WP Rocket או אחרים.

כיווץ Javascript ו CSS

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

יש פלאגין טוב יחסית Autoptimize חינמי והוא עושה עבודה מעולה.

String, Rendering etc

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

שאריות

יתכן והפלאגינים לא יוכלו לטפל בהכל, ובמה שלא – צריך לטפל ידנית. אין ברירה.

שלוש נקודות לסיכום

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

זהו, אני הייתי עידו, ואם יש לכם שאלות, אני לא תומך באף אחד 🙂 תשאלו את מרקטיזם…