אופטימיזציה של וורדפרס לשרתי LiteSpeed

בקצרה...

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

הפעולות המרכזיות כוללות הפעלת קאש אובייקטים כמו Redis או Memcached כיווץ ודחיית טעינה של קבצי CSS וסקריפטים המרת תמונות לפורמט WebP או AVIF והפעלת טעינה עצלה. שילוב של כל אלו יחד עם צמצום אלמנטים מיותרים במבנה העמוד של אלמנטור יבטיח טעינה מידית וציון מושלם.

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

מהו שרת לייטספיד ולמה הוא קריטי לביצועי האתר

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

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

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

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

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

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

הגדרות חובה בתוסף LiteSpeed Cache

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

אופטימיזציה לקבצי CSS וסקריפטים

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

  • כיווץ קבצים הפעילו את אפשרות ה Minify עבור קבצי CSS וגם עבור קבצי JS. הפעולה מסירה רווחים והערות מקוד המקור ומקטינה את משקל הקובץ משמעותית.
  • איחוד קבצים בעבר היה נהוג לאחד את כל הקבצים לקובץ אחד גדול. כיום עם פרוטוקול התקשורת החדש HTTP3 עדיף לעיתים דווקא לא לאחד קבצים אלא לתת לדפדפן להוריד אותם במקביל. יש לבדוק כל אתר לגופו אך כברירת מחדל באתרי אלמנטור כבדים איחוד הקבצים בשילוב שרת לייטספיד מציג תוצאות פנטסטיות.
  • דחיית טעינת סקריפטים הגדרה זו קריטית ביותר. חפשו את האפשרות Load JS Deferred והפעילו אותה. הדבר אומר לדפדפן לטעון קודם כל את המבנה והעיצוב של האתר ורק לאחר מכן לטעון את הקוד שאחראי על האנימציות והפונקציות המורכבות.
  • יצירת CSS קריטי מערכת הלייטספיד מאפשרת לייצר קובץ עיצוב מינימלי שמכיל רק את מה שהגולש רואה במסך הראשון UCSS. הגדרה זו מעיפה את הציון של גוגל לשמיים כיוון שהיא מאפשרת צביעה מהירה של התוכן הראשוני ללא המתנה לשאר האתר.

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

טיפול מתקדם בתמונות ובמדיה

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

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

קאש אובייקטים הסוד לטעינת מסד נתונים מהירה

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

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

רשת הפצת תוכן QUIC cloud

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

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

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

אופטימיזציה בתוך אלמנטור עצמו

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

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

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

דן סונגו שיווק דיגיטלי וקידום אתרים

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

שאלות נפוצות

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

בואו נסכם...

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