עיצוב אתר וורדפרס קובע הרבה יותר מאיך שהאתר נראה. כל החלטה עיצובית, פונט, סליידר, אנימציה, תמונה גדולה בראש העמוד, הופכת לקבצים שהגולש מוריד. כאן אני עובר על ההחלטות שעולות הכי הרבה במהירות, עם דוגמאות מהעיצוב של האתר הזה ומה כל אחת עלתה בפועל.
אל תתנו למהירות לעכב אתכם. השאירו פרטים לשדרוג האתר.
תבנית ובונה עמודים
הבחירה הראשונה היא גם הכבדה ביותר. תבנית קלה עם בונה עמודים כמו אלמנטור טוענת את הקוד של הבונה בכל עמוד, וכל אלמנט בעיצוב מוסיף כמה שכבות של תגיות. דף הבית של האתר הזה, שבנוי באלמנטור, מכיל כ-820 אלמנטים, וקוד העמוד שוקל 432 קילובייט לפני דחיסה.
זה עדיין בגבולות הסביר, אבל רואים מאיפה זה מגיע: קונטיינרים בתוך קונטיינרים, שני חלונות קופצים שנטענים בכל עמוד גם כשלא נפתחים, ורשימות שנבנות מתבנית חוזרת. בעיצוב חדש כדאי לבנות כל קטע בכמה שפחות שכבות. כתבתי על זה במאמר על מבנה העמוד ומהירות.
פונטים
כל משקל של פונט הוא קובץ נפרד. בעיצוב של האתר הזה יש חמישה משקלים, אבל רק שלושה נטענים מראש, כ-7.5 קילובייט כל אחד, כי הם מכילים רק אותיות עבריות. פונט שמגיע עם כל השפות וכל המשקלים יכול לשקול פי עשרה.
יש לפונט גם השפעה פחות צפויה. כשהחלפתי פונט באתר לפונט רחב יותר, ההדר נשבר במסכים בינוניים והכותרות קפצו בזמן הטעינה. בחירת פונט היא החלטה עיצובית, אבל צריך לבדוק אותה במהירות ובכל רוחב מסך. פירטתי את ההגדרות במאמר על טעינת פונטים לוקאלית.
התמונה בראש העמוד
התמונה הגדולה במסך הראשון היא כמעט תמיד האלמנט שגוגל מודד כזמן הופעת התוכן הראשי. בדף הבית כאן היא שוקלת 38 קילובייט בפורמט WebP, ונטענת מראש בעדיפות גבוהה. עיצוב עם סרטון רקע או סליידר במקום הזה מכביד הרבה יותר.
אם העיצוב דורש סליידר בראש העמוד, כדאי שהשקופית הראשונה תהיה תמונה רגילה, והשאר ייטענו רק אחרי שהעמוד מוצג. ברוב האתרים שאני בודק, הגולשים כמעט לא מגיעים לשקופית השלישית בכל מקרה.
הזינו את כתובת האתר ולחצו "בדוק את האתר שלי".
עם הלחיצה, נעביר אתכם אל PageSpeed Insights של גוגל.
בסיום הסריקה תוכלו לראות חלק מהבעיות הקיימות.
סליידרים, אנימציות ואלמנטים מיוחדים
כל אלמנט מיוחד מביא איתו ספרייה משלו. סליידר לפני ואחרי, גלריה עם הגדלה, אנימציות כניסה ואייקונים מונפשים, כל אחד מוסיף סקריפט ועיצוב. באתר הזה, הסליידרים של לפני ואחרי גרמו לכל תמונה לרדת פעמיים, עד שתיקנתי.
הכלל שלי: אלמנט מיוחד צריך להצדיק את עצמו. אם הוא מוסיף הבנה, כמו השוואה של לפני ואחרי, הוא שווה את המשקל. אם הוא רק קישוט, כמו אנימציה בכל כותרת, עדיף לוותר. בעיצוב אתר וורדפרס חדש, את ההחלטה הזו כדאי לקבל לפני הבנייה ולא אחריה.
איך עובדים נכון עם מעצב
כדאי להעביר למעצב שלוש מגבלות כבר בהתחלה: מספר משקלי פונט, משקל מקסימלי לתמונה בראש העמוד, ורשימה של אלמנטים מיוחדים שמותרים. כך עיצוב אתר וורדפרס יוצא יפה ומהיר בבת אחת, בלי סבב תיקונים אחרי שהאתר כבר באוויר.
שאלות ותשובות על עיצוב ומהירות
האם אלמנטור מאט את האתר?
הוא מוסיף קוד ושכבות, אבל אתר באלמנטור יכול להיות מהיר. מה שקובע הוא איך בונים: כמה שכבות בכל קטע, כמה ווידג'טים מיוחדים, ואילו הגדרות ביצועים מופעלות. האתר הזה בנוי באלמנטור ומקבל ציונים טובים.
כמה משקלי פונט כדאי להשתמש?
שלושה בדרך כלל מספיקים: רגיל לטקסט, מודגש לכותרות משנה ובולט לכותרת הראשית. כל משקל נוסף הוא קובץ נוסף. אם צריך יותר, עדיף שהמשקלים הנוספים לא ייטענו מראש, אלא רק כשהם מופיעים.
האם תבנית בתשלום מהירה יותר מתבנית חינמית?
לא בהכרח. תבניות בתשלום מגיעות לעיתים קרובות עם הרבה אפשרויות, וכל אפשרות מוסיפה קוד. תבנית פשוטה וקלה עם בונה עמודים היא בדרך כלל בסיס טוב יותר מתבנית שעושה הכל.
מתי כדאי לעצב מחדש בשביל מהירות?
כשהבעיות נובעות מהמבנה עצמו: עמודים עם אלפי אלמנטים, תבנית שטוענת עשרות קבצים, או עיצוב שדורש סליידר כבד בכל עמוד. כשהבעיה היא תמונות או הגדרות, מתקנים בלי לעצב מחדש.
הצעד הבא
מתכננים עיצוב חדש, או רוצים לדעת מה בעיצוב הנוכחי מאט את האתר? שלחו לי את הכתובת. אבדוק מה כל אלמנט עולה, ואגיד לכם מה כדאי לשמור ומה לפשט.
