סיקור ומחקר על Shopify ומסחר אלקטרוני
שתי ערכות העיצוב החינמיות של Shopify מבית היוצר עצמו, בבדיקה זה מול זה על הדמו הרשמיים שלהן: שלוש הרצות Lighthouse במובייל לכל אחת. ל-Horizon יש מנוע נקי יותר, ו-LCP כפול.
כל בעל חנות Shopify פוגש קודם כל את שתי ערכות העיצוב האלה: Dawn, סוסת העבודה בקוד פתוח שמשמשת שנים כערכת הייחוס של הפלטפורמה, ו-Horizon, משפחת ערכות העיצוב החדשה יותר מבית Shopify שאותה החברה מציגה כיום לסוחרים חדשים. העניין בחיפוש אחר הצמד הזה ממשיך לגדול, ובראש תוצאות Google יש שרשורי Reddit שמחליפים התרשמויות. אז במקום התרשמויות, הנה מדידות.
| מדד (חציון של 3 הרצות) | Dawn | Horizon | עדיף |
|---|---|---|---|
| LCP | 6.17s | 12.32s | Dawn, 2× |
| Total Blocking Time | 57ms | 29ms | Horizon, 2× |
| CLS | 0.000 | 0.000 | תיקו |
| First Contentful Paint | 2.80s | 3.57s | Dawn |
| Speed Index | 5.51s | 7.01s | Dawn |
| ציון ביצועים של Lighthouse | 69 | 62 | Dawn |
התוצאה הראשית, שלפיה Dawn צובע את האלמנט הגדול שלו מהר פי שניים, מסתירה מסקנה מעניינת יותר.
המנוע של Horizon הוא הרזה מבין השניים. Total Blocking Time של 29ms הוא מספר מעולה; הוא אומר שכמעט שום JavaScript לא עומד בין הקונה לבין דף אינטראקטיבי. גם 57ms של Dawn זה טוב, אבל זמן הריצה של Horizon עושה פחות עבודה. הקוד של ערכת העיצוב הוא לא הבעיה.
חלון התצוגה של Horizon הוא הבעיה. Shopify הלבישה את הדמו של Horizon בסטייל של תמונות עד קצה המסך ומדיה כבדה, בדיוק הסטייל שערכת העיצוב נועדה למכור, והמדיה הזאת היא מה שלוקח 12.3 שניות לצביעה בחיבור מובייל מואט. לזה יש משמעות שמעבר לדמו: הסקשנים וברירות המחדל שערכת עיצוב מגיעה איתם הם מה שרוב הסוחרים משאירים. אם תתקינו את Horizon ותשאירו וידאו הירו ותמונות בגדלים מוגזמים, תירשו את ה-LCP הזה. אם תחליפו למדיה ממושמעת ובגדלים נכונים, תקבלו את המנוע הנקי של Horizon בלי משקל הדמו שלו.
Dawn נשאר משעמם ומנצח. הדמו של Dawn צנוע, עם תמונות קטנות יותר ובלי וידאו, והוא ממיר את האיפוק הזה ל-LCP של 6.17s ולציון הכולל הגבוה יותר. זו כל הפילוסופיה של Dawn, שנראית היטב בקוד המקור שלו: מינימום JavaScript, נכסים שמסתמכים קודם כל על המערכת, וברירות מחדל שלא נלחמות ברשת.
בחרו לפי מה שאתם באמת מתכוונים לעשות עם המדיה. סוחר שרוצה לספר סיפור בווידאו עד קצה המסך יאט כל אחת משתי ערכות העיצוב, אבל יתחיל מזמן ריצה רזה יותר ב-Horizon. סוחר שרוצה את חלון הראווה החינמי המהיר ביותר שאפשר לצפות לו וישמור על תמונות צנועות יגיע לשם מהר יותר עם Dawn.
ואם מהירות מחוץ לקופסה היא השיקול המכריע, שימו לב שאף אחת מערכות העיצוב החינמיות לא הובילה בבדיקה המלאה שלנו: הדמו המהיר ביותר שמדדנו היה Ultra עם LCP של 1.91s, אחת משש ערכות עיצוב של UTD בחנות הרשמית, ששלוש מהן תפסו את שלושת המקומות הראשונים בדירוג 15 ערכות העיצוב. חינמי היא ברירת המחדל הנכונה; היא פשוט לא תקרת המהירות.
Horizon היא משפחת ערכות העיצוב החדשה ביותר של Shopify מבית היוצר עצמו, והיא מוצעת כאפשרות ברירת מחדל לחנויות חדשות, בעוד Dawn ממשיכה להיות זמינה ב-Theme Store וכקוד פתוח לעיון ב-GitHub. פורומי סוחרים מתדיינים על שאלת הירושה, אבל שתיהן מתוחזקות כרגע וחינמיות.
על חנויות הדמו הרשמיות שלהן, בתנאי Lighthouse זהים במובייל, ה-LCP החציוני של Dawn היה 6.17 שניות מול 12.32 של Horizon. אבל ה-Total Blocking Time של Horizon היה נמוך יותר (29ms מול 57ms), כך שהצביעה האיטית שלו היא משקל המדיה של הדמו, לא משקל המנוע.
כן. שתיהן ערכות עיצוב של Shopify מבית היוצר עצמו וזמינות בלי עלות, ולכן הן נקודת ההשוואה המובנת מאליה לכל רכישה של ערכת עיצוב בתשלום.