שפר את עיבוד הדפים

Be Yours מגיע עם יכולת להפוך את טעינת העמוד הראשונית למהירה הרבה יותר.

בעמוד זה

המנגנון

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

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

בהדגמה שלנו, החלת content-visibility על חלקי דף הבית מעניקה שיפור של ביצועי רינדור פי 5 בטעינה ראשונית.

יתרונות וחסרונות

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

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

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